/* ==========================================================================
   Members.css — styles specific to the Members module screens.
   ========================================================================== */

/* ---- Members home: KPI strip ---- */
.members-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 14px;
    margin-bottom: 22px
}

.members-kpi-card {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow)
}

.members-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px
}

.members-kpi-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text)
}

.members-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 5px
}

.members-kpi-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px
}

/* ---- Members home: grouped action cards ---- */
.members-groups {
    display: flex;
    flex-direction: column;
    gap: 26px
}

.members-group-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px
}

.members-group-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px
}

.members-group-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text)
}

.members-group-desc {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--text-3)
}

.members-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    gap: 13px
}

.members-action-card {
    display: flex;
    align-items: center;
    gap: 13px;
    text-align: left;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 15px 16px;
    cursor: pointer;
    box-shadow: var(--shadow);
    width: 100%;
    text-decoration: none;
    color: inherit
}

    .members-action-card:hover {
        border-color: var(--border-strong);
        color: inherit
    }

.members-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px
}

.members-action-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.members-action-desc {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px
}

.members-action-chevron {
    flex: 0 0 auto;
    color: var(--text-3);
    font-size: 15px
}

@media (max-width:576px) {
    .members-kpi-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

/* ==========================================================================
   List screens (SHG Management, Member Management, etc.)
   ========================================================================== */

.list-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-3);
    padding: 0;
    margin-bottom: 14px;
    text-decoration: none
}

    .list-back-link:hover {
        color: var(--primary)
    }

    .list-back-link i {
        font-size: 14px
    }

.list-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 14px;
    margin-bottom: 16px
}

.list-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 15px 17px;
    box-shadow: var(--shadow)
}

.list-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px
}

.list-kpi-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--text)
}

.list-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 5px
}

.list-kpi-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px
}

.list-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 11px 13px;
    margin-bottom: 14px;
    box-shadow: var(--shadow)
}

.list-search-box {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 200px;
    height: 38px;
    padding: 0 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px
}

    .list-search-box i {
        color: var(--text-3);
        font-size: 14px
    }

.list-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    height: 100%
}

.list-filter-select {
    height: 38px;
    padding: 0 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer
}

.list-daterange-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer
}

    .list-daterange-btn:hover {
        border-color: var(--border-strong)
    }

.list-clear-btn {
    height: 38px;
    padding: 0 12px;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer
}

.list-table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.list-table-scroll {
    overflow: auto;
    max-height: 560px
}

.list-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 820px
}

    .list-table thead th {
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: .04em;
        color: var(--text-3);
        padding: 11px 16px;
        background: var(--surface-2);
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 1
    }

        .list-table thead th.num {
            text-align: right
        }

    .list-table tbody td {
        padding: 11px 16px
    }

        .list-table tbody td.num {
            text-align: right
        }

    .list-table tbody tr {
        border-top: 1px solid var(--border)
    }

        .list-table tbody tr:hover {
            background: var(--surface-2)
        }

.list-cell-primary {
    color: var(--text);
    font-weight: 700
}

    .list-cell-primary.mono {
        font-family: var(--font-mono)
    }

.list-cell {
    color: var(--text-2);
    font-weight: 500
}

    .list-cell.mono {
        font-family: var(--font-mono)
    }

.list-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px
}

.list-row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end
}

.list-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 14px;
    text-decoration: none
}

    .list-action-btn:hover {
        border-color: var(--border-strong);
        color: var(--text)
    }

.list-empty {
    padding: 44px 24px;
    text-align: center;
    color: var(--text-3)
}

.list-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 4px
}

.list-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap
}

.list-pagination-summary {
    font-size: 12px;
    color: var(--text-3)
}

.list-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px
}

.list-page-btn {
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px
}

    .list-page-btn:disabled {
        opacity: .45;
        cursor: default
    }

    .list-page-btn:not(:disabled):hover {
        border-color: var(--border-strong)
    }

.list-page-label {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-2);
    min-width: 40px;
    text-align: center
}

