.form-input.w100 { width: calc(100% - 10px); }
.form-input.w50  { width: calc(50%  - 10px); }
.form-input.w33  { width: calc(33.333% - 10px); }
.form-input.w25  { width: calc(25%  - 10px); }
.form-input.w-photo { width: 60px; margin: 16px 10px !important; }

@media screen and (max-width: 640px) {
  .form-inputs > .w100 { width: calc(100% - 10px); }
  .form-inputs > .w50     { width: calc(100% - 10px); }
  .form-inputs > .w33     { width: calc(50% - 10px); }
  .form-inputs > .w25     { width: calc(50% - 10px); }
}

.profile-section                                  { margin: 10px 5px 0; width: 100%; }
.profile-section-title                            { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px; user-select: none; border-bottom: 1px solid #E8EDF5; margin-bottom: 4px; }
.profile-section-title-text                       { font-size: 12px; font-weight: 600; color: #657FAC; text-transform: uppercase; letter-spacing: 0.5px; flex: 1; }
.profile-section-title:hover                      { background: #F0F4FA; }
.profile-section-icon                             { color: #C0CAD8; font-size: 14px; transition: transform 0.2s; }
.profile-section.collapsed .profile-section-icon  { transform: rotate(-90deg); }
.profile-section-body                             { display: flex; flex-wrap: wrap; }
.profile-section.collapsed .profile-section-body  { display: none; }

/* required highlight — yellow label */
.form-input.required > label { color: #B8860B; }

/* role tabs */
.settings-profile-inputs .role-tabs, .settings-profile-sections .role-tabs               { display: flex; gap: 8px; padding: 20px 10px; }
.settings-profile-inputs .role-tab,  .settings-profile-sections .role-tab                { padding: 6px 14px; border-radius: 4px; font-size: 13px; font-weight: 500; color: #657FAC; background: #F0F4FA; text-decoration: none; }
.settings-profile-inputs .role-tab.selected, .settings-profile-sections .role-tab.selected { background: #1F3C77; color: #fff; }

/* drag handle */
.settings-profile-inputs .ctrl-drag-cell        { width: 24px; padding: 0 4px; cursor: grab; color: #C0CAD8; }
.settings-profile-inputs .ctrl-drag-cell:active { cursor: grabbing; }
.settings-profile-inputs .ctrl-drag i          { font-size: 14px; }

/* required star */
.settings-profile-inputs .required-mark         { color: #C0CAD8; }
.settings-profile-inputs .required-mark.required { color: #B8860B; }
.settings-profile-inputs .required-mark i       { font-size: 14px; }

/* always-on row — muted, toggle disabled */
.settings-profile-inputs tr.always-on .action-toggle button { pointer-events: none; opacity: 0.4; }

/* inactive rows */
.settings-profile-inputs tr.inactive td         { opacity: 0.45; }
.settings-profile-inputs tr.inactive .ctrls     { opacity: 1; }

/* special badge */
.settings-profile-inputs .descr                 { font-size: 11px; color: #A0AABB; margin-top: 2px; }

/* i18n inline in list */
.settings-profile-inputs .list-item-i18n        { display: inline-flex; gap: 4px; font-size: 11px; color: #657FAC; }
.settings-profile-inputs .list-item-i18n .t     { font-weight: 600; }

/* archived/inactive section toggle */
.settings-profile-inputs .archived .title       { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px; font-weight: 500; color: #657FAC; user-select: none; }
.settings-profile-inputs .archived .title .icon { transition: transform 0.2s; }
.settings-profile-inputs .archived .title.expanded .icon { transform: rotate(180deg); }
.settings-profile-inputs .archived .list        { display: none; }
.settings-profile-inputs .archived .title.expanded + * .list,
.settings-profile-inputs .archived .title.expanded ~ .list { display: block; }

/* modal — readonly fields */
.modal-profile-input .field-readonly .classowl-input-frame { background: #F5F7FA; }
.modal-profile-input .field-readonly input      { color: #A0AABB; cursor: default; }
.modal-profile-input .section-title             { font-size: 12px; font-weight: 600; color: #657FAC; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }