/* staff.css — gym_staff list pieces (components/cell/*). Generic list shell comes from ui_kit.css. */
.stf-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 4px; }
.stf-week__day {
    min-width: 0; padding: 4px 4px; border-radius: 8px; text-align: center; line-height: 1.2;
    background: var(--custom_color_zircon); color: var(--custom_color_bombay); border: 1px solid transparent;
}
.stf-week__day.is-on { background: var(--custom_color_alice_blue); color: var(--custom_color_v2_dark_navi_blue); border-color: var(--custom_color_regent_st_blue); }
.stf-week__name { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.stf-week__period { display: block; font-size: 9.5px; white-space: nowrap; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }

/* staff roster grid: portrait cards (media-card); name + title sit on the photo, roles/specialities/contact below */
.stf-card .media-card__hero { max-height: 300px; }
.stf-card .media-card__initial { font-size: 96px; }
.stf-card__body { gap: 10px; padding-top: 12px; padding-bottom: 12px; }
.stf-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.stf-role {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .2px; line-height: 1.2; white-space: nowrap;
}
.stf-role i { font-size: 10px; }
.stf-role--pt { background: #EAF0FF; color: #1E3A8A; }
.stf-role--instructor { background: #E4F3F1; color: #1F6B63; }
.stf-role--sales { background: #E6F1EE; color: var(--custom_color_v2_green); }
.stf-role--none { background: var(--custom_color_zircon); color: var(--custom_color_rolling_stone); font-weight: 600; }
.stf-card__specs { gap: 4px; }
.stf-card__foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--custom_color_mercury); }
.stf-card__since { font-size: 11px; color: var(--custom_color_rolling_stone); white-space: nowrap; }
.stf-card__since i { font-size: 10px; margin-right: 4px; color: var(--custom_color_bombay); }
.stf-contact { display: inline-flex; align-items: center; gap: 6px; }
.stf-contact__btn {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--custom_color_zircon); color: var(--custom_color_v2_dark_navi_blue); font-size: 11px; text-decoration: none;
    transition: background .15s, color .15s;
}
.stf-contact__btn:hover { background: var(--custom_color_v2_dark_navi_blue); color: #fff; }
.stf-contact__btn { border: 0; padding: 0; cursor: pointer; }
.stf-contact__btn.is-copied { background: #E6F1EE; color: var(--custom_color_v2_green); }
.stf-contact .media-card__link { margin-left: 4px; }

/* staff create/update form */
.stf-form__photo { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; }
.stf-form .select-custom-content .btn { font-size: 12px; }
.stf-preview { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--custom_color_zircon); }
.stf-preview__label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--custom_color_rolling_stone); margin: 0 0 6px; }