/* ==========================================================================
   SHG Profile / Workspace
   ========================================================================== */

.shg-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.shg-summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: 14px
}

.shg-summary-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px
}

.shg-summary-icon {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: linear-gradient(140deg,var(--primary),var(--primary-2));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 auto;
    font-size: 24px
}

.shg-summary-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.shg-summary-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 21px;
    margin: 0;
    letter-spacing: -.02em;
    color: var(--text)
}

.shg-summary-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px
}

    .shg-summary-badge.neutral {
        background: var(--surface-2);
        color: var(--text-2)
    }

.shg-summary-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 16px 20px
}

.shg-summary-meta-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .04em
}

.shg-summary-meta-value {
    font-size: 14px;
    font-weight: 600;
    margin-top: 3px;
    color: var(--text)
}

.shg-summary-progress-row {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.shg-summary-progress-track {
    flex: 1;
    min-width: 180px;
    height: 6px;
    background: var(--surface-2);
    border-radius: 6px;
    overflow: hidden
}

.shg-summary-progress-fill {
    height: 100%;
    background: linear-gradient(90deg,var(--primary),var(--accent));
    border-radius: 6px
}

.shg-summary-progress-label {
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 600
}

.shg-workspace-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 14px;
    align-items: start
}

.shg-tab-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 5px;
    margin-bottom: 14px;
    box-shadow: var(--shadow)
}

.shg-tab-btn {
    white-space: nowrap;
    padding: 8px 16px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    background: transparent;
    color: var(--text-2)
}

    .shg-tab-btn.active {
        background: var(--primary);
        color: #fff
    }

.shg-info-grid {
    display: grid;
    /*    grid-template-columns: 1fr 1fr 1fr;*/
    gap: 10px;
    margin-bottom: 14px
}

.shg-info-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 18px
}

    .shg-info-panel h3 {
        margin: 0 0 16px;
        font-size: 14px;
        font-weight: 700;
        color: var(--text)
    }

.shg-info-fields {
    /*    display: flex;
    flex-direction: column;
    gap: 14px*/

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px 16px;
}

    .shg-info-fields label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-2);
        margin-bottom: 7px
    }

.shg-gps-placeholder {
    height: 42px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--text-3);
    font-size: 12px
}

    .shg-gps-placeholder i {
        font-size: 14px
    }

.shg-soon-badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 5px
}

.shg-bank-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.shg-bank-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 19px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left
}

.shg-bank-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px
}

.shg-bank-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.shg-bank-sub {
    font-size: 11.5px;
    color: var(--text-3)
}

.shg-bank-body {
    padding: 0 19px 19px;
    border-top: 1px solid var(--border)
}

    .shg-bank-body .erp-grid {
        margin-top: 16px
    }

.shg-bank-toggle .bi-chevron-down {
    transition: transform .18s
}

.shg-bank-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg)
}

.shg-quick-actions {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 14px;
/*    position: sticky;
    top: 78px*/
}

.shg-quick-actions-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--text-3);
    padding: 4px 6px 10px
}

.shg-quick-action-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    text-align: left;
    width: 100%;
    text-decoration: none
}

    .shg-quick-action-item:hover {
        background: var(--surface-2);
        color: var(--text)
    }

    .shg-quick-action-item .left {
        width: 20px;
        text-align: center;
        flex: 0 0 auto;
        font-size: 15px
    }

    .shg-quick-action-item .lbl {
        flex: 1
    }

    .shg-quick-action-item .chev {
        color: var(--text-3);
        font-size: 13px
    }

.shg-placeholder-tab {
    padding: 44px 24px;
    text-align: center;
    color: var(--text-3);
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 15px
}

    .shg-placeholder-tab .title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-2);
        margin-bottom: 4px
    }

@media (max-width:992px) {
    .shg-workspace-grid {
        grid-template-columns: 1fr
    }

    .shg-info-grid {
        grid-template-columns: 1fr
    }
}

/* ==========================================================================
   SHG Profile — Group Members tab
   ========================================================================== */

