/* ===== PROFILE PAGE ===== */
.pf-wrap{--text-muted:var(--text-secondary);max-width:1280px;margin:0 auto;padding:28px 24px 64px}

/* Card */
.pf-card{background:transparent;border:none;border-radius:0;overflow:visible}
.pf-split{padding:32px 36px}
.pf-divider{height:1px;background:var(--border)}
.pf-hero{background:var(--bg-card);border:1px solid var(--border-light);border-radius:calc(var(--portal-radius-xl) * 1.5);box-shadow:var(--shadow-sm);overflow:hidden}
.pf-cover {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 104px;
    padding: 20px 28px;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 14%, var(--bg-card)), color-mix(in srgb, var(--accent) 5%, var(--bg-card)) 60%, color-mix(in srgb, var(--info) 14%, var(--bg-card)));
    overflow: hidden;
}
.pf-cover-label{display:inline-flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:12px;font-weight:600;letter-spacing:.03em}
.pf-cover-label .mud-icon-root{font-size:18px;color:var(--accent)}

/* Dismissed */
.pf-card--dismissed .pf-hero{border-color:color-mix(in srgb,var(--danger) 45%,var(--border))}
/* Плашка «Уволен» остаётся на фоне карточки: на подложке ошибки красный текст не дотягивал до 4,5:1. */
.pf-card--dismissed .pf-status-badge{border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)}

/* Animation */
.pf-anim{animation:pfIn .45s ease both}
@keyframes pfIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ══ WIDGETS ROW ══ */
.pf-overview {
    min-width: 0;
}

/* Ряд карточек: столбец на карточку — «Место работы / График работы», «Коллеги» и части модулей своего профиля
   (баланс маркета); в чужом профиле, без маркета в поставке или у уволенного карточек две, и пустого столбца нет.
   Карточки одной высоты (stretch), низы ровные. На планшете (600–959) — два столбца, на телефоне — один. */
.pf-widgets-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 20px;
    margin: 20px 0;
    align-items: stretch;
}
.pf-widgets-row > .pf-widget {
    min-width: 0;
    min-height: 248px;
}
.pf-widget-split{display:flex;flex-direction:column}
.pf-widget-section{flex:1;display:flex;flex-direction:column;justify-content:flex-start}
/* Две грани карточки «Место работы / График работы» в одной ячейке сетки: высота карточки — по большей грани, и
   переключение её не дёргает; рост грани при правке графика или заместителя растит ряд, это допустимо. Скрытая грань
   невидима и не принимает нажатий (visibility убирает её и из табуляции). transition:all у кнопок дней задерживал бы
   visibility и оставлял «Пн»–«Пт» поверх уже открытого места работы. */
.pf-widget-faces{display:grid;flex:1;min-width:0}
.pf-widget-face{grid-area:1 / 1;min-width:0;display:flex;flex-direction:column}
.pf-widget-face--hidden,.pf-widget-face--hidden *{visibility:hidden;pointer-events:none;transition:none}
/* Часть модуля (баланс маркета) заполняет карточку: обёртка даёт рамку и поля, содержимое — на всю высоту. */
.pf-widget-module{display:flex;flex-direction:column}
.pf-widget-module>*{flex:1;min-width:0}
.pf-widget-divider{height:1px;background:var(--border-light);margin:18px 0;flex-shrink:0}
/* Переключатель «Место работы / График работы» стоит в шапке карточки вместо заголовка; на узкой карточке
   переносится под значок, а не вылезает за край. */
.pf-widget-work .pf-widget-head{flex-wrap:wrap}
/* У маленького outlined-переключателя MudBlazor padding: 3px на трёх классах — более короткий
   селектор его не перекрывает, текст остаётся у края плашки. */
.pf-widget-work .pf-work-switch.mud-toggle-group .mud-toggle-item{text-transform:none;font-size:12px;font-weight:600;padding:6px 22px}

/* ══ IDENTITY ══ */
.pf-identity {
    position: relative;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 0 28px 24px;
    margin-top: -32px;
}

