/* ==========================================================
   Edit Member – styles
   Original classes are kept (.form-section, .readonly-fields,
   .listview-container, .listview, .btn-sm, .modified) with updated
   properties. All new rules are scoped to #formEditMember.
   ========================================================== */

/* ---------- Design tokens ---------- */
:is(#formEditMember, .member-form) {
    --pe-accent: #2563eb;
    --pe-accent-ring: rgba(37, 99, 235, 0.14);
    --pe-text: #1f2937;
    --pe-muted: #667085;
    --pe-border: #d5dbe5;
    --pe-border-soft: #e8ecf2;
    --pe-surface: #ffffff;
    --pe-surface-alt: #f5f7fa;
    --pe-radius: 10px;
    color: var(--pe-text);
}

/* ==========================================================
   Original classes (kept, properties updated)
   ========================================================== */

/* Section card (was: margin-bottom only) */
.form-section {
    background: var(--pe-surface, #ffffff);
    border: 1px solid var(--pe-border-soft, #e8ecf2);
    border-radius: 14px;
    padding: 1.25rem 1.5rem 1.4rem;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* Read-only wrapper (was: #f5f5f5 + not-allowed) */
.readonly-fields input,
.readonly-fields select {
    background-color: var(--pe-surface-alt, #f5f7fa);
    cursor: not-allowed;
}

.listview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.listview {
    flex: 1 1 45%;
    border: 1px solid var(--pe-border-soft, #e8ecf2);
    padding: 10px;
    border-radius: 10px;
    min-height: 200px;
    overflow-y: auto;
}

    .listview ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .listview li {
        margin: 10px 0;
        padding: 8px;
        background: var(--pe-surface-alt, #f5f7fa);
        border-radius: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

/* Small button (was: padding 2px 5px) */
.btn-sm {
    padding: .38rem .85rem;
    font-size: .8125rem;
}

.modified {
    color: #2563eb;
}

/* ==========================================================
   Section headings
   ========================================================== */
:is(#formEditMember, .member-form) .form-section > h5 {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--pe-border-soft);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .005em;
    color: var(--pe-text);
}

    :is(#formEditMember, .member-form) .form-section > h5::before {
        content: "";
        width: 4px;
        height: 1.05em;
        border-radius: 2px;
        background: var(--pe-accent);
    }

:is(#formEditMember, .member-form) .form-section .row + .row {
    margin-top: .35rem;
}

:is(#formEditMember, .member-form) .form-section h6 {
    font-weight: 600;
    color: var(--pe-text);
}

/* ==========================================================
   Labels
   ========================================================== */
:is(#formEditMember, .member-form) .control-label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pe-muted);
    line-height: 1.2;
}

/* ==========================================================
   Inputs & selects (editable)
   ========================================================== */
:is(#formEditMember, .member-form) .form-control {
    height: 42px;
    padding: .5rem .85rem;
    font-size: .9rem;
    color: var(--pe-text);
    background-color: var(--pe-surface);
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

    :is(#formEditMember, .member-form) .form-control::placeholder {
        color: #9aa4b2;
    }

    :is(#formEditMember, .member-form) .form-control:hover:not([readonly]):not(:disabled) {
        border-color: #b4bdcc;
    }

    :is(#formEditMember, .member-form) .form-control:focus {
        outline: 0;
        border-color: var(--pe-accent);
        box-shadow: 0 0 0 4px var(--pe-accent-ring);
    }

:is(#formEditMember, .member-form) select.form-control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 14px;
}

/* ==========================================================
   Read-only / disabled fields
   ========================================================== */
:is(#formEditMember, .member-form) .form-control[readonly],
:is(#formEditMember, .member-form) .form-control:disabled {
    background-color: var(--pe-surface-alt);
    border-color: var(--pe-border-soft);
    color: #475467;
    font-weight: 500;
    cursor: default;
    opacity: 1;
    box-shadow: none;
}

:is(#formEditMember, .member-form) select.form-control:disabled {
    background-image: none;
    padding-right: .85rem;
}

/* ==========================================================
   Select2 (inside the form)
   ========================================================== */
:is(#formEditMember, .member-form) .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--pe-border);
    border-radius: var(--pe-radius);
    background-color: var(--pe-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    :is(#formEditMember, .member-form) .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px;
        padding-left: .85rem;
        padding-right: 2rem;
        font-size: .9rem;
        color: var(--pe-text);
    }

    :is(#formEditMember, .member-form) .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px;
        right: .5rem;
    }

:is(#formEditMember, .member-form) .select2-container--default.select2-container--focus .select2-selection--single,
:is(#formEditMember, .member-form) .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pe-accent);
    box-shadow: 0 0 0 4px var(--pe-accent-ring);
}

/* ==========================================================
   Profile photo
   ========================================================== */
:is(#formEditMember, .member-form) .profile-layout {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
}

:is(#formEditMember, .member-form) .profile-photo-col {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    width: 156px;
}

:is(#formEditMember, .member-form) .profile-fields-col {
    flex: 1 1 auto;
    min-width: 0;
}

:is(#formEditMember, .member-form) .profile-photo {
    position: relative;
    width: 148px;
    height: 148px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e5e9f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%23e5e9f0'/%3E%3Ccircle cx='60' cy='46' r='20' fill='%23aab4c3'/%3E%3Cpath d='M20 120c0-26 18-42 40-42s40 16 40 42z' fill='%23aab4c3'/%3E%3C/svg%3E");
    background-size: cover;
    border: 3px solid var(--pe-surface);
    box-shadow: 0 0 0 1px var(--pe-border), 0 6px 16px rgba(16, 24, 40, 0.10);
}

    :is(#formEditMember, .member-form) .profile-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

        :is(#formEditMember, .member-form) .profile-photo img:not([src]),
        :is(#formEditMember, .member-form) .profile-photo img[src=""] {
            visibility: hidden;
        }

/* Overlay button – appears only on hover / keyboard focus */
:is(#formEditMember, .member-form) .profile-photo-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: 0;
    border: 0;
    background: rgba(17, 24, 39, 0.58);
    color: #fff;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s ease;
}

    :is(#formEditMember, .member-form) .profile-photo:hover .profile-photo-overlay,
    :is(#formEditMember, .member-form) .profile-photo-overlay:focus-visible {
        opacity: 1;
    }

    :is(#formEditMember, .member-form) .profile-photo-overlay:focus-visible {
        outline: 3px solid var(--pe-accent);
        outline-offset: -3px;
    }

    :is(#formEditMember, .member-form) .profile-photo-overlay svg {
        width: 22px;
        height: 22px;
    }

:is(#formEditMember, .member-form) .profile-photo-caption {
    font-size: .78rem;
    color: var(--pe-muted);
    text-align: center;
}

/* Touch screens have no hover: keep a small bar visible at the bottom */
@media (hover: none) {
    :is(#formEditMember, .member-form) .profile-photo-overlay {
        inset: auto 0 0 0;
        height: 34%;
        opacity: 1;
        background: rgba(17, 24, 39, 0.62);
        flex-direction: row;
    }
}

@media (max-width: 767.98px) {
    :is(#formEditMember, .member-form) .profile-layout {
        flex-direction: column;
        align-items: center;
    }

    :is(#formEditMember, .member-form) .profile-fields-col {
        width: 100%;
    }
}

/* ==========================================================
   Spouse lists
   ========================================================== */
:is(#formEditMember, .member-form) #currentSpouses,
:is(#formEditMember, .member-form) #availableSpouses {
    border: 1px solid var(--pe-border-soft);
    border-radius: 12px;
    padding: 0;
    margin-top: .6rem;
    background: var(--pe-surface);
}

:is(#formEditMember, .member-form) .spouse-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .65rem 1rem;
    background: var(--pe-surface-alt);
    border-bottom: 1px solid var(--pe-border-soft);
    font-size: .8rem;
    font-weight: 600;
    color: var(--pe-muted);
}

#formEditMember .spouse-header > div {
    padding-left: .25rem;
}

:is(#formEditMember, .member-form) .list-group {
    border-radius: 0;
}

:is(#formEditMember, .member-form) .list-group-item {
    border-left: 0;
    border-right: 0;
    border-color: var(--pe-border-soft);
    border-radius: 0;
    font-size: .875rem;
    color: var(--pe-text);
}

    :is(#formEditMember, .member-form) .list-group-item > div {
        padding-left: .25rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

:is(#formEditMember, .member-form) label.list-group-item {
    cursor: pointer;
}

    :is(#formEditMember, .member-form) label.list-group-item:hover {
        background-color: #eef4ff !important;
    }

:is(#formEditMember, .member-form) .form-check-input:checked {
    background-color: var(--pe-accent);
    border-color: var(--pe-accent);
}

:is(#formEditMember, .member-form) .form-check-input:focus {
    border-color: var(--pe-accent);
    box-shadow: 0 0 0 4px var(--pe-accent-ring);
}

/* ==========================================================
   Drawers (content styling only; show/hide stays with script)
   ========================================================== */
:is(#formEditMember, .member-form) .drawer-content h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

:is(#formEditMember, .member-form) .drawer-content > div + div {
    margin-top: .85rem;
}

:is(#formEditMember, .member-form) #searchResults {
    font-size: .85rem;
}

/* ==========================================================
   Buttons
   (.btn-sm sizing lives in the original .btn-sm rule above)
   ========================================================== */
:is(#formEditMember, .member-form) .btn {
    border-radius: var(--pe-radius);
    font-weight: 500;
    transition: box-shadow .15s ease, transform .05s ease;
}

    :is(#formEditMember, .member-form) .btn:not(.btn-sm) {
        padding: .55rem 1.25rem;
    }

    :is(#formEditMember, .member-form) .btn:focus-visible {
        box-shadow: 0 0 0 4px var(--pe-accent-ring);
    }

    :is(#formEditMember, .member-form) .btn:disabled {
        opacity: .5;
    }

:is(#formEditMember, .member-form) .form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .6rem;
    margin-top: 1.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--pe-border-soft);
}

:is(#formEditMember, .member-form) .captcha-row {
    padding: .25rem 0;
}