.shg-tab-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.shg-tab-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 19px 12px;
    flex-wrap: wrap;
    gap: 10px
}

    .shg-tab-card-head h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--text)
    }

.shg-tab-card h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text)
}

.shg-tab-card-actions {
    display: flex;
    gap: 7px
}

.shg-small-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none
}

.shg-small-btn-primary {
    background: var(--primary);
    border: none;
    color: #fff
}

    .shg-small-btn-primary:hover {
        background: var(--primary-2);
        color: #fff
    }

.shg-small-btn-outline {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2)
}

    .shg-small-btn-outline:hover {
        border-color: var(--border-strong)
    }

.shg-members-table-scroll {
    overflow: auto;
    max-height: 520px
}

.shg-members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 900px
}

    .shg-members-table thead th {
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: .04em;
        color: var(--text-3);
        padding: 10px 12px;
        background: var(--surface-2);
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 1
    }

        .shg-members-table thead th:first-child {
            padding-left: 19px
        }

        .shg-members-table thead th:last-child {
            padding-right: 19px
        }

        .shg-members-table thead th.num {
            text-align: right
        }

    .shg-members-table tbody td {
        padding: 10px 12px
    }

        .shg-members-table tbody td:first-child {
            padding-left: 19px
        }

        .shg-members-table tbody td:last-child {
            padding-right: 19px
        }

        .shg-members-table tbody td.num {
            text-align: right;
            font-family: var(--font-mono);
            font-weight: 600
        }

    .shg-members-table tbody tr {
        border-top: 1px solid var(--border)
    }

        .shg-members-table tbody tr:hover {
            background: var(--surface-2)
        }

.shg-member-cell {
    display: flex;
    align-items: center;
    gap: 10px
}

.shg-member-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono)
}

.shg-member-name {
    font-weight: 700;
    color: var(--text)
}

.shg-member-sub {
    font-size: 10.5px;
    color: var(--text-3);
    font-family: var(--font-mono)
}

.shg-member-mobile {
    font-family: var(--font-mono);
    color: var(--text-2)
}

.shg-member-status-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px
}

.shg-member-row-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end
}

.shg-member-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 13px
}

    .shg-member-action-btn:hover {
        border-color: var(--border-strong);
        color: var(--text)
    }

    .shg-member-action-btn.danger {
        color: var(--danger)
    }

        .shg-member-action-btn.danger:hover {
            border-color: var(--danger)
        }

/* ==========================================================================
   "Add Members to SHG" modal — CSS-only two-option toggle (no JS/C#)
   ========================================================================== */

.am-radio {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none
}

.am-option-group {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap
}

.am-option-card {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    background: var(--surface)
}

    .am-option-card .am-radio-off {
        font-size: 17px;
        color: var(--text-3)
    }

    .am-option-card .am-radio-on {
        font-size: 17px;
        color: var(--primary);
        display: none
    }

.am-option-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.am-option-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px
}

#amOptExisting:checked ~ .am-option-group label[for="amOptExisting"],
#amOptNew:checked ~ .am-option-group label[for="amOptNew"] {
    border-color: var(--primary);
    background: var(--primary-soft)
}

    #amOptExisting:checked ~ .am-option-group label[for="amOptExisting"] .am-radio-off,
    #amOptNew:checked ~ .am-option-group label[for="amOptNew"] .am-radio-off {
        display: none
    }

    #amOptExisting:checked ~ .am-option-group label[for="amOptExisting"] .am-radio-on,
    #amOptNew:checked ~ .am-option-group label[for="amOptNew"] .am-radio-on {
        display: inline-block
    }

.am-panel {
    display: none
}

#amOptExisting:checked ~ .am-panel-existing {
    display: block
}

#amOptNew:checked ~ .am-panel-new {
    display: block
}

.am-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 14px
}

.am-filter-select {
    height: 38px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer
}

.am-search-box {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 180px;
    height: 38px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px
}

    .am-search-box i {
        color: var(--text-3);
        font-size: 14px
    }

.am-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    height: 100%
}

.am-table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto
}

