/**
 * Profile page — mobile UX (≤768px)
 */

.profile-page .main-content {
    padding-top: calc(var(--m-header-h) + env(safe-area-inset-top, 0px) + var(--m-space-md)) !important;
    padding-left: var(--m-content-pad) !important;
    padding-right: var(--m-content-pad) !important;
    padding-bottom: calc(var(--m-space-2xl) + var(--m-safe-bottom)) !important;
    max-width: 100% !important;
}

body.has-email-verification-banner .profile-page .main-content {
    padding-top: calc(var(--m-header-h) + 48px + env(safe-area-inset-top, 0px) + var(--m-space-md)) !important;
}

.profile-page .content-header {
    margin-bottom: var(--m-space-md) !important;
}

.profile-content {
    max-width: 100% !important;
    gap: var(--m-space-lg) !important;
}

/* ——— Tabs: равная сетка (2 или 3 колонки) ——— */
.profile-main-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: var(--m-space-md) !important;
    padding: 6px !important;
    border: 1px solid var(--tg-border-light) !important;
    border-radius: var(--m-radius-md) !important;
    background: var(--tg-bg-input) !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

/* Третья вкладка «Команда» для руководителя */
.profile-main-tabs:has(#profile-team-tab:not([style*="display: none"])),
.profile-main-tabs:has(#profile-team-tab.profile-main-tab--visible) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.profile-main-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    padding: 8px 6px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    border-radius: calc(var(--m-radius-md) - 4px) !important;
    border: none !important;
    background: transparent !important;
    color: var(--tg-text-secondary) !important;
    box-shadow: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    hyphens: auto;
    box-sizing: border-box !important;
}

.profile-main-tabs:has(#profile-team-tab:not([style*="display: none"])) .profile-main-tab,
.profile-main-tabs:has(#profile-team-tab.profile-main-tab--visible) .profile-main-tab {
    font-size: 12px !important;
    padding: 8px 4px !important;
}

.profile-main-tab--active {
    background: var(--tg-bg-card) !important;
    color: var(--tg-accent) !important;
    box-shadow: var(--m-shadow-card) !important;
}

#profile-team-tab[style*="display: none"] {
    display: none !important;
}

/* ——— Layout: photo + sections ——— */
.profile-top-section.profile-panel--active {
    flex-direction: column !important;
    gap: var(--m-space-md) !important;
    align-items: stretch !important;
}

.photo-section {
    width: 100% !important;
}

.photo-card {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: var(--m-radius-lg) !important;
    padding: var(--m-space-lg) !important;
    border: 1px solid var(--tg-border-light) !important;
    box-shadow: var(--m-shadow-card) !important;
    align-items: center !important;
}

.profile-photo {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto var(--m-space-sm) !important;
}

.photo-card .btn-change-photo,
.photo-card .btn-delete-photo {
    min-height: var(--m-touch-min) !important;
    font-size: var(--m-font-meta) !important;
    border-radius: var(--m-radius-sm) !important;
}

.personal-section {
    width: 100% !important;
    min-width: 0 !important;
}

/* ——— Cards ——— */
.profile-page .section-card {
    border-radius: var(--m-radius-lg) !important;
    padding: var(--m-space-lg) !important;
    border: 1px solid var(--tg-border-light) !important;
    box-shadow: var(--m-shadow-card) !important;
    margin-bottom: var(--m-space-md) !important;
    overflow: visible !important;
}

.profile-page .section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--tg-text-primary) !important;
}

/* ——— Section header: title + edit on one row ——— */
.profile-page .section-header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--m-space-sm) var(--m-space-md) !important;
    margin-bottom: var(--m-space-md) !important;
}

.profile-page .section-header .section-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}

.profile-page .section-header-actions {
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
}

.profile-page .section-header > .btn-edit-profile {
    flex: 0 0 auto;
    margin-left: auto;
}

.profile-page .btn-edit-profile {
    min-height: 40px !important;
    height: auto !important;
    padding: 8px 16px !important;
    font-size: var(--m-font-meta) !important;
    font-weight: 600 !important;
    border-radius: var(--m-radius-sm) !important;
}

