/* Unified participant card: read/edit modes */
#mfPersonCardModal .mf-modal__backdrop {
    background: rgba(0, 0, 0, .82) !important;
}

#mfPersonCardModal .mf-personcard-modal {
    position: relative !important;
    width: min(900px, calc(100vw - 24px)) !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 12px auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #2f3742 !important;
    color: #f0f3f6 !important;
    border: 1px solid #4a5563 !important;
    border-radius: 10px !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .72) !important;
    overflow: hidden !important;
}

#mfPersonCardModal .mf-personcard-head,
#mfPersonCardModal .mf-personcard-footer {
    flex: 0 0 auto !important;
    background: #2f3742 !important;
    border-color: #4a5563 !important;
}

#mfPersonCardModal .mf-personcard-head {
    min-height: 50px;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #4a5563 !important;
}

#mfPersonCardModal .mf-modal__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #f0f3f6 !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

#mfPersonCardModal .mf-modal__x {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #d8dee7;
    font-size: 30px;
    line-height: 28px;
    padding: 0;
    cursor: pointer;
}

#mfPersonCardModal .mf-personcard-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 12px 14px !important;
    background: #2f3742 !important;
}

#mfPersonCardModal .mf-personcard-grid {
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

/* Width containment: no control may create a horizontal modal scrollbar. */
#mfPersonCardModal #mfPersonCardForm,
#mfPersonCardModal .mf-personcard-content,
#mfPersonCardModal .mf-personcard-grid,
#mfPersonCardModal .mf-personcard-data-col,
#mfPersonCardModal .mf-personcard-table,
#mfPersonCardModal .mf-personcard-table tbody,
#mfPersonCardModal .mf-personcard-table tr,
#mfPersonCardModal .mf-personcard-table td {
    min-width: 0;
    max-width: 100%;
}

#mfPersonCardModal .mf-personcard-table td > *,
#mfPersonCardModal .mf-personcard-row-wide td > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}


#mfPersonCardModal .mf-personcard-photo-col {
    width: 185px;
    min-width: 185px;
}

#mfPersonCardModal .mf-personcard-photo-box {
    width: 185px;
    min-height: 185px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #697584;
    border-radius: 9px;
    background: #242b34;
}

#mfPersonCardModal #mfPersonCardPhoto {
    display: block;
    width: 100%;
    height: auto;
    max-height: 255px;
    object-fit: cover;
}

#mfPersonCardModal .mf-personcard-photo-empty {
    min-height: 185px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aeb7c2;
    text-align: center;
    padding: 12px;
}

#mfPersonCardModal .mf-personcard-photo-editor {
    margin-top: 8px;
    display: grid;
    gap: 7px;
}

#mfPersonCardModal .mf-personcard-media-field joomla-field-media,
#mfPersonCardModal .mf-personcard-media-field .field-media-wrapper,
#mfPersonCardModal .mf-personcard-media-field .input-group {
    width: 100%;
}

#mfPersonCardModal .mf-personcard-media-field input {
    min-width: 0;
}

/* Шлях до файлу є внутрішнім технічним значенням.
   Поле залишається в DOM для Joomla Media Manager, але користувачу не показується. */
#mfPersonCardModal .mf-personcard-media-field .field-media-input,
#mfPersonCardModal .mf-personcard-media-field input[name="mfperson[image]"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#mfPersonCardModal .mf-personcard-media-field .button-select,
#mfPersonCardModal .mf-personcard-media-field [data-button-select] {
    width: 100%;
    flex: 1 1 auto;
}

/* Joomla media field must act only as a path + chooser control.
   The card already has the single canonical photo preview above it. */
#mfPersonCardModal .mf-personcard-media-field .field-media-preview,
#mfPersonCardModal .mf-personcard-media-field .field-media-preview-icon,
#mfPersonCardModal .mf-personcard-media-field [class*="field-media-preview"],
#mfPersonCardModal .mf-personcard-media-field .media-preview,
#mfPersonCardModal .mf-personcard-media-field .media-preview-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#mfPersonCardModal .mf-personcard-media-field .button-clear,
#mfPersonCardModal .mf-personcard-media-field [data-button-clear] {
    display: none !important;
}

#mfPersonCardModal .mf-personcard-media-field joomla-field-media,
#mfPersonCardModal .mf-personcard-media-field .field-media-wrapper {
    display: block !important;
}

#mfPersonCardModal .mf-personcard-data-col {
    min-width: 0;
}

#mfPersonCardModal .mf-personcard-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #343d48;
}

#mfPersonCardModal .mf-personcard-table th,
#mfPersonCardModal .mf-personcard-table td {
    border-bottom: 0;
    padding: 3px 6px;
    vertical-align: middle;
}

#mfPersonCardModal .mf-personcard-table th {
    width: 215px;
    color: #f3f5f7;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

#mfPersonCardModal .mf-personcard-table td {
    color: #f3f5f7;
    word-break: break-word;
}

#mfPersonCardModal .mf-personcard-row-wide td > .mf-personcard-control,
#mfPersonCardModal .mf-personcard-row-wide td > .mf-personcard-department-picker,
#mfPersonCardModal .mf-personcard-row-wide .mnzl-department-picker,
#mfPersonCardModal .mf-personcard-row-wide .mnzl-department-trigger {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

#mfPersonCardModal .mf-personcard-status-flags {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 30px;
    flex-wrap: wrap;
}

#mfPersonCardModal .mf-personcard-control {
    min-height: 30px;
    background: #18202a;
    border-color: #697584;
    color: #f3f5f7;
}

#mfPersonCardModal .mf-personcard-control:focus {
    background: #18202a;
    color: #fff;
    border-color: #6ea8fe;
    box-shadow: 0 0 0 .15rem rgba(110, 168, 254, .2);
}

#mfPersonCardModal select.mf-personcard-control option {
    color: #111;
    background: #fff;
}

#mfPersonCardModal .mf-personcard-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#mfPersonCardModal .mf-personcard-inline > .mf-personcard-control,
#mfPersonCardModal .mf-personcard-inline > .mf-personcard-department-picker {
    flex: 1 1 auto;
    min-width: 0;
}

#mfPersonCardModal .mf-personcard-department-picker {
    position: relative;
    z-index: 12;
}

#mfPersonCardModal .mf-personcard-flag {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    white-space: nowrap;
    color: #e4e8ed;
    font-size: 13px;
    cursor: pointer;
}

#mfPersonCardModal .mf-personcard-flag input {
    margin: 0;
}


#mfPersonCardModal .mf-personcard-static-text {
    min-height: 20px;
    color: #f3f5f7;
    line-height: 1.35;
}

#mfPersonCardModal .mf-personcard-read-text {
    display: none;
    min-height: 20px;
    padding: 1px 0;
    color: #f3f5f7;
    line-height: 1.35;
}

#mfPersonCardModal.is-readonly .mf-personcard-edit-only,
#mfPersonCardModal.is-readonly #mfPersonCardLeaderCategoryWrap,
#mfPersonCardModal.is-readonly #mfPersonCardHasTelegramWrap,
#mfPersonCardModal.is-readonly .mf-personcard-photo-editor {
    display: none !important;
}

#mfPersonCardModal.is-readonly .mf-personcard-control {
    min-height: 24px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: #f3f5f7 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    resize: none;
    pointer-events: none;
    -webkit-text-fill-color: #f3f5f7;
}

#mfPersonCardModal.is-readonly select.mf-personcard-control {
    appearance: none;
    -webkit-appearance: none;
}

#mfPersonCardModal.is-readonly input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}

#mfPersonCardModal.is-readonly .mf-personcard-read-text,
#mfPersonCardModal.is-editable .mf-personcard-read-text {
    display: none !important;
}

#mfPersonCardModal .mf-personcard-lists-section,
#mfPersonCardModal .mf-personcard-notes-section {
    margin-top: 12px;
}

#mfPersonCardModal .mf-personcard-section-title {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #dce3eb;
}

#mfPersonCardModal .mf-personcard-lists {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

#mfPersonCardModal .mf-person-list-chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #6b7582;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f3f5;
    color: #1f2328;
}

#mfPersonCardModal .mf-person-list-title,
#mfPersonCardModal .mf-person-list-star {
    border: 0;
    background: transparent;
    color: inherit;
    min-height: 28px;
}

#mfPersonCardModal .mf-person-list-title {
    padding: 3px 9px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

#mfPersonCardModal .mf-person-list-star {
    width: 30px;
    padding: 1px 6px;
    border-right: 1px solid rgba(31, 35, 40, .2);
    font-size: 17px;
    line-height: 1;
}

#mfPersonCardModal .mf-person-list-star.is-leader {
    color: #b78103;
}

#mfPersonCardModal .mf-person-list-star.can-edit {
    cursor: pointer;
}

#mfPersonCardModal .mf-person-list-star:not(.can-edit) {
    cursor: default;
    opacity: .8;
}

#mfPersonCardModal .mf-personcard-hint,
#mfPersonCardModal .mf-personcard-status {
    color: #b7c0cb;
    font-size: 12px;
}

#mfPersonCardModal .mf-personcard-hint {
    margin-top: 5px;
}

#mfPersonCardModal .mf-required-mark {
    color: #ff5c5c;
    font-weight: 700;
}

#mfPersonCardModal .mf-personcard-status.text-danger {
    color: #ff5c5c !important;
    font-weight: 600;
}

#mfPersonCardModal .mf-personcard-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px !important;
    border-top: 1px solid #4a5563 !important;
}

#mfPersonCardModal .mf-personcard-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

#mfPersonCardModal .mf-personcard-loading {
    padding: 20px;
    text-align: center;
    color: #c7d0da;
}

#mfPersonCardModal.is-loading .mf-personcard-content {
    opacity: .45;
    pointer-events: none;
}

#mfPersonCardModal .mf-personcard-telegram .mf-personcard-control {
    max-width: 330px;
}

@media (max-width: 760px) {
    #mfPersonCardModal .mf-personcard-modal {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
    }

    #mfPersonCardModal .mf-personcard-grid {
        grid-template-columns: 1fr;
    }

    #mfPersonCardModal .mf-personcard-photo-col,
    #mfPersonCardModal .mf-personcard-photo-box {
        width: min(220px, 100%);
        min-width: 0;
    }

    #mfPersonCardModal .mf-personcard-table th {
        width: 145px;
    }

    #mfPersonCardModal .mf-personcard-inline {
        align-items: flex-start;
        flex-direction: column;
    }
}

#mfPersonCardModal.is-readonly .mf-personcard-department-picker {
    display: none !important;
}

#mfPersonCardModal.is-readonly #mfPersonCard_category_text {
    display: block !important;
}

#mfPersonCardModal.is-editable .mf-personcard-department-picker {
    display: block !important;
}

#mfPersonCardModal.is-editable #mfPersonCard_category_text {
    display: none !important;
}


/* Joomla Media Manager must be above the custom MF modal (z-index: 9999).
   Scope the override to the time when an MF modal is open. */
body.mf-modal-open .modal.joomla-modal,
body.mf-modal-open .modal[id^="imageModal_"],
body.mf-modal-open .joomla-modal.show,
html.mf-modal-open .modal.joomla-modal,
html.mf-modal-open .modal[id^="imageModal_"] {
    z-index: 12050 !important;
}

body.mf-modal-open > .modal-backdrop,
body.mf-modal-open .modal-backdrop.show,
html.mf-modal-open ~ body > .modal-backdrop {
    z-index: 12040 !important;
}

/* 1.0.77: дерево підрозділів доступне також у картці перегляду.
   Воно працює як навігаційне дерево без зміни вибраного підрозділу. */
#mfPersonCardModal.is-readonly .mf-personcard-department-picker {
    display: block !important;
}

#mfPersonCardModal.is-readonly #mfPersonCard_category_text,
#mfPersonCardModal.is-editable #mfPersonCard_category_text {
    display: none !important;
}

/* Повний шлях підрозділу показується без обрізання трикрапкою. */
#mfPersonCardModal .mnzl-department-trigger {
    height: auto;
    align-items: flex-start;
}

#mfPersonCardModal .mnzl-department-trigger__text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
    line-height: 1.35;
}