.am-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px
}

    .am-table thead th {
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: .04em;
        color: var(--text-3);
        padding: 9px 12px;
        background: var(--surface-2);
        text-align: left;
        position: sticky;
        top: 0
    }

    .am-table tbody td {
        padding: 9px 12px
    }

    .am-table tbody tr {
        border-top: 1px solid var(--border)
    }

        .am-table tbody tr:hover {
            background: var(--surface-2)
        }

        .am-table tbody tr.am-row-disabled {
            opacity: .55
        }

            .am-table tbody tr.am-row-disabled:hover {
                background: transparent
            }

.am-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer
}

    .am-checkbox:disabled {
        cursor: not-allowed
    }

.am-assigned-note {
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 2px
}

.am-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    gap: 14px;
    flex-wrap: wrap
}

.am-selected-count {
    font-size: 12px;
    color: var(--text-3)
}

.am-new-panel {
    text-align: center;
    padding: 30px 20px
}

.am-new-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 14px
}

.am-new-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px
}

.am-new-desc {
    font-size: 12.5px;
    color: var(--text-3);
    max-width: 380px;
    margin: 0 auto 18px
}

@media (max-width:576px) {
    .am-option-group {
        flex-direction: column
    }
}

/* ==========================================================================
   SHG Profile — Share Capital tab
   ========================================================================== */

.shg-share-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
    gap: 13px;
    margin-bottom: 14px
}

.shg-share-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 15px 17px;
    box-shadow: var(--shadow)
}

.shg-share-stat-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2)
}

.shg-share-stat-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 21px;
    margin-top: 6px;
    color: var(--text)
}

    .shg-share-stat-value.sm {
        font-size: 17px;
        margin-top: 8px
    }

    .shg-share-stat-value.text-green-tone {
        color: var(--green)
    }

    .shg-share-stat-value.text-amber-tone {
        color: var(--amber)
    }

.shg-share-table-scroll {
    overflow: auto;
    max-height: 520px
}

.shg-share-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    min-width: 520px
}

    .shg-share-table thead th {
        font-weight: 700;
        font-size: 10.5px;
        letter-spacing: .04em;
        color: var(--text-3);
        padding: 10px 12px;
        background: var(--surface-2);
        text-align: left;
        position: sticky;
        top: 0;
        z-index: 1
    }

        .shg-share-table thead th:first-child {
            padding-left: 19px
        }

        .shg-share-table thead th:last-child {
            padding-right: 19px
        }

        .shg-share-table thead th.num {
            text-align: right
        }

    .shg-share-table tbody td {
        padding: 10px 12px
    }

        .shg-share-table tbody td:first-child {
            padding-left: 19px;
            font-weight: 600;
            color: var(--text)
        }

        .shg-share-table tbody td:last-child {
            padding-right: 19px;
            color: var(--text-3)
        }

        .shg-share-table tbody td.num {
            text-align: right;
            font-family: var(--font-mono);
            font-weight: 600;
            color: var(--text)
        }

        .shg-share-table tbody td.mode {
            color: var(--text-2)
        }

    .shg-share-table tbody tr {
        border-top: 1px solid var(--border)
    }

        .shg-share-table tbody tr:hover {
            background: var(--surface-2)
        }

/* ==========================================================================
   SHG Profile — Documents tab
   ========================================================================== */

.shg-doc-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

    .shg-doc-stats span {
        font-size: 11px;
        font-weight: 700
    }

.shg-doc-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 12px;
    border-top: 1px solid var(--border)
}

.shg-doc-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px
}

.shg-doc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.shg-doc-meta {
    font-size: 11px;
    color: var(--text-3)
}

.shg-doc-status-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    margin-right: 4px
}

.shg-doc-actions {
    display: flex;
    gap: 5px
}

.shg-doc-action-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 14px
}

    .shg-doc-action-btn:hover {
        border-color: var(--border-strong);
        color: var(--text)
    }

    .shg-doc-action-btn.danger {
        color: var(--danger)
    }

        .shg-doc-action-btn.danger:hover {
            border-color: var(--danger)
        }

