/**
 * Name Autocomplete — three-state styles
 *  - Inline hint (no match)
 *  - Amber chip + expandable panel (weak match)
 *  - Modal with rich candidate cards + owner block + mini-tree (strong match)
 */

/* ───────── wrapper ───────── */
.name-autocomplete-wrapper {
    position: relative;
    width: 100%;
}

/* ───────── inline hint (no-match) ───────── */
.name-autocomplete-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 0;
    display: none;
}
.name-autocomplete-hint.hint-ok   { color: #0F6E56; }
.name-autocomplete-hint.hint-warn { color: #BA7517; }
.name-autocomplete-hint.hint-ok::before   { content: '✓ '; font-weight: 700; }
.name-autocomplete-hint.hint-warn::before { content: '⚠ '; font-weight: 700; }

/* ───────── chip: shared layout, color varies by match strength ───────── */
.name-autocomplete-chip {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    border: 0.5px solid;
}
.name-autocomplete-chip .chip-dot {
    width: 7px; height: 7px; border-radius: 50%;
}
.name-autocomplete-chip .chip-btn {
    background: transparent;
    border: 0.5px solid;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.name-autocomplete-chip .chip-btn:hover { background: #fff; }
.name-autocomplete-chip .chip-close {
    background: transparent; border: none; cursor: pointer;
    font-size: 15px; line-height: 1;
    padding: 0 4px;
}

/* Amber — weak (sound-alike) matches */
.name-autocomplete-chip.chip-weak,
.name-autocomplete-chip:not(.chip-strong):not(.chip-weak) {
    background: #FAEEDA;
    color: #633806;
    border-color: #EFC785;
}
.name-autocomplete-chip.chip-weak .chip-dot                      { background: #BA7517; }
.name-autocomplete-chip.chip-weak .chip-btn                      { border-color: #BA7517; color: #633806; }
.name-autocomplete-chip.chip-weak .chip-close                    { color: #633806; }

/* Green — strong matches (high confidence; this is the new opt-in chip) */
.name-autocomplete-chip.chip-strong {
    background: #E1F5EE;
    color: #085041;
    border-color: #9FE1CB;
}
.name-autocomplete-chip.chip-strong .chip-dot   { background: #0F6E56; }
.name-autocomplete-chip.chip-strong .chip-btn   { border-color: #0F6E56; color: #085041; }
.name-autocomplete-chip.chip-strong .chip-close { color: #085041; }

/* ───────── inline weak-match panel ───────── */
.name-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: 4px;
    background: #fff;
    border: 0.5px solid #d1d5db;
    border-radius: 10px;
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.18);
    overflow: hidden;
    max-height: 520px;
    overflow-y: auto;
}
.ac-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #FDF6E9;
    border-bottom: 0.5px solid #EFC785;
    font-size: 12px;
    color: #633806;
}
.ac-panel-close {
    background: transparent; border: none; cursor: pointer;
    color: #633806; font-size: 16px; line-height: 1;
}
.ac-panel-foot {
    padding: 10px 14px;
    text-align: center;
    background: #F9FAFB;
    border-top: 0.5px solid #E5E7EB;
    font-size: 12px;
    color: #185FA5;
    cursor: pointer;
}
.ac-panel-foot:hover { background: #EFF6FF; }

/* ───────── candidate row ───────── */
.autocomplete-item {
    padding: 12px 14px;
    border-bottom: 0.5px solid #F3F4F6;
    background: #fff;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item.selected,
.autocomplete-item:hover { background: #F9FAFB; }

.ac-row-main {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: start;
}
.ac-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #F3F4F6;
}
.ac-avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    color: #0C447C; background: #E6F1FB;
    font-size: 14px; font-weight: 600;
}
.ac-row-text { min-width: 0; }
.ac-row-title {
    font-size: 14px; color: #111827; margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ac-row-title strong { font-weight: 600; }
.ac-line  { font-size: 12px; color: #4B5563; line-height: 1.5; }
.ac-meta  { color: #6B7280; }
.ac-pl    { color: #4B5563; font-weight: 500; }

.ac-row-actions {
    display: flex; flex-direction: column; gap: 6px;
    align-items: stretch;
}

/* badges */
.ac-badge {
    display: inline-block;
    font-size: 10px; font-weight: 600;
    padding: 2px 8px; border-radius: 999px;
    text-transform: none;
}
.ac-badge-strong { background: #E1F5EE; color: #085041; }
.ac-badge-weak   { background: #FAEEDA; color: #633806; }

/* buttons */
.ac-btn {
    cursor: pointer;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 0.5px solid #D1D5DB;
    background: #fff;
    color: #111827;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.ac-btn:hover    { background: #F3F4F6; }
.ac-btn-sm       { padding: 4px 8px; font-size: 11px; }
.ac-btn-primary  { background: #185FA5; color: #fff; border-color: #185FA5; }
.ac-btn-primary:hover { background: #134f8a; }
.ac-btn-ghost    { background: transparent; }

/* ───────── owner block ───────── */
.ac-owner {
    margin-top: 10px;
    padding: 10px 12px;
    background: #F9FAFB;
    border-left: 2px solid #185FA5;
    border-radius: 0 6px 6px 0;
}
.ac-owner-empty {
    color: #6B7280;
    font-size: 12px;
    border-left-color: #D1D5DB;
}
.ac-owner-label {
    font-size: 10px;
    font-weight: 600;
    color: #185FA5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}
.ac-owner-body {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
}
.ac-owner-photo {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; background: #E5E7EB;
}
.ac-owner-text { font-size: 12px; color: #111827; min-width: 0; }
.ac-owner-text > div:first-child { margin-bottom: 2px; }

/* ───────── inline mini-tree mount ───────── */
.ac-tree-mount {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 0.5px solid #E5E7EB;
    border-radius: 8px;
}
.ac-tree-loading { padding: 16px; text-align: center; color: #6B7280; font-size: 12px; }
.ac-tree-error   { padding: 12px; color: #B91C1C; font-size: 12px; background: #FEE2E2; border-radius: 6px; }
.mini-tree-container { display: flex; justify-content: center; }
.mini-tree-svg { max-width: 100%; height: auto; }

/* Fallback HTML mini-tree */
.mini-family-tree { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.mft-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.mft-row.mft-center .mft-self { background: #E6F1FB; border-color: #185FA5; }
.mft-cell {
    background: #F9FAFB;
    border: 0.5px solid #D1D5DB;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    min-width: 110px;
    text-align: center;
}
.mft-cell-label { display: block; color: #6B7280; font-size: 10px; text-transform: uppercase; }
.mft-empty { color: #9CA3AF; font-style: italic; background: transparent; border-style: dashed; }
.mft-child { background: #fff; }

/* ───────── strong-match modal ───────── */
.ac-modal-shell {
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, 0.55);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ac-modal {
    position: relative;
    background: #fff;
    border-radius: 12px;
    max-width: 640px; width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 24px 64px -16px rgba(0,0,0,0.4);
}
.ac-modal-close {
    position: absolute; top: 12px; right: 14px;
    background: transparent; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: #6B7280;
}
.ac-modal-head {
    padding: 22px 24px 12px;
    border-bottom: 0.5px solid #E5E7EB;
}
.ac-modal-head h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}
.ac-modal-head p {
    margin: 0;
    font-size: 13px;
    color: #4B5563;
    line-height: 1.6;
}
.ac-modal-body { padding: 4px 16px 16px; }

/* ───────── tabular candidate list inside modal ───────── */
.ac-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 8px;
}
.ac-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6B7280;
    padding: 10px 8px;
    border-bottom: 0.5px solid #E5E7EB;
    background: #F9FAFB;
}
.ac-th-num { width: 36px; text-align: center; }
.ac-th-act { width: 92px; text-align: right; }

.ac-trow.ac-trow-main > td {
    padding: 14px 8px;
    border-top: 0.5px solid #F3F4F6;
    border-bottom: 0.5px solid #F3F4F6;
    vertical-align: top;
}
.ac-trow.ac-trow-main:first-child > td { border-top: none; }
.ac-trow.ac-trow-main:last-child  > td { border-bottom: none; }
.ac-tcell-num   { text-align: center; color: #6B7280; font-weight: 600; padding-top: 18px !important; }
.ac-tcell-match { min-width: 220px; }
.ac-tcell-owner { width: 30%; }
.ac-tcell-act   { text-align: right; white-space: nowrap; padding-top: 18px !important; }

/* In-cell action buttons (View family / View their family) */
.ac-cell-actions {
    margin-top: 8px;
    /* Buttons inherit ac-btn styling; align left so they sit under the data */
}
.ac-cell-actions .ac-btn { padding: 4px 10px; font-size: 11px; }

/* Inline tree mount, scoped to each cell so it expands the row vertically */
.ac-tcell-match .ac-tree-mount,
.ac-tcell-owner .ac-tree-mount {
    margin-top: 10px;
    max-width: 100%;
    overflow-x: auto;
}

/* Clickable mini-tree — hover affordance + zoom hint */
.ac-mini-tree-clickable {
    position: relative;
    cursor: zoom-in;
    border: 0.5px solid #E5E7EB;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ac-mini-tree-clickable:hover {
    border-color: #185FA5;
    box-shadow: 0 4px 16px -4px rgba(24, 95, 165, 0.25);
}
.ac-mini-tree-zoom {
    position: absolute;
    top: 6px; right: 8px;
    font-size: 10px;
    color: #6B7280;
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 8px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.ac-mini-tree-clickable:hover .ac-mini-tree-zoom {
    opacity: 1;
}

/* ───────── large-tree modal (opens on mini-tree click) ───────── */
.ac-lt-shell {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.72);
    z-index: 1000050; /* above the strong-match modal (999999) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.ac-lt-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 1100px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.ac-lt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 0.5px solid #E5E7EB;
    background: #F9FAFB;
}
.ac-lt-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}
.ac-lt-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #6B7280;
}
.ac-lt-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 20px;
    background: #fff;
}
.ac-lt-body .mft-tree-container,
.ac-lt-body .mini-tree-container {
    width: 100%;
}
.ac-lt-body .mft-tree-svg,
.ac-lt-body .mini-tree-svg {
    width: 100%;
    height: auto;
    min-height: 380px;
}

@media (max-width: 720px) {
    .ac-lt-shell { padding: 8px; }
    .ac-lt-head { padding: 12px 14px; }
    .ac-lt-body { padding: 12px; }
}

/* Match cell — photo + text */
.ac-cell-match {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    align-items: start;
}
.ac-cell-match .ac-avatar {
    width: 40px; height: 40px;
}
.ac-cell-text { min-width: 0; }
.ac-cell-text .ac-row-title {
    font-size: 14px; color: #111827;
    margin-bottom: 3px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

/* Owner cell — slimmer than the match cell */
.ac-cell-owner {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #374151;
}
.ac-cell-owner .ac-owner-photo {
    width: 32px; height: 32px;
}
.ac-cell-owner.ac-owner-empty {
    grid-template-columns: 1fr;
    color: #9CA3AF; font-style: italic;
}
.ac-cell-owner .ac-meta {
    color: #6B7280; font-size: 11px;
}

/* Mobile — collapse to stacked rows */
@media (max-width: 640px) {
    .ac-table, .ac-table thead, .ac-table tbody,
    .ac-table tr, .ac-table th, .ac-table td {
        display: block;
    }
    .ac-table thead { display: none; }
    .ac-trow.ac-trow-main > td {
        padding: 6px 4px;
        border: none;
    }
    .ac-tcell-num   { display: none; }
    .ac-tcell-act   { text-align: left; }
    .ac-cell-owner  { grid-template-columns: 28px 1fr; }
}
.ac-modal-foot {
    padding: 14px 24px;
    border-top: 0.5px solid #E5E7EB;
    background: #F9FAFB;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.ac-modal-foot .ac-btn { white-space: nowrap; }

/* ───────── confirmation dialog ───────── */
.ac-confirm-overlay {
    position: fixed; inset: 0;
    background: rgba(17, 24, 39, 0.5);
    z-index: 1000000;
    display: flex; align-items: center; justify-content: center;
}
.ac-confirm-dialog {
    background: #fff;
    border-radius: 10px;
    padding: 22px 24px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 18px 48px -12px rgba(0,0,0,0.35);
}
.ac-confirm-dialog h3 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
}
.ac-confirm-dialog p {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}
.ac-confirm-actions {
    display: flex; gap: 10px; justify-content: flex-end;
}

/* Selected-existing state on the name input */
.existing-member-selected {
    background: #F0FDF4 !important;
    border-color: #16A34A !important;
}

/* Mobile tweaks */
@media (max-width: 540px) {
    .ac-row-main { grid-template-columns: 36px 1fr; }
    .ac-row-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        margin-top: 8px;
    }
    .ac-avatar { width: 36px; height: 36px; }
    .ac-owner-body { grid-template-columns: 28px 1fr; }
    .ac-owner-photo { width: 28px; height: 28px; }
    .ac-owner-body > .ac-btn { grid-column: 1 / -1; margin-top: 6px; }
}