/* Save / Cancel — full width row under title */
.profile-page .edit-actions {
    flex-direction: row !important;
    gap: var(--m-space-sm) !important;
    width: 100% !important;
    margin: 0 0 var(--m-space-md) !important;
}

/* В режиме редактирования скрываем «Редактировать» */
.section-card:has(.edit-actions[style*="display: flex"]) .btn-edit-profile,
.section-card:has(.edit-actions[style*="display:flex"]) .btn-edit-profile {
    display: none !important;
}

.profile-page .edit-actions .btn-save,
.profile-page .edit-actions .btn-cancel {
    flex: 1 1 0 !important;
    min-height: var(--m-touch-min) !important;
    height: auto !important;
    padding: 12px 16px !important;
    font-size: var(--m-font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--m-radius-sm) !important;
}

/* ——— Personal fields ——— */
.personal-fields-layout {
    gap: var(--m-space-lg) !important;
}

.fields-grid,
.fields-grid--main,
.fields-grid--contacts {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.profile-page .field-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: var(--m-space-md) 0 !important;
    border-bottom: 1px solid var(--tg-border-light);
}

.profile-page .field-row:last-child {
    border-bottom: none;
}

.profile-page .field-label {
    min-width: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--tg-text-secondary) !important;
}

.profile-page .field-value {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--tg-text-primary) !important;
    width: 100% !important;
    min-height: 22px;
}

.profile-page .field-input,
.profile-page .field-input.active {
    display: none;
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
    height: auto !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: var(--m-radius-sm) !important;
    border: 1px solid var(--tg-border) !important;
    box-sizing: border-box;
}

.profile-page .field-input.active,
.profile-page .field-input-wrap.active .field-input {
    display: block !important;
}

.profile-page .field-value.editable {
    display: none !important;
}

.profile-page .field-input-wrap {
    width: 100% !important;
    min-width: 0 !important;
}

.profile-page .field-input-wrap.active {
    display: flex !important;
}

.personal-contacts-section {
    padding-top: var(--m-space-md) !important;
    margin-top: var(--m-space-xs) !important;
    border-top: 1px solid var(--tg-border-light) !important;
}

.personal-contacts-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-bottom: var(--m-space-sm) !important;
    color: var(--tg-text-primary) !important;
}

/* ——— Account block ——— */
.account-section-card {
    margin-top: 0 !important;
}

.account-security-actions__title {
    font-size: 16px !important;
    margin-bottom: var(--m-space-md) !important;
}

.account-security-actions__buttons {
    flex-direction: column !important;
    gap: var(--m-space-sm) !important;
}

.account-security-actions__buttons .btn-header-secondary,
.account-security-actions__buttons .btn-header-danger {
    width: 100% !important;
    flex: none !important;
    min-height: var(--m-touch-min) !important;
    height: auto !important;
    padding: 12px 16px !important;
    font-size: var(--m-font-body) !important;
    border-radius: var(--m-radius-sm) !important;
    justify-content: center !important;
}

/* ——— Company tab ——— */
.company-section .section-card,
.team-section .section-card {
    padding: var(--m-space-lg) !important;
}

.company-subtitle {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: var(--m-space-md) 0 var(--m-space-sm) !important;
}

.company-fields {
    grid-template-columns: 1fr !important;
    gap: var(--m-space-sm) !important;
    padding: var(--m-space-md) !important;
    border-radius: var(--m-radius-md) !important;
    background: var(--tg-bg-input) !important;
}

.company-section-heading {
    font-size: 15px !important;
    margin-top: var(--m-space-md) !important;
    padding-top: var(--m-space-md) !important;
}

.company-fields .field-row {
    padding: var(--m-space-md) !important;
    border-radius: var(--m-radius-sm) !important;
}

