/* Shared reading rule: text reads across a row. Move whole controls to the
   next row before compressing their labels. Keep long content wrappable. */
html, body, button, input, select, textarea { writing-mode: horizontal-tb; }
/* A field label and its full-width control occupy separate rows. Explicit
   tracks also prevent anonymous text from shrinking beside a select. */
#workplacePage .rp-form { grid-template-columns: minmax(0, 1fr); width: 100%; }
#workplacePage .rp-form details { min-width: 0; }
#workplacePage .rp-field { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
#workplacePage .rp-field > span, #workplacePage .rp-people summary { min-width: 0; width: 100%; word-break: normal; }
#workplacePage .rp-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
#workplacePage .rp-people label { display: grid; grid-template-columns: 20px minmax(0, 1fr); }
#otForm .ot-people-list { max-height: 300px; overflow: auto; }
#otForm [data-ot-person] { display: grid; grid-template-columns: 20px 40px minmax(0, 1fr); align-items: center; min-height: 44px; }
#otForm [data-ot-person][hidden] { display: none; }
#otForm [data-ot-person] input { flex: 0 0 20px; padding: 0; margin: 0; }
#otForm [data-ot-person] span { min-width: 0; overflow-wrap: anywhere; }
/* Support is a page above the workplace, below the persistent navigation.
   A modal top-layer dialog would make the visible navigation inert. */
#supportHoursDialog { position: fixed; z-index: 44; inset: 0 0 var(--concept-bottom,var(--tyc-nav-height,68px)); margin: 0; width: 100%; height: auto; max-height: none; border-radius: 0; }
@media (min-width: 1000px) { #supportHoursDialog { left: var(--concept-sidebar,240px); width: auto; bottom: 0; } }
:is(.wp-header, .list-toolbar, .chat-header, .rp-toolbar,
    .communication-dialog header, .account-access-dialog header,
    .support-hours-dialog header, .settings-panel > header,
    .friend-directory-header, .wp-list-title) {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}
:is(.wp-header, .list-toolbar, .chat-header, .rp-toolbar,
    .communication-dialog header, .account-access-dialog header,
    .support-hours-dialog header, .settings-panel > header,
    .friend-directory-header, .wp-list-title) > :is(h1, h2, h3, .chat-title-block) {
  flex: 1 0 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
:is(.wp-tabs, .wp-actions, .wp-form-footer, .conversation-tabs,
    .dialog-actions, .rp-actions, .rp-tabs, .communication-actions,
    .org-actions, .mention-navigation) { flex-wrap: wrap; min-width: 0; }
:is(.wp-header, .list-toolbar, .chat-header, .wp-tabs, .wp-actions,
    .wp-form-footer, .conversation-tabs, .dialog-actions, .rp-toolbar,
    .rp-actions, .rp-tabs, .communication-actions, .org-actions,
    .mention-navigation, .communication-dialog header,
    .account-access-dialog header, .support-hours-dialog header,
    .settings-panel > header, .friend-directory-header) > button {
  box-sizing: border-box;
  flex-shrink: 0;
  max-width: 100%;
  min-height: 44px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
/* Auto basis respects translated labels; flexible rows still fill spare space.
   Icon buttons, the five-root navigation and calendar cells keep their sizing. */
#workplacePage :is(.wp-tabs, .wp-actions, .wp-form-footer) > button,
.conversation-tabs > button, .dialog-actions > button { flex: 1 0 auto; }
.workspace-header.list-toolbar #newChatButton { flex: 0 0 auto; max-width: 100%; }
.workspace-header.list-toolbar { flex-wrap: wrap; }
#workplacePage .wp-header > h1 { flex: 1 0 auto; }
.wp-list-title > :is(h2, h3) { margin-block: 0; }
@media (max-width: 760px) {
  /* A long action must not steal the employee name's column. */
  .directory-person { grid-template-columns: 20px minmax(0, 1fr); }
  .directory-person-action { grid-column: 2; justify-self: start; max-width: 100%; }
}

/* Preserve complete actions inside the nested repair toolbar. */
#workplacePage .rp-toolbar > div { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; width: 100%; }
#workplacePage .rp-toolbar > div > button { flex: 1 1 12em; min-width: min(100%, 12em); max-width: 100%; min-height: 44px; white-space: normal; word-break: normal; overflow-wrap: anywhere; }
.hr-management-dialog .hr-person-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 12px; align-items: center; }
.hr-person-row > strong, .hr-person-row > span { min-width: 0; overflow-wrap: anywhere; }
.hr-person-row > strong { grid-column: 1; }
.hr-person-row > span { grid-column: 1; }
.hr-person-row > button { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; max-width: 9em; }
#selfDetailsForm label { display: grid; gap: 6px; margin-block: 12px; }
#selfDetailsForm :is(input,textarea) { min-width: 0; width: 100%; box-sizing: border-box; }
#otForm .ot-person-copy { display: grid; gap: 3px; text-align: start; }
#otForm .ot-person-copy small { font-size: .8rem; }

#selfDetailsDialog { position: fixed; z-index: 44; inset: 0 0 var(--concept-bottom,68px); margin: 0; width: 100%; height: auto; max-height: none; box-sizing: border-box; overflow: auto; border: 0; border-radius: 0; padding: 16px; background: var(--concept-bg,#f4f7fb); color: inherit; }
#selfDetailsDialog > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; position: sticky; top: -16px; z-index: 1; background: var(--concept-bg,#f4f7fb); padding-block: 8px; }
#selfDetailsDialog button { min-height: 44px; padding: 10px 16px; border-radius: 12px; border: 1px solid #d8e1e9; background: white; color: inherit; font: inherit; }
#selfDetailsForm { max-width: 720px; margin-inline: auto; padding: 16px; border-radius: 16px; background: white; }
#selfDetailsForm :is(input,textarea) { font: inherit; padding: 10px; min-height: 44px; border-radius: 10px; border: 1px solid #bbcbd7; }
#selfDetailsForm button[type=submit] { background: #047eac; color: white; width: 100%; }
@media (min-width: 1000px) { #selfDetailsDialog { left: var(--concept-sidebar,240px); width: auto; bottom: 0; } }
.workspace-panel #openCreateGroupButton {
  flex: 0 0 96px; min-height: 44px; padding: 2px 6px; font-size: 12px; line-height: 1.5;
  border: 1px solid var(--line); border-radius: 8px; background: #edf4ff;
  color: var(--accent-dark); white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
#createGroupDialog {
  box-sizing: border-box; width: min(680px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px); padding: 16px; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px;
}
#createGroupForm { display: grid; gap: 12px; min-width: 0; }
#createGroupForm header { display: flex; align-items: center; gap: 12px; }
#createGroupForm h2 { flex: 1; margin: 0; min-width: 0; }
#createGroupForm :is(h2, label, p, button) { white-space: normal; overflow-wrap: anywhere; }
#createGroupForm :is(input:not([type=checkbox]), button) { box-sizing: border-box; min-width: 0; min-height: 44px; max-width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
#createGroupForm button { background: #edf4ff; color: var(--accent-dark); cursor: pointer; }
#createGroupForm button[type=submit] { background: var(--accent); color: white; }
#createGroupForm button:disabled { opacity: .65; cursor: wait; }
#createGroupForm #groupOrganizationTree { max-height: 40dvh; overflow: auto; }
#createGroupForm #createGroupStatus { margin: 0; }
#createGroupForm .organization-employee-copy :is(strong, small) {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}