/* Avatar */
.pf-ava-area{position:relative;flex-shrink:0}
.pf-ava-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid var(--bg-card);
    background: var(--bg-card);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
    transition: box-shadow .2s;
}
.pf-ava-area--own{cursor:pointer}
.pf-ava-area--own:hover .pf-ava-ring{box-shadow:0 0 0 2px var(--accent)}
.pf-ava{width:100%;height:100%;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--accent-hover));display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:600;color:var(--mud-palette-primary-text);overflow:hidden;font-family:var(--font-body)}
.pf-ava img{width:100%;height:100%;object-fit:cover}
.pf-ava-upload{position:absolute;inset:0;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0}
.pf-ava-cam{position:absolute;bottom:4px;right:4px;width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);box-shadow:var(--shadow-sm);color:var(--text-secondary);display:flex;align-items:center;justify-content:center}
.pf-ava-cam .mud-icon-root{font-size:18px}
.pf-ava-upload:hover .pf-ava-cam{color:var(--accent)}
.pf-wrap :is(button,a):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pf-presence-wrap{position:absolute;bottom:12px;right:12px;display:inline-block;line-height:0}
.pf-presence-dot{display:block;width:22px;height:22px;border-radius:50%;background:var(--text-muted);border:4px solid var(--bg-card);box-shadow:0 0 0 1px var(--border);transition:background .2s}
.pf-presence-dot--online{background:var(--success)}

/* Avatar column */
.pf-ava-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}

/* Actions row */
.pf-actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.pf-action.mud-button-root{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--portal-action-height);padding:11px 18px;border:1px solid var(--border);border-radius:var(--portal-radius-md);background:var(--bg-card);color:var(--text-secondary);font-size:14px;font-weight:600;transition:background .2s,border-color .2s}
.pf-action.mud-button-root .mud-button-icon-start{margin:0}
.pf-action.mud-button-root .mud-icon-root{font-size:18px}
.pf-action.mud-button-root:hover{background:var(--bg-hover);border-color:var(--border-input)}
.pf-action--primary.mud-button-root{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.pf-action--primary.mud-button-root:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.pf-action-icon.mud-icon-button{width:var(--portal-action-height);height:var(--portal-action-height);border:1px solid var(--border);border-radius:var(--portal-radius-md);color:var(--accent)}
.pf-action-icon.mud-icon-button:hover{background:var(--bg-hover);color:var(--accent)}
.pf-action-icon .mud-icon-root{font-size:20px}

.pf-info {
    flex: 1;
    min-width: 0;
    padding-top: 48px;
}

.pf-name-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.pf-name-row .pf-name-pencil {
    flex-shrink: 0;
    margin: 0;
}
.pf-name{font-family:var(--font-body);font-size:clamp(24px,2.5vw,32px);font-weight:700;color:var(--text-primary);letter-spacing:-.035em;line-height:1.25;margin:0;overflow-wrap:anywhere}
.pf-pos{font-size:16px;color:var(--text-secondary);font-weight:400;margin:0 0 14px;overflow-wrap:anywhere}

/* Name edit */
.pf-name-pencil.mud-button-root{width:32px;height:32px;border-radius:var(--portal-radius-sm);background:var(--bg-panel);border:1px solid var(--border-light);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0;vertical-align:middle;margin-left:8px}
.pf-name-pencil.mud-button-root .mud-icon-root{font-size:16px;color:var(--text-muted)}
.pf-name-pencil.mud-button-root:hover{background:var(--accent-light);border-color:rgba(var(--mud-palette-primary-rgb), .25)}
.pf-name-pencil.mud-button-root:hover .mud-icon-root{color:var(--accent)}
.pf-name-edit{margin-bottom:16px}

/* Contact links wrap naturally for long addresses. */
.pf-contacts-col{display:flex;flex-wrap:wrap;gap:8px 20px}
.pf-contact{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;overflow-wrap:anywhere;font-size:14px;color:var(--text-secondary);text-decoration:none;transition:color .2s}
.pf-contact:hover{color:var(--accent)}
.pf-contact svg{flex-shrink:0;stroke:currentColor}
/* День рождения: только день и месяц; скрытый от коллег видит только сам сотрудник — приглушённым. */
.pf-birthday:hover{color:var(--text-secondary)}
.pf-birthday .mud-icon-root{font-size:16px;color:var(--accent)}
/* Общее правило .pf-contact svg обводит контуром и невидимый прямоугольник фона иконок Material — здесь обводка не нужна. */
.pf-birthday svg.mud-icon-root{stroke:none}
.pf-birthday--hidden{color:var(--text-muted)}
.pf-birthday--hidden .mud-icon-root{color:var(--text-muted)}
.pf-birthday-note{color:var(--text-muted)}
.pf-birthday .pf-birthday-toggle{margin:-6px 0;padding:4px}
.pf-birthday .pf-birthday-toggle .mud-icon-root{color:var(--text-muted)}

/* Inline edit */
.pf-inline-edit{display:flex;align-items:center;gap:8px;margin-top:10px}
.pf-btn.mud-button-root{padding:6px 16px;border-radius:var(--portal-radius-sm);font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .2s;font-family:var(--font-body);white-space:nowrap}
.pf-btn--save.mud-button-root{background:var(--accent);color:var(--mud-palette-primary-text)}
.pf-btn--save.mud-button-root:hover{filter:brightness(1.1)}
.pf-btn--save.mud-button-root:disabled{opacity:.4;cursor:not-allowed}
.pf-btn--cancel.mud-button-root{background:transparent;border:1px solid var(--border);color:var(--text-secondary)}
.pf-btn--cancel.mud-button-root:hover{border-color:var(--border-input);color:var(--text-primary)}

/* Status (top-right corner) */
.pf-status-corner{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 12px;max-width:60%}
.pf-status-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent);border-radius:100px;background:var(--bg-card);color:var(--text-secondary);font-size:12px;font-weight:600}
.pf-status-badge .mud-icon-root{font-size:18px}
.pf-status-date{font-size:12px;color:var(--text-secondary)}