.company-fields .field-row--agent-pct {
    padding: var(--m-space-md) var(--m-space-md) var(--m-space-md) 18px !important;
    border-radius: var(--m-radius-sm) !important;
    background: var(--tg-accent-bg) !important;
    border: 1px solid rgba(82, 160, 255, 0.35) !important;
    box-shadow: none !important;
}

.company-fields .field-row--agent-pct::before {
    left: 8px !important;
    top: 10px !important;
    bottom: 10px !important;
    width: 3px !important;
}

.company-fields .field-label {
    font-size: 13px !important;
}

.company-fields .field-value,
.company-inline-input {
    font-size: 16px !important;
}

.company-inline-input {
    min-height: var(--m-touch-min) !important;
    padding: 12px 14px !important;
    border-radius: var(--m-radius-sm) !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Company / member forms */
.profile-page .add-member-form {
    margin-top: var(--m-space-lg) !important;
    padding: var(--m-space-lg) !important;
    border-radius: var(--m-radius-md) !important;
    background: var(--tg-bg-input) !important;
    border: 1px solid var(--tg-border-light);
}

.profile-page .form-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: var(--m-space-md) !important;
}

.profile-page .form-fields {
    gap: var(--m-space-md) !important;
}

.profile-page .form-field {
    gap: 6px !important;
}

.profile-page .form-field label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tg-text-secondary) !important;
}

.profile-page .form-field input,
.profile-page .form-field select {
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    border-radius: var(--m-radius-sm) !important;
    border: 1px solid var(--tg-border) !important;
    box-sizing: border-box;
}

.profile-page .form-actions {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: var(--m-space-sm) !important;
    margin-top: var(--m-space-lg) !important;
    padding-top: var(--m-space-md) !important;
    border-top: 1px solid var(--tg-border-light);
    position: sticky;
    bottom: 0;
    background: var(--tg-bg-input);
    margin-left: calc(-1 * var(--m-space-lg));
    margin-right: calc(-1 * var(--m-space-lg));
    margin-bottom: calc(-1 * var(--m-space-lg));
    padding-left: var(--m-space-lg);
    padding-right: var(--m-space-lg);
    padding-bottom: calc(var(--m-space-md) + var(--m-safe-bottom));
}

.profile-page .form-actions .btn-save,
.profile-page .form-actions .btn-cancel {
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
    font-size: var(--m-font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--m-radius-sm) !important;
}

/* ——— Team ——— */
.team-section .section-header {
    align-items: center !important;
}

.team-members {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--m-space-sm) !important;
    margin-top: var(--m-space-md) !important;
}

.team-member-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--m-radius-md) !important;
    padding: var(--m-space-md) !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.team-member-name {
    font-size: 16px !important;
}

.team-member-position {
    font-size: 14px !important;
}

.team-member-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    margin-top: var(--m-space-sm) !important;
}

.btn-add-member,
.section-header .btn-add-member {
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
    margin-top: var(--m-space-md) !important;
    padding: 12px 16px !important;
    font-size: var(--m-font-body) !important;
    border-radius: var(--m-radius-sm) !important;
    justify-content: center !important;
}

#team-members > p {
    text-align: center !important;
    padding: var(--m-space-2xl) var(--m-space-md) !important;
    color: var(--tg-text-muted) !important;
    font-size: var(--m-font-body) !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Company list cards from JS — generic */
#companies-list .company-card,
#companies-list > div {
    border-radius: var(--m-radius-md) !important;
    margin-bottom: var(--m-space-sm);
}

.profile-page .company-fill-by-inn-btn {
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
    margin-top: var(--m-space-sm);
}

/* Inline flex rows in team form */
.profile-page .form-field > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--m-space-sm) !important;
}

.profile-page .form-field > div[style*="display: flex"] select,
.profile-page .form-field > div[style*="display: flex"] button {
    width: 100% !important;
    min-height: var(--m-touch-min) !important;
}

/* Landscape: keep single column */
@media (max-width: 768px) and (orientation: landscape) {
    .profile-top-section.profile-panel--active {
        flex-direction: column !important;
    }

    .photo-section {
        width: 100% !important;
    }
}