.shg-doc-upload-btn {
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700
}

/* ==========================================================================
   SHG Profile — Activity tab
   ========================================================================== */

.shg-activity-item {
    display: flex;
    gap: 13px
}

.shg-activity-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto
}

.shg-activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px
}

    .shg-activity-dot.dot-primary {
        box-shadow: 0 0 0 3px var(--primary-soft)
    }

    .shg-activity-dot.dot-blue {
        box-shadow: 0 0 0 3px var(--blue-soft)
    }

    .shg-activity-dot.dot-accent {
        box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .shg-activity-dot.dot-green {
        box-shadow: 0 0 0 3px var(--green-soft)
    }

    .shg-activity-dot.dot-amber {
        box-shadow: 0 0 0 3px var(--amber-soft)
    }

    .shg-activity-dot.dot-neutral {
        background: var(--text-3);
        box-shadow: 0 0 0 3px var(--surface-3)
    }

.shg-activity-line {
    width: 2px;
    flex: 1;
    background: var(--border);
    margin: 3px 0
}

.shg-activity-body {
    padding-bottom: 18px
}

.shg-activity-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text)
}

.shg-activity-time {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px
}

/* ==========================================================================
   Member Profile / Workspace
   ========================================================================== */

.mp-header {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: 14px
}

.mp-header-left {
    flex: 1;
    min-width: 300px
}

.mp-avatar-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 16px
}

.mp-avatar {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: linear-gradient(140deg,var(--accent),var(--amber));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 auto;
    font-size: 24px
}

.mp-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.mp-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 23px;
    margin: 0;
    letter-spacing: -.02em;
    color: var(--text)
}

.mp-mno {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-2);
    margin-top: 4px
}

.mp-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
    gap: 14px 20px
}

.mp-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    /*    margin-bottom: 8px;*/
}

.mp-meta-value {
    font-size: 13px;
    font-weight: 600;
    margin-top: 3px;
    color: var(--text)
}

.mp-footer-row {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap
}

.mp-completion-label {
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 600
}

.mp-tab-bar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 5px;
    margin-bottom: 14px;
    box-shadow: var(--shadow)
}

.mp-tab-btn {
    white-space: nowrap;
    padding: 8px 15px;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    background: transparent;
    color: var(--text-2)
}

    .mp-tab-btn.active {
        background: var(--primary);
        color: #fff
    }

.mp-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 18px 20px
}

    .mp-panel h3 {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 700;
        color: var(--text)
    }

.mp-panel-sub {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--text-3)
}

.mp-doc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.mp-doc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 19px 12px
}

    .mp-doc-card-head h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--text)
    }

.mp-doc-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 12px;
    border-top: 1px solid var(--border)
}

.mp-doc-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px
}

.mp-doc-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.mp-doc-ref {
    font-size: 11px;
    color: var(--text-3)
}

.mp-doc-status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px
}

.mp-kyc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

    .mp-kyc-head h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--text)
    }

.mp-kyc-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 20px
}

.mp-kyc-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 18px
}

.mp-kyc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 11px
}

.mp-kyc-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px
}

.mp-kyc-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text)
}

.mp-kyc-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2)
}

.mp-history-item {
    display: flex;
    gap: 13px
}

.mp-history-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto
}

.mp-history-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 4px
}

    .mp-history-dot.dot-primary {
        box-shadow: 0 0 0 3px var(--primary-soft)
    }

    .mp-history-dot.dot-blue {
        box-shadow: 0 0 0 3px var(--blue-soft)
    }

    .mp-history-dot.dot-green {
        box-shadow: 0 0 0 3px var(--green-soft)
    }

    .mp-history-dot.dot-accent {
        box-shadow: 0 0 0 3px var(--accent-soft)
    }

    .mp-history-dot.dot-neutral {
        background: var(--text-3);
        box-shadow: 0 0 0 3px var(--surface-3)
    }

.mp-history-line {
    width: 2px;
    flex: 1;
    background: var(--border);
    margin: 3px 0
}