/* ══ WIDGETS ══ */
.pf-widget{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--portal-radius-xl);padding:22px;box-shadow:var(--shadow-sm);overflow-wrap:anywhere}
/* Шапка карточки ряда — одна у всех трёх: значок на акцентной плашке 36 px, заголовок 15/600, справа счётчик, ссылка
   или кнопка; высота шапки — высота плашки, какой бы ни был заголовок (текст или переключатель). */
.pf-widget-head{display:flex;align-items:center;gap:10px;min-height:36px;margin-bottom:18px}
.pf-widget-head > .mud-icon-root {
    box-sizing: content-box;
    flex-shrink: 0;
    padding: 8px;
    border-radius: var(--portal-radius-md);
    background: var(--accent-light);
    font-size: 20px;
}

.pf-widget-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Deputy widget */
.pf-deputy-card{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--portal-radius-md);text-decoration:none;color:inherit;transition:border-color .2s}
.pf-deputy-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit}
.pf-deputy-card:hover{border-color:var(--border-input)}
.pf-deputy-ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--accent),var(--accent));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--mud-palette-primary-text);font-family:var(--font-display)}
.pf-deputy-info{flex:1;min-width:0}
.pf-deputy-name{font-size:13px;font-weight:600;color:var(--text-primary)}
.pf-deputy-pos{font-size:12px;color:var(--text-muted)}
.pf-deputy-remove.mud-button-root{width:24px;height:24px;border-radius:calc(var(--portal-radius-sm) * .75);background:none;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);transition:all .15s;flex-shrink:0}
.pf-deputy-remove.mud-button-root:hover{background:var(--danger-bg);color:var(--danger)}
.pf-deputy-remove.mud-button-root .mud-icon-root{font-size:14px}
.pf-deputy-add.mud-button-root{display:flex;align-items:center;gap:6px;width:100%;padding:10px;background:transparent;border:1px dashed var(--border-input);border-radius:var(--portal-radius-md);font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .2s;font-family:var(--font-body)}
.pf-deputy-add.mud-button-root:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.pf-deputy-add.mud-button-root .mud-icon-root{font-size:16px}

/* ══ SCHEDULE ══ */
/* Schedule: horizontal day buttons */
.pf-sch-days-row{display:flex;gap:6px;margin-bottom:14px}
.pf-sch-day-btn.mud-button-root{flex:1;min-width:0;height:38px;border-radius:var(--portal-radius-sm);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:1px solid var(--border);color:var(--text-muted);background:transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s;font-family:var(--font-body)}
.pf-sch-day-btn.mud-button-root.office{border-color:rgba(var(--mud-palette-primary-rgb), .15);color:var(--text-secondary)}
.pf-sch-day-btn.mud-button-root.remote{border-color:color-mix(in srgb, var(--tag-purple-text) 15%, transparent);color:var(--text-secondary)}
.pf-sch-day-btn.mud-button-root.today{box-shadow:0 0 0 1.5px var(--accent)}
.pf-sch-day-btn.mud-button-root.active.office{background:var(--accent-light);color:var(--accent);border-color:rgba(var(--mud-palette-primary-rgb), .3)}
.pf-sch-day-btn.mud-button-root.active.remote{background:color-mix(in srgb, var(--tag-purple-text) 10%, transparent);color:var(--tag-purple-text);border-color:color-mix(in srgb, var(--tag-purple-text) 30%, transparent)}
.pf-sch-day-btn.mud-button-root:hover{border-color:var(--border-input)}

/* Selected day info row */
.pf-sch-day-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);font-weight:500;min-height:28px}
.pf-sch-day-time{font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;color:var(--text-primary)}
.pf-sch-day-mode{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;font-weight:600;color:var(--accent)}
.pf-sch-day-mode .mud-icon-root{font-size:14px}
.pf-sch-action.mud-button-root{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--portal-radius-sm);background:var(--bg-panel);border:none;cursor:pointer;color:var(--text-muted);transition:all .2s;flex-shrink:0}
.pf-sch-action.mud-button-root:first-of-type{margin-left:auto}
.pf-sch-action.mud-button-root:hover{background:var(--accent-light);color:var(--accent)}
.pf-sch-action.mud-button-root .mud-icon-root{font-size:14px}
/* Schedule inline edit */
.pf-sch-edit-row{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.pf-sch-edit-row .pf-time-field{flex:1;min-width:0;margin:0}
.pf-sch-switch-wrap{display:inline-flex;margin-top:4px}

/* ══ COMPETENCIES ══ */
.pf-comp{min-width:0;padding:8px 0}
.pf-comp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.pf-comp-title{font-size:15px;font-weight:600;color:var(--text-primary);margin:0}
.pf-comp-description{font-size:13px;color:var(--text-muted);margin:0 0 20px}
.pf-comp-add.mud-button-root{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;font-family:var(--font-body);padding:4px 8px;border-radius:calc(var(--portal-radius-sm) * .75);transition:all .2s}
.pf-comp-add.mud-button-root:hover{background:var(--accent-light)}
.pf-comp-add.mud-button-root .mud-icon-root{font-size:14px}
.pf-chips{display:flex;flex-wrap:wrap;gap:10px}
.pf-muted{color:var(--text-muted);font-size:13px;margin:0;line-height:1.6}
.pf-comp>.pf-muted{padding:22px;background:var(--bg-panel);border:1px dashed var(--border);border-radius:var(--portal-radius-lg)}

/* Skill chips */
.pf-skill-level-edit.mud-button-root{min-height:32px;padding:4px 8px;border:1px solid var(--border-input);border-radius:var(--portal-radius-sm);font-size:12px;color:var(--text-primary);background:var(--bg-card)}
.pf-skill-level-edit .mud-icon-root{font-size:16px}
.pf-chip-remove.mud-icon-button{width:32px;height:32px;flex-shrink:0;color:var(--text-secondary);border-radius:var(--portal-radius-sm)}
.pf-chip-remove .mud-icon-root{font-size:18px}
.pf-endorse-btn.mud-button-root{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--portal-radius-sm);color:var(--text-secondary);font-size:12px;font-weight:600;padding:4px 8px;cursor:pointer;transition:all .2s;line-height:1.4}
.pf-endorse-btn.mud-button-root:hover{border-color:rgba(var(--mud-palette-success-rgb), .5);color:var(--success);background:rgba(var(--mud-palette-success-rgb), .1)}
.pf-endorse-btn.mud-button-root.endorsed{border-color:rgba(var(--mud-palette-success-rgb), .4);color:var(--success);background:rgba(var(--mud-palette-success-rgb), .12)}
.pf-endorse-btn.mud-button-root.endorsed:hover{border-color:rgba(var(--mud-palette-error-rgb), .4);color:var(--danger);background:rgba(var(--mud-palette-error-rgb), .1)}

/* Spec chips */
.pf-spec{display:inline-flex;align-items:center;gap:7px;max-width:100%;overflow-wrap:anywhere;padding:8px 14px;border-radius:var(--portal-radius-md);font-size:13px;font-weight:500;color:var(--tag-blue-text);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);background:var(--tag-blue-bg);transition:all .2s}

/* ══ COLLEAGUES WIDGET ══ */
.pf-widget-colleagues{display:flex;flex-direction:column;overflow:hidden}
/* Ровно три строки коллег (строка — фото и 8 px сверху и снизу, между строками 6 px): прежние 192 px срезали низ
   третьей строки вместе с должностью. Дальше список прокручивается. */
.pf-colleagues-list{display:flex;flex-direction:column;gap:6px;max-height:calc(3 * (var(--portal-person-avatar-size) + 16px) + 2 * 6px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent;padding-right:4px}
.pf-colleagues-list::-webkit-scrollbar{width:4px}
.pf-colleagues-list::-webkit-scrollbar-track{background:transparent}
.pf-colleagues-list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:2px}
.pf-colleague{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--portal-radius-md);text-decoration:none;color:inherit;transition:background .15s}
.pf-colleague:hover{background:var(--bg-hover)}
.pf-colleague-ava{width:var(--portal-person-avatar-size);height:var(--portal-person-avatar-size);border:1px solid var(--portal-person-avatar-border);border-radius:50%;flex-shrink:0;background:var(--portal-person-avatar-bg);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--portal-person-avatar-color);font-family:var(--font-body);overflow:hidden}
.pf-colleague-ava img{width:100%;height:100%;object-fit:cover}
.pf-colleague-info{flex:1;min-width:0}
.pf-colleague-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-colleague-pos{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-widget-count{margin-left:auto;font-size:11px;font-weight:700;color:var(--text-muted);background:var(--bg-hover);padding:2px 8px;border-radius:999px}
.pf-colleagues-loader{display:flex;justify-content:center;padding:8px 0}
.pf-colleagues-more{display:flex;align-items:center;justify-content:center;width:100%;padding:8px;margin-top:6px;border-radius:var(--portal-radius-sm);background:transparent;border:1px dashed var(--border-input);color:var(--text-muted);font-size:12px;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all .2s}
.pf-colleagues-more:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.pf-colleagues-more:disabled{opacity:.5;cursor:not-allowed}

/* ══ PHOTO UPLOAD DIALOG ══ */
.pf-dialog-hint{margin:0;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.photo-upload-circle{width:100px;height:100px;border-radius:50%;border:2px dashed var(--border-input);display:flex;align-items:center;justify-content:center}
.photo-upload-icon{font-size:36px;color:var(--text-muted)}

/* Crop viewport */
.photo-crop-viewport{width:200px;height:200px;border-radius:50%;overflow:hidden;position:relative;cursor:grab;border:3px solid var(--border-input);touch-action:none;user-select:none}
.photo-crop-viewport img{position:absolute;top:0;left:0;transform-origin:0 0;pointer-events:none;max-width:none}
.photo-crop-controls{display:flex;align-items:center;gap:8px;width:200px}
.photo-crop-zoom-icon{color:var(--text-muted);font-size:18px}
.photo-crop-slider{flex:1;appearance:none;height:4px;background:var(--border-input);border-radius:2px;outline:none;cursor:pointer}
.photo-crop-slider::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-card)}
.photo-crop-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-card)}

/* ══ WORK WIDGET (compact) ══ */
.pf-work-w-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pf-work-w-company{font-size:14px;font-weight:700;color:var(--text-primary)}
.pf-work-w-type{font-size:10px;font-weight:700;padding:2px 8px;border-radius:calc(var(--portal-radius-sm) * .75);text-transform:uppercase;letter-spacing:.03em}
.pf-work-w-type.primary{background:var(--tag-green-bg);color:var(--tag-green-text)}
.pf-work-w-type.secondary{background:var(--tag-purple-bg);color:var(--tag-purple-text)}
.pf-work-w-details {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
.pf-work-w-details span {
    display: block;
}

.pf-work-w-details .pf-work-w-department {
    margin-bottom: 4px;
    color: var(--text-primary);
    font-weight: 500;
}
.pf-work-w-dates{font-size:12px;color:var(--text-muted);margin-top:6px;display:flex;align-items:center;gap:4px}
.pf-work-w-dates .mud-icon-root{font-size:13px}
.pf-work-w-head{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);text-decoration:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);transition:opacity .2s}
.pf-work-w-head:hover{opacity:.8}
.pf-work-w-head strong{color:var(--text-primary)}
.pf-work-w-head .mud-icon-root{font-size:14px;color:var(--accent)}
.pf-work-w-nav{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.pf-work-w-page{font-size:12px;color:var(--text-secondary);padding:0 6px}
.pf-work-w-nav-btn.mud-button-root{width:30px;height:30px;border-radius:var(--portal-radius-sm);border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);padding:0;transition:all .15s}
.pf-work-w-nav-btn.mud-button-root .mud-icon-root{width:20px;height:20px;font-size:20px}
.pf-work-w-nav-btn.mud-button-root:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pf-work-w-nav-btn.mud-button-root:disabled{opacity:.3;cursor:not-allowed}

/* ══ RESPONSIVE ══ */
@media(max-width:959.98px){
    .pf-widgets-row{gap:14px}
    .pf-widget{padding:18px}
    .pf-work-w-head{flex-wrap:wrap}
    .pf-sch-day-info{flex-wrap:wrap}
}
@media(max-width:599.98px){
    .pf-cover{min-height:88px;padding:16px;gap:12px}
    .pf-cover-label{max-width:42%;font-size:11px}
    .pf-status-corner{flex-direction:column;align-items:flex-end;gap:6px;max-width:58%}
    .pf-status-badge{font-size:11px;padding:5px 9px}
    .pf-status-date{font-size:11px}
    .pf-widgets-row{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:14px;margin:16px 0}
    .pf-widgets-row>.pf-widget{min-height:0}
    .pf-widget{padding:18px}
    .pf-hero{border-radius:calc(var(--portal-radius-xl) * 1.25)}
    .pf-hide-mobile{display:none}
    .pf-widget-divider:has(+.pf-hide-mobile){display:none}
    .pf-widget-split:has(.pf-hide-mobile){min-height:auto}
    .container.pf-wrap{padding:20px 16px 40px}
    .pf-split{padding:24px 20px}
    .pf-comp{padding:4px 0}
    .pf-identity {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: -20px;
        padding: 0 16px 20px;
    }
    .pf-ava-ring{width:80px;height:80px;border-width:4px}
    .pf-ava{font-size:26px}
    .pf-ava-cam{width:32px;height:32px;bottom:0;right:0}
    .pf-presence-wrap{bottom:4px;right:4px}
    .pf-name{font-size:22px;line-height:1.3}
    .pf-info{width:100%;padding-top:0}
    .pf-pos {
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 1.5;
    }
    .pf-contacts-col{flex-direction:column;align-items:flex-start;gap:4px}
    .pf-contact {
        min-height: 36px;
        font-size: 14px;
    }
    .pf-actions-row{gap:8px;margin-top:18px}
    .pf-action.mud-button-root{flex:1 1 auto;min-height:var(--portal-action-height);padding:10px 12px;font-size:14px}
    .pf-action-icon.mud-icon-button{width:var(--portal-action-height);height:var(--portal-action-height)}
    .pf-name-pencil.mud-button-root {
        width: 44px;
        height: 44px;
        margin-top: -6px;
    }
    .pf-sch-day-btn.mud-button-root{height:44px}
    .pf-comp-add.mud-button-root,.pf-sch-action.mud-button-root,.pf-deputy-remove.mud-button-root,.pf-work-w-nav-btn.mud-button-root,.pf-cert-delete.mud-button-root,.pf-endorse-btn.mud-button-root{min-height:44px;min-width:44px}
    .pf-chip-remove.mud-icon-button{width:44px;height:44px}
    .pf-skill-level-edit.mud-button-root,.pf-btn.mud-button-root{min-height:44px}
    .pf-colleagues-list{max-height:none;overflow:visible;padding-right:0}
    .pf-colleagues-more.mud-button-root{min-height:44px}
    .pf-deputy-add.mud-button-root{min-height:44px}
    .pf-inline-edit{flex-wrap:wrap}
}

/* ═══ Profile Tabs ═══ */
.pf-tabs{min-width:0;padding:8px 28px 4px;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--portal-radius-xl);box-shadow:var(--shadow-sm)}
.pf-tabs .pf-mud-tabs .mud-tabs-tabbar{background:transparent;border-bottom:1px solid var(--border-light)}
.pf-tabs .pf-mud-tabs .mud-tab{min-height:56px;font-size:13px;font-weight:500;color:var(--text-secondary)}
.pf-tabs .pf-mud-tabs .mud-tab.mud-tab-active{color:var(--accent);font-weight:600;background:var(--accent-subtle);border-radius:var(--portal-radius-sm) var(--portal-radius-sm) 0 0}
.pf-tab-content{padding:24px 0}
/* Наименьшая высота области вкладок — примерно вкладка навыков: переключение на короткую вкладку не схлопывает страницу
   и не уводит её вверх из-под курсора. */
.pf-tabs .pf-mud-tabs .mud-tabs-panels{min-height:280px}
.pf-tab-content--skills{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px}
.pf-tab-content--skills>.pf-comp+.pf-comp{border-left:1px solid var(--border-light);padding-left:32px}
.pf-tab-content .es-skill-tag{max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere;padding:8px 12px;font-size:13px;border-radius:var(--portal-radius-md)}
.pf-tab-content .es-skill-level{font-size:12px;display:inline-flex;align-items:center;line-height:1}

/* Вкладки до 960 — как на телефоне: все видны сразу, равной ширины, значок над подписью. В строку по 160 px
   (минимум MudBlazor) четыре вкладки от 600 px не помещаются и уходили бы в прокрутку. После базовых правил вкладок. */
@media(max-width:959.98px){
    /* !important — против встроенного style, которым MudTabs сдвигает полосу вкладок. */
    .pf-tabs .pf-mud-tabs .mud-tabs-tabbar-wrapper{width:100%;transform:none!important}
    .pf-tabs .pf-mud-tabs .mud-tabs-tabbar-wrapper>.mud-tooltip-root{flex:1 1 auto;min-width:0}
    .pf-tabs .pf-mud-tabs .mud-tabs-scroll-button{display:none}
    .pf-tabs .pf-mud-tabs .mud-tab{min-height:64px;padding:8px 0;font-size:11px;line-height:1.3;flex-direction:column;gap:4px;white-space:nowrap;text-align:center}
    .pf-tabs .pf-mud-tabs .mud-tab .mud-icon-root{display:block;font-size:20px;margin:0}
}

/* ═══ Certificate Cards ═══ */
.pf-certs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.pf-cert-card{border:1px solid var(--border-light);border-radius:var(--portal-radius-xl);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.pf-cert-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.pf-cert-preview.mud-button-root{width:100%;height:140px;padding:0;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--text-muted) 5%,transparent);cursor:pointer;position:relative;overflow:hidden}
.pf-cert-preview img{width:100%;height:100%;object-fit:cover}
.pf-cert-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;color:var(--mud-palette-white)}
.pf-cert-preview:hover .pf-cert-overlay,.pf-cert-preview:focus-visible .pf-cert-overlay{opacity:1}
.pf-cert-info{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px}
.pf-cert-title{font-size:13px;line-height:1.5;font-weight:500;overflow:hidden;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1;min-width:0}
.pf-cert-delete.mud-button-root{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:2px;border-radius:calc(var(--portal-radius-sm) / 2);transition:color .2s}
.pf-cert-delete.mud-button-root:hover{color:var(--danger)}
.pf-cert-preview-content{display:flex;align-items:center;justify-content:center}
.pf-cert-preview-iframe{width:100%;height:70vh;border:none;border-radius:calc(var(--portal-radius-sm) / 2)}
.pf-cert-preview-img{max-width:100%;max-height:70vh;object-fit:contain;border-radius:calc(var(--portal-radius-sm) / 2)}
@media(max-width:599.98px){
    .pf-cert-preview-iframe{height:50vh}
    .pf-cert-preview-img{max-height:50vh}
}

@media(max-width:599.98px){
    .pf-tabs {
        padding: 8px;
        margin-top: 14px;
    }

    .pf-overview .pf-widget {
        box-shadow: none;
    }
    .pf-tabs .pf-widgets-row{margin:12px 0;gap:12px}
    .pf-tab-content{padding:20px 0}
    .pf-tab-content--skills{grid-template-columns:minmax(0,1fr);gap:24px}
    .pf-tab-content--skills>.pf-comp+.pf-comp{border-left:none;border-top:1px solid var(--border-light);padding:24px 0 4px}
    .pf-comp-description{margin-bottom:16px;font-size:12px}
    .pf-certs-grid{grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:12px}
}
@media(prefers-reduced-motion:reduce){
    .pf-anim{animation:none}
    .pf-wrap *,.pf-wrap *::before,.pf-wrap *::after{transition:none!important}
}

/* Планшет: карточки ряда — в два столбца, третья (баланс маркета) переходит на вторую строку. От 960 — столбец на
   карточку (решение 2026-10-30). */
@media (min-width: 600px) and (max-width: 959.98px) {
    .pf-widgets-row {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}