.mp-history-body {
    padding-bottom: 18px
}

.mp-history-text {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text)
}

.mp-history-time {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px
}

/* ==========================================================================
   KYC Verification Workspace
   ========================================================================== */

.kyc-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 14px;
    margin-bottom: 16px
}

.kyc-summary-card {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow)
}

.kyc-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px
}

.kyc-summary-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    color: var(--text)
}

.kyc-summary-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 4px
}

.kyc-work-grid {
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    gap: 14px;
    align-items: start
}

.kyc-member-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    overflow: hidden
}

.kyc-member-head {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2)
}

.kyc-member-avatar {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    margin: 0 auto 12px;
    background: linear-gradient(140deg,var(--accent),var(--amber));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 30px
}

.kyc-member-name {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 17px;
    color: var(--text)
}

.kyc-member-id {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px
}

.kyc-member-status {
    display: inline-block;
    margin-top: 9px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 20px
}

.kyc-member-info {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 13px
}

.kyc-info-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--text-3)
}

.kyc-info-row {
    display: flex;
    justify-content: space-between;
    gap: 10px
}

    .kyc-info-row .k {
        font-size: 12px;
        color: var(--text-3)
    }

    .kyc-info-row .v {
        font-size: 12.5px;
        font-weight: 600;
        text-align: right;
        color: var(--text)
    }

        .kyc-info-row .v.mono {
            font-family: var(--font-mono)
        }

.kyc-future {
    padding: 14px 18px;
    border-top: 1px solid var(--border)
}

.kyc-future-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--text-3);
    margin-bottom: 10px
}

.kyc-future-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 1px dashed var(--border-strong);
    border-radius: 9px;
    opacity: .72;
    margin-bottom: 8px
}

.kyc-future-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text-3);
    font-size: 12px
}

.kyc-future-label {
    flex: 1;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-2)
}

.kyc-future-soon {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-3);
    background: var(--surface-2);
    padding: 2px 6px;
    border-radius: 5px
}

.kyc-docs-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 18px 20px
}

.kyc-docs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px
}

    .kyc-docs-head h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--text)
    }

.kyc-docs-progress {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3)
}

.kyc-docs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.kyc-doc-tile {
    border: 1px solid var(--border);
    border-radius: 13px;
    overflow: hidden;
    background: var(--surface-2)
}

.kyc-doc-preview {
    position: relative;
    height: 100px;
    background: linear-gradient(135deg,var(--surface-3),var(--surface-2));
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border)
}

.kyc-doc-preview-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px
}

.kyc-doc-preview-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px
}

.kyc-doc-body {
    padding: 11px 13px
}

.kyc-doc-tile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.kyc-doc-tile-ref {
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--font-mono);
    margin-top: 2px
}

.kyc-doc-tile-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-size: 10.5px;
    color: var(--text-3)
}

.kyc-verify-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 18px 20px
}

    .kyc-verify-card h3 {
        margin: 0 0 14px;
        font-size: 15px;
        font-weight: 700;
        color: var(--text)
    }

.kyc-decision-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--text-3);
    margin-bottom: 9px
}

.kyc-decision-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.kyc-decision-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: 11px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%
}

    .kyc-decision-opt:hover {
        border-color: var(--border-strong)
    }

.kyc-decision-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px
}

.kyc-decision-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2)
}

.kyc-verify-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 15px
}

    .kyc-verify-meta .k {
        font-size: 10px;
        font-weight: 700;
        color: var(--text-3);
        letter-spacing: .04em
    }

    .kyc-verify-meta .v {
        font-size: 12.5px;
        font-weight: 600;
        margin-top: 3px;
        color: var(--text)
    }

.kyc-remarks-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 8px;
    margin-top: 14px
}

.kyc-remarks-input {
    min-height: 74px
}

.kyc-submit-btn {
    width: 100%;
    height: 42px;
    margin-top: 14px;
    background: var(--primary);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(14,124,97,.25)
}

    .kyc-submit-btn:hover {
        background: var(--primary-2)
    }

.kyc-timeline-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--shadow);
    padding: 18px 20px;
    margin-top: 14px
}

    .kyc-timeline-card h3 {
        margin: 0 0 18px;
        font-size: 15px;
        font-weight: 700;
        color: var(--text)
    }

.kyc-timeline-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap
}

.kyc-timeline-step {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.kyc-timeline-ring {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

    .kyc-timeline-ring.done {
        background: var(--green-soft)
    }

    .kyc-timeline-ring.pending {
        background: var(--surface-2)
    }

.kyc-timeline-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px
}

    .kyc-timeline-dot.done {
        background: var(--green)
    }

    .kyc-timeline-dot.pending {
        background: var(--border-strong)
    }

.kyc-timeline-label {
    font-size: 12px;
    font-weight: 700;
    margin-top: 9px;
    color: var(--text)
}

.kyc-timeline-time {
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 2px
}

@media (max-width:1200px) {
    .kyc-work-grid {
        grid-template-columns: 1fr 1fr
    }

    .kyc-verify-card {
        grid-column: span 2
    }
}

@media (max-width:768px) {
    .kyc-work-grid {
        grid-template-columns: 1fr
    }

    .kyc-verify-card {
        grid-column: auto
    }

    .kyc-docs-grid {
        grid-template-columns: 1fr
    }
}

/* ==========================================================================
   Member Approval
   ========================================================================== */

.appr-decision-grid {
    display: flex;
    flex-direction: column;
    gap: 3px
}


/* ==========================================================================
   Upload Document modal (SHG Documents tab)
   ========================================================================== */

.ud-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 8px
}

.ud-extra-field {
    margin-top: 14px
}

    .ud-extra-field label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-2);
        margin-bottom: 8px
    }

.ud-dropzone {
    margin-top: 16px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 14px;
    background: var(--surface-2);
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px
}

.ud-dropzone-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 10px
}

.ud-dropzone-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text)
}

.ud-dropzone-sub {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
    margin-bottom: 14px
}

.ud-browse-btn {
    height: 36px;
    padding: 0 16px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-2);
    cursor: pointer;
    align-content: center;
}

    .ud-browse-btn:hover {
        border-color: var(--primary);
        color: var(--primary)
    }

.ud-file-input {
    display: none
}

.ud-file-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface)
}

.ud-file-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--primary-soft);
    color: var(--primary)
}

.ud-file-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}

.ud-file-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px
}

.ud-file-status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    flex: 0 0 auto
}

.ud-file-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto
}

.ud-file-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 13px
}

    .ud-file-action-btn:hover {
        border-color: var(--border-strong);
        color: var(--text)
    }

    .ud-file-action-btn.danger:hover {
        border-color: #E0847A;
        color: #C0392B
    }

/* ==========================================================================
   Document view / delete modals (SHG Documents tab)
   ========================================================================== */

.docv-preview {
    height: 160px;
    border-radius: 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    color: var(--danger)
}

.docv-meta {
    margin-top: 14px;
    text-align: center
}

.docv-name {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text)
}

.docv-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 4px
}

.mf-modal-btn-danger {
    height: 40px;
    padding: 0 18px;
    background: var(--danger);
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer
}

    .mf-modal-btn-danger:hover {
        background: #A8392D
    }


/* ==========================================================================
   Member Application Review (Member Approval -> full page view)
   ========================================================================== */

.av-status-flow {
    display: flex;
    align-items: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 20px 22px 16px;
    margin-bottom: 20px
}

.av-status-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto
}

.av-status-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--border-strong);
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 700
}

.av-status-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .01em
}

.av-status-step.active .av-status-circle {
    background: var(--accent);
    color: #fff
}

.av-status-step.active .av-status-label {
    color: var(--text)
}

.av-status-step.done .av-status-circle {
    background: var(--green);
    color: #fff
}

.av-status-step.done .av-status-label {
    color: var(--text-2)
}

.av-status-connector {
    flex: 1 1 auto;
    height: 2px;
    background: var(--border-strong);
    margin: 14px 8px 0
}

    .av-status-connector.done {
        background: var(--green)
    }

.av-decision-card {
    margin-top: 14px
}

.av-decision-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text)
}




/* =====================================================================
   MEMBER WITHDRAWAL (mwd-*) — append at end of Members.css
   Reuses lo-context, lo-stepper, lo-tabs, lo-layout, lo-side, lo-audit,
   lo-decide-*, lo-upload-*, list-* classes.
   ===================================================================== */

/* ---- date range button in filter bar ---- */
.mwd-daterange {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
}

/* ---- context header (avatar + name + balance chips) ---- */
.mwd-context-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.mwd-context-name {
    flex: 1 1 auto;
    min-width: 0;
}

.mwd-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mwd-member-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}

/* ---- balance chips (savings green / loan red) ---- */
.mwd-balance-chips {
    display: flex;
    gap: 12px;
    flex: 0 0 auto;
}

.mwd-bal-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 16px;
    border-radius: 12px;
    min-width: 130px;
}

.mwd-bal-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
}

.mwd-bal-value {
    font-size: 18px;
    font-weight: 800;
}

.mwd-bal-savings {
    background: var(--green-soft);
}

    .mwd-bal-savings .mwd-bal-label {
        color: var(--green);
    }

    .mwd-bal-savings .mwd-bal-value {
        color: var(--green);
    }

.mwd-bal-loan {
    background: var(--danger-soft);
}

    .mwd-bal-loan .mwd-bal-label {
        color: var(--danger);
    }

    .mwd-bal-loan .mwd-bal-value {
        color: var(--danger);
    }

/* ---- context meta grid: 8 columns ---- */
.mwd-context-meta {
    grid-template-columns: repeat(8, 1fr);
}

.mwd-ok {
    color: var(--green);
    font-weight: 700;
}

.mwd-danger {
    color: var(--danger);
    font-weight: 700;
    font-size: 13px;
}

/* ---- stepper spacing ---- */
.mwd-stepper {
    margin: 16px 0;
}

/* ---- table total row ---- */
.mwd-total-row td {
    background: var(--surface-2);
    border-top: 2px solid var(--border-strong);
}

/* ---- quick action buttons in sidebar ---- */
.mwd-actions {
    gap: 2px;
}

.mwd-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    font-family: var(--font-body);
}

    .mwd-action:hover {
        background: var(--surface-2);
        color: var(--text);
    }

    .mwd-action i {
        font-size: 15px;
        color: var(--text-3);
        flex: 0 0 auto;
    }

/* ---- eligibility card ---- */
.mwd-eligible-card {
    border-radius: var(--r-lg, 14px);
    padding: 16px 18px;
    border: 1px solid var(--border);
}

.mwd-eligible-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
}

.mwd-eligible-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    margin: 2px 0 4px;
}

.mwd-eligible-sub {
    font-size: 12px;
    font-weight: 600;
}

.mwd-eligible-no {
    background: var(--danger-soft);
    border-color: var(--danger);
}

    .mwd-eligible-no .mwd-eligible-label {
        color: var(--danger);
    }

    .mwd-eligible-no .mwd-eligible-value {
        color: var(--danger);
    }

    .mwd-eligible-no .mwd-eligible-sub {
        color: var(--danger);
    }

/* yes variant — swap mwd-eligible-no for this when eligible */
.mwd-eligible-yes {
    background: var(--green-soft);
    border-color: var(--green);
}

    .mwd-eligible-yes .mwd-eligible-label,
    .mwd-eligible-yes .mwd-eligible-value,
    .mwd-eligible-yes .mwd-eligible-sub {
        color: var(--green);
    }

/* ---- responsive ---- */
@media (max-width: 1100px) {
    .mwd-context-meta {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 820px) {
    .mwd-context-head {
        flex-wrap: wrap;
    }

    .mwd-balance-chips {
        width: 100%;
    }

    .mwd-bal-chip {
        flex: 1 1 auto;
    }

    .mwd-context-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}