/* Alery 1.21.0 - final theme layer loaded after the legacy component styles. */
:root {
  --alery-header: 64px;
  --alery-sidebar: 226px;
  --alery-radius: 8px;
  --alery-control-radius: 6px;
  --alery-accent-soft: color-mix(in srgb, var(--red) 9%, var(--surface-raised));
  --alery-accent-border: color-mix(in srgb, var(--red) 24%, var(--line));
  --alery-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 24px rgba(17, 24, 39, .04);
}

/* Compact Dienstplan and aligned control rhythm for 1.22.0. */
.roster-workspace {
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 10px;
}

.roster-palette {
  max-height: calc(100dvh - 98px);
  padding: 8px;
  overflow-y: auto;
}

.roster-palette .panel-head {
  margin-bottom: 7px;
}

.roster-palette .eyebrow {
  display: none;
}

.roster-palette h2 {
  font-size: .9rem;
}

.roster-service-types {
  gap: 4px;
}

.roster-service-types button {
  min-height: 36px;
  padding: 3px 5px;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas: "code time";
  gap: 6px;
}

.roster-service-types button > span {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: .68rem;
}

.roster-service-types strong {
  display: none;
}

.roster-service-types small {
  align-self: center;
  overflow: hidden;
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-selection-hint {
  margin-top: 6px;
  padding: 5px;
  font-size: .66rem;
  line-height: 1.25;
}

.segmented {
  min-height: var(--control-height, 42px);
  align-items: stretch;
}

.segmented > button {
  min-height: calc(var(--control-height, 42px) - 8px);
  height: calc(var(--control-height, 42px) - 8px);
}

.period-navigation,
.toolbar > label :where(input, select),
.roster-toolbar > label :where(input, select) {
  min-height: var(--control-height, 42px);
  height: var(--control-height, 42px);
  box-sizing: border-box;
}

.period-navigation > .icon-button {
  width: var(--control-height, 42px);
  min-width: var(--control-height, 42px);
  min-height: var(--control-height, 42px);
  height: var(--control-height, 42px);
}

@media (max-width: 900px) {
  .roster-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .roster-palette {
    position: static;
    max-height: none;
    overflow: hidden;
  }

  .roster-service-types {
    display: grid;
    grid-auto-columns: 112px;
    grid-auto-flow: column;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .roster-selection-hint {
    display: none;
  }
}

/* Version 1.33.0: compact, aligned planning and administration controls. */
.roster-member-head > .roster-member-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.item-modal,
.admin-detail-modal,
.area-modal,
.notice-modal,
.calendar-link-modal {
  gap: 8px;
  width: min(780px, calc(100vw - 24px));
  padding: 12px;
}

.item-modal > .panel-head,
.admin-detail-modal > .panel-head,
.area-modal > .panel-head {
  margin-bottom: 4px;
}

.item-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
.admin-detail-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
.area-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
.admin-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select) {
  min-height: 34px;
  height: 34px;
  padding: 5px 8px;
  line-height: 1.2;
}

.item-modal :where(input[type="color"]),
.admin-detail-modal :where(input[type="color"]),
.area-modal :where(input[type="color"]) {
  width: 48px;
  min-height: 34px;
  height: 34px;
  padding: 3px;
}

.item-modal textarea,
.admin-detail-modal textarea,
.area-modal textarea {
  min-height: 58px;
  padding: 7px 8px;
}

.item-modal :where(label, fieldset),
.admin-detail-modal :where(label, fieldset),
.area-modal :where(label, fieldset),
.member-master-form :where(label, fieldset) {
  gap: 3px;
}

.service-type-editor {
  grid-template-columns: 44px repeat(4, minmax(110px, 1fr));
  gap: 7px 9px;
  align-items: end;
}

.service-type-editor > * {
  min-width: 0;
}

.service-type-editor .service-code-preview {
  width: 44px;
  height: 34px;
  align-self: end;
  border-radius: 6px;
}

.service-type-editor > label:has([name="color"]) {
  grid-column: 2;
}

.service-type-editor > label:has([name="textColor"]) {
  grid-column: 3;
}

.service-type-editor > label:has([name="activeUntil"]) {
  grid-column: 4;
}

.service-type-editor > label:has([name="active"]) {
  grid-column: 5;
}

.service-type-editor .individual-time-option {
  grid-column: 2 / -1;
  align-self: center;
  min-height: 34px;
}

.service-type-editor .individual-time-option span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.service-type-editor.has-individual-time .service-fixed-time {
  opacity: .48;
}

.service-default-requirements,
.service-type-editor .area-multi-select {
  padding: 8px 10px;
}

.service-default-requirements label,
.area-multi-select label {
  min-height: 34px;
}

.service-type-actions {
  gap: 7px;
}

.service-type-actions button {
  min-width: 118px;
  min-height: 36px;
  padding: 6px 12px;
}

.area-role-row {
  grid-template-columns: minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(120px, .65fr) auto;
  gap: 7px;
  align-items: end;
  padding-block: 7px;
}

.individual-service-time-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.individual-service-time-form .duration-field {
  grid-column: span 2;
}

.individual-service-time-form .form-wide {
  grid-column: 1 / -1;
}

/* Version 1.37.0: compact appointment configuration and document workflow. */
.appointment-type-admin-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.appointment-type-modal .admin-detail-form {
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  align-items: end;
}

.appointment-type-modal .area-multi-select,
.appointment-type-modal .appointment-reminders,
.appointment-type-modal .modal-actions {
  grid-column: 1 / -1;
}

.appointment-reminders {
  display: grid;
  gap: 8px;
  padding: 9px;
}

.appointment-reminder-row {
  display: grid;
  grid-template-columns: minmax(80px, .45fr) minmax(105px, .6fr) minmax(210px, 1.2fr) minmax(155px, .85fr) minmax(155px, .85fr) 34px;
  align-items: end;
  gap: 7px;
  margin: 0;
  padding: 8px;
}

.appointment-reminder-row .check-row {
  display: flex;
  min-height: 34px;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.appointment-reminder-row select[multiple] {
  height: 58px;
}

.appointment-reminder-row > .icon-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
}

@media (max-width: 760px) {
  .item-modal,
  .admin-detail-modal,
  .area-modal,
  .notice-modal,
  .calendar-link-modal {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    padding: 10px;
  }

  .item-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
  .admin-detail-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
  .area-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select) {
    min-height: 40px;
    height: 40px;
  }

  .service-type-editor,
  .individual-service-time-form,
  .area-role-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-type-editor .individual-time-option,
  .individual-service-time-form .duration-field,
  .individual-service-time-form .form-wide {
    grid-column: 1;
  }

  .service-type-editor > label:has([name="color"]),
  .service-type-editor > label:has([name="textColor"]),
  .service-type-editor > label:has([name="activeUntil"]),
  .service-type-editor > label:has([name="active"]) {
    grid-column: 1;
  }

  .service-type-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-type-admin-list,
  .appointment-type-modal .admin-detail-form,
  .appointment-reminder-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .appointment-reminder-row > .icon-button {
    justify-self: end;
  }
}

/* Version 1.43.0: readable role matrix and full-area PDF form studio. */
.role-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1460px, calc(100vw - 24px));
  height: min(940px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 12px;
}

.role-detail-modal > .panel-head {
  z-index: 5;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.role-detail-modal .role-editor {
  min-height: 0;
  overflow: auto;
  padding: 12px 4px 4px;
  scrollbar-gutter: stable;
}

.role-detail-modal .rights-editor {
  padding: 0;
  overflow: clip;
  border: 1px solid var(--line);
  background: var(--surface);
}

.role-detail-modal .rights-editor > h3 {
  position: sticky;
  z-index: 4;
  top: 0;
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: 0 3px 8px rgb(0 0 0 / 5%);
}

.role-detail-modal .rights-group {
  border-radius: 0;
  border-top: 1px solid var(--line);
}

.role-detail-modal .rights-group:first-of-type {
  border-top: 0;
}

.role-detail-modal .rights-group h4 {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}

.role-detail-modal .rights-table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-gutter: stable;
}

.role-detail-modal .role-rights-table,
.role-detail-modal .role-rights-table tbody,
.role-detail-modal .role-rights-table tr,
.role-detail-modal .role-rights-table th,
.role-detail-modal .role-rights-table td {
  display: revert;
}

.role-detail-modal .role-rights-table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.role-detail-modal .role-rights-table thead {
  display: table-header-group;
}

.role-detail-modal .role-rights-table tbody {
  display: table-row-group;
}

.role-detail-modal .role-rights-table tr {
  display: table-row;
  width: auto !important;
  padding: 0;
  border: 0;
}

.role-detail-modal .role-rights-table th,
.role-detail-modal .role-rights-table td {
  display: table-cell;
  width: auto !important;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.role-detail-modal .role-rights-table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  border-top: 0;
  background: var(--surface-subtle);
}

.role-detail-modal .role-rights-table th:first-child {
  position: sticky;
  z-index: 3;
  left: 0;
  width: 230px !important;
  min-width: 230px;
  background: var(--surface-raised);
  box-shadow: 1px 0 0 var(--line);
}

.role-detail-modal .role-rights-table thead th:first-child {
  z-index: 4;
  background: var(--surface-subtle);
}

.role-detail-modal .role-right-options {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 6px 8px;
}

.role-detail-modal .role-right-options .check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
  line-height: 1.25;
}

.role-detail-modal .modal-actions {
  position: sticky;
  z-index: 6;
  bottom: 0;
  margin: 12px -4px -4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: 0 -5px 14px rgb(0 0 0 / 7%);
}

.semantic-studio-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1800px, calc(100vw - 16px));
  height: calc(100dvh - 16px);
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  padding: 10px;
}

.semantic-studio-modal > .panel-head {
  z-index: 6;
  margin: 0;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.semantic-studio-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.semantic-studio-workspace {
  display: grid;
  grid-template-columns: minmax(420px, var(--semantic-preview-width, 56%)) 10px minmax(420px, 1fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding-top: 10px;
}

.semantic-studio-workspace.is-resizing {
  cursor: col-resize;
  user-select: none;
}

.semantic-studio-workspace .semantic-mapper-panel,
.semantic-studio-workspace .semantic-studio-config {
  position: relative;
  top: auto;
  align-self: stretch;
  height: 100%;
  max-height: none;
  min-height: 0;
}

.semantic-studio-workspace .semantic-mapper-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  border-radius: 7px 0 0 7px;
}

.semantic-studio-workspace .semantic-mapper-viewer {
  height: 100%;
  min-height: 0;
}

.semantic-studio-workspace .semantic-studio-config {
  border-radius: 0 7px 7px 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.semantic-studio-splitter {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 10px;
  min-width: 10px;
  height: 100%;
  min-height: 120px;
  padding: 0;
  touch-action: none;
  cursor: col-resize;
  border: 0;
  border-radius: 0;
  background: var(--surface-subtle);
  color: var(--muted);
}

.semantic-studio-splitter::before,
.semantic-studio-splitter::after,
.semantic-studio-splitter > span {
  position: absolute;
  width: 2px;
  height: 34px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.semantic-studio-splitter::before {
  transform: translateX(-3px);
}

.semantic-studio-splitter::after {
  transform: translateX(3px);
}

.semantic-studio-splitter:hover,
.semantic-studio-splitter:focus-visible,
.semantic-studio-workspace.is-resizing .semantic-studio-splitter {
  background: color-mix(in srgb, var(--red) 12%, var(--surface-subtle));
  color: var(--red);
  outline: 2px solid color-mix(in srgb, var(--red) 45%, transparent);
  outline-offset: -2px;
}

.semantic-studio-modal .modal-actions {
  position: relative;
  z-index: 7;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: none;
}

@media (max-width: 1180px) and (min-width: 768px) {
  .semantic-studio-workspace {
    grid-template-columns: minmax(300px, var(--semantic-preview-width, 52%)) 8px minmax(340px, 1fr);
  }

  .semantic-studio-splitter {
    width: 8px;
    min-width: 8px;
  }
}

@media (min-width: 761px) {
  .role-detail-modal .modal-actions {
    display: flex;
    align-items: center;
  }

  .role-detail-modal .modal-actions > button {
    width: auto;
  }
}

@media (max-width: 760px) {
  .role-detail-modal {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    padding: 8px;
  }

  .role-detail-modal .role-editor {
    padding: 9px 0 0;
  }

  .role-detail-modal .role-rights-table {
    min-width: 860px;
  }

  .role-detail-modal .role-rights-table th:first-child {
    width: 190px !important;
    min-width: 190px;
  }

  .role-detail-modal .role-right-options {
    grid-template-columns: repeat(4, minmax(145px, 1fr));
  }

  .role-detail-modal .modal-actions {
    margin-inline: 0;
  }
}

@media (max-width: 767px) {
  .semantic-studio-modal {
    display: block;
    width: calc(100vw - 8px);
    height: auto;
    max-height: calc(100dvh - 8px);
    overflow: auto;
    padding: 8px;
  }

  .semantic-studio-form {
    display: none;
  }
}

/* 1.46.0: hybrid PDF analysis and composite form controls */
.document-analysis-status,
.document-analysis-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.document-analysis-status > div,
.document-analysis-preview > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.document-analysis-status span,
.document-analysis-preview p,
.document-analysis-preview small {
  margin: 0;
  color: var(--muted);
}

.document-analysis-preview {
  border-left: 4px solid var(--green);
  background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.semantic-group-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .55fr) auto;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}

.semantic-composite-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
}

.semantic-composite-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--green) 8%, var(--surface));
  color: var(--ink);
  font-size: .78rem;
}

.semantic-composite-list b {
  color: var(--green);
  font-size: .68rem;
  text-transform: uppercase;
}

.document-context-field.document-composite {
  border-left: 3px solid var(--green);
  padding-left: 10px;
}

.document-context-field.document-composite:is(.multiChoice, .matrix) {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
}

.document-context-field.document-composite > legend {
  max-width: 100%;
  padding: 0 4px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.document-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.document-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
}

.document-option input,
.document-matrix-cell input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0;
}

.document-matrix-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
}

.document-matrix {
  min-width: max(540px, calc(150px + var(--matrix-columns) * 112px));
}

.document-matrix-head,
.document-matrix-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(var(--matrix-columns), minmax(104px, 1fr));
  align-items: stretch;
}

.document-matrix-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-subtle);
}

.document-matrix-head > span,
.document-matrix-row > :where(strong, label, .document-matrix-empty) {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 42px;
  padding: 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  overflow-wrap: anywhere;
}

.document-matrix-head > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.document-matrix-row > strong {
  justify-items: start;
  color: var(--ink);
  font-size: 11px;
  text-align: left;
}

.document-matrix-cell > span {
  display: none;
}

.document-matrix-cell input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
}

.document-context-field[hidden] {
  display: none;
}

@media (max-width: 980px) {
  .semantic-group-filter {
    grid-template-columns: 1fr 1fr;
  }

  .semantic-group-filter .check {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .document-option-grid {
    grid-template-columns: 1fr;
  }

  .document-matrix-scroll {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .document-matrix {
    display: grid;
    min-width: 0;
    gap: 7px;
  }

  .document-matrix-head {
    display: none;
  }

  .document-matrix-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
  }

  .document-matrix-row > strong {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0 0 4px;
    border: 0;
    font-size: 12px;
  }

  .document-matrix-row > :where(label, .document-matrix-empty) {
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 4px;
  }

  .document-matrix-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    text-align: left;
  }

  .document-matrix-cell:has(input[type="checkbox"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .document-matrix-cell > span {
    display: block;
    width: 100%;
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    text-align: left;
    overflow-wrap: anywhere;
  }
}

/* Version 1.44.0: manually detected PDF fields. */
.semantic-mapper-toolbar .semantic-add-field {
  width: auto;
  min-height: 34px;
  padding: 6px 10px;
  white-space: nowrap;
}

.semantic-mapper-toolbar .semantic-add-field.active {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.semantic-mapper-legend .manual::before {
  background: #087865;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #087865;
}

.semantic-mapper-viewer.manual-field-mode,
.semantic-mapper-viewer.manual-field-mode .document-map-page,
.semantic-mapper-viewer.manual-field-mode .document-map-page > canvas {
  cursor: crosshair;
}

.document-map-field-draft {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  border: 2px solid var(--red);
  border-radius: 3px;
  background: rgb(235 0 60 / 16%);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 80%);
}

.document-map-field-marker.manual {
  z-index: 8;
  min-width: 8px;
  min-height: 8px;
  pointer-events: auto;
  touch-action: none;
  cursor: move;
  border: 2px solid #087865;
  border-radius: 3px;
  background: rgb(8 120 101 / 14%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 80%);
}

.document-map-field-marker.manual > span {
  position: absolute;
  top: -19px;
  left: -2px;
  max-width: 210px;
  overflow: hidden;
  padding: 2px 5px;
  border-radius: 3px 3px 0 0;
  background: #087865;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-map-field-resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  padding: 0;
  touch-action: none;
  cursor: nwse-resize;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #087865;
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.manual-field-assignment {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid #087865;
  border-radius: 7px;
  background: color-mix(in srgb, #087865 7%, var(--surface-raised));
  box-shadow: 0 8px 22px rgb(0 29 92 / 12%);
}

.manual-field-assignment .panel-head {
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--line);
}

.manual-field-assignment .panel-head p:last-child {
  color: var(--muted);
  font-size: 11px;
}

.manual-field-assignment-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(150px, .8fr) minmax(180px, 1fr);
  gap: 9px;
}

.manual-field-assignment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.semantic-field-card.manual-field {
  border-left: 4px solid #087865;
}

.semantic-field-card.manual-field .semantic-field-title small {
  color: #087865;
  font-weight: 800;
}

@media (max-width: 1180px) and (min-width: 768px) {
  .semantic-mapper-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .semantic-mapper-toolbar .panel-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .manual-field-assignment-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Version 1.44.1: detected PDF fields that still need editor mapping. */
.semantic-mapper-legend .unmapped::before {
  background: #d37b00;
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #d37b00;
}

.document-unmapped-fields {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid #d37b00;
  border-left-width: 4px;
  border-radius: 7px;
  background: color-mix(in srgb, #d37b00 7%, var(--surface-raised));
}

.document-unmapped-fields.complete {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border-color: #087865;
  background: color-mix(in srgb, #087865 6%, var(--surface-raised));
}

.document-unmapped-fields.complete span,
.document-unmapped-fields .panel-head p {
  color: var(--muted);
  font-size: 11px;
}

.document-unmapped-list {
  display: grid;
  gap: 6px;
}

.document-unmapped-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-raised);
}

.document-unmapped-list article > span {
  display: grid;
  min-width: 0;
}

.document-unmapped-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-unmapped-list button {
  width: auto;
  min-height: 34px;
  padding: 6px 9px;
}

.document-map-field-marker.unmapped {
  z-index: 7;
  border: 2px dashed #d37b00;
  background: rgb(211 123 0 / 15%);
}

.document-map-field-marker.unmapped > span {
  position: absolute;
  top: -19px;
  left: -2px;
  max-width: 220px;
  overflow: hidden;
  padding: 2px 5px;
  border-radius: 3px 3px 0 0;
  background: #9a5700;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.semantic-field-card:has(.semantic-field-title small:first-child:last-child) {
  min-width: 0;
}

@media (max-width: 900px) and (min-width: 768px) {
  .document-unmapped-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-unmapped-list button {
    width: 100%;
  }
}

/* Wissen und Assistent */
.knowledge-workspace {
  display: grid;
  gap: 12px;
}

.knowledge-library,
.knowledge-assistant-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #d9deea);
  border-radius: 8px;
  padding: 16px;
}

.knowledge-library-head,
.knowledge-answer-head,
.knowledge-editor-basics,
.knowledge-reader-actions,
.knowledge-reader-section-head,
.knowledge-editor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.knowledge-library-head h2,
.knowledge-library-head p {
  margin: 0;
}

.knowledge-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.knowledge-card,
.knowledge-progress-row,
.knowledge-admin-list > button,
.knowledge-citations button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--ink, #101528);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #d9deea);
  border-radius: 8px;
  padding: 12px;
}

.knowledge-card:hover,
.knowledge-progress-row:hover,
.knowledge-admin-list > button:hover,
.knowledge-citations button:hover {
  border-color: var(--red, #eb003c);
  background: color-mix(in srgb, var(--red, #eb003c) 4%, var(--surface, #fff));
}

.knowledge-card-icon,
.knowledge-answer-head > .app-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #087f6b;
  border-radius: 7px;
}

.knowledge-card-icon .app-icon,
.knowledge-answer-head > .app-icon {
  width: 21px;
  height: 21px;
}

.knowledge-card span:nth-child(2),
.knowledge-progress-row span:first-child,
.knowledge-admin-list button > span:nth-child(2),
.knowledge-citations button span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.knowledge-card small,
.knowledge-progress-row small,
.knowledge-admin-list small,
.knowledge-citations span {
  color: var(--muted, #687083);
}

.knowledge-card-progress,
.knowledge-progress-meter {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  background: #e7eaf0;
  border-radius: 3px;
}

.knowledge-card-progress b,
.knowledge-progress-meter i {
  display: block;
  height: 100%;
  background: #087f6b;
}

.knowledge-question-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.knowledge-question-form label {
  grid-column: 1 / -1;
}

.knowledge-question-form textarea {
  min-height: 86px;
  resize: vertical;
}

.knowledge-question-form button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.knowledge-assistant-empty,
.knowledge-answer {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line, #d9deea);
  border-left: 4px solid #087f6b;
  border-radius: 6px;
}

.knowledge-assistant-empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.knowledge-answer-text {
  margin: 14px 0;
  line-height: 1.6;
}

.knowledge-citations,
.knowledge-progress-list,
.knowledge-admin-list,
.knowledge-reader-sections,
.knowledge-editor-sections {
  display: grid;
  gap: 8px;
}

.knowledge-citations button {
  grid-template-columns: minmax(0, 1fr);
  padding: 9px 10px;
}

.knowledge-progress-row {
  grid-template-columns: minmax(170px, 1fr) minmax(100px, 240px) 52px;
}

.knowledge-admin-list > button {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.knowledge-status {
  min-width: 78px;
  padding: 5px 7px;
  border-radius: 5px;
  text-align: center;
  font-size: .76rem;
  font-weight: 800;
  color: #374151;
  background: #e7eaf0;
}

.knowledge-status.published { color: #066250; background: #d7f2eb; }
.knowledge-status.archived { color: #6b7280; background: #eceef2; }

.knowledge-editor-modal,
.knowledge-reader-modal {
  width: min(1040px, calc(100vw - 24px));
}

.knowledge-reader-actions {
  margin: 8px 0 12px;
}

.knowledge-reader-actions .knowledge-progress-meter {
  max-width: 320px;
}

.knowledge-reader-section,
.knowledge-editor-section {
  scroll-margin-top: 12px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  padding: 13px;
  background: var(--surface, #fff);
}

.knowledge-reader-section.complete {
  border-left: 4px solid #087f6b;
}

.knowledge-reader-section h3,
.knowledge-reader-section p {
  margin: 8px 0;
}

.knowledge-checklist {
  display: grid;
  gap: 6px;
  padding: 10px;
  background: color-mix(in srgb, #087f6b 8%, var(--surface, #fff));
  border-radius: 6px;
}

.knowledge-checklist span {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.knowledge-checklist .app-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  color: #087f6b;
}

.knowledge-section-feedback {
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.knowledge-editor-form,
.knowledge-editor-section {
  display: grid;
  gap: 10px;
}

.knowledge-editor-basics > label {
  flex: 1;
}

.knowledge-bulk-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, #087f6b 35%, var(--line, #d9deea));
  border-left: 4px solid #087f6b;
  border-radius: 7px;
  background: color-mix(in srgb, #087f6b 7%, var(--surface, #fff));
}

.knowledge-bulk-review > div {
  display: grid;
  gap: 3px;
}

.knowledge-bulk-review p,
.knowledge-bulk-review strong,
.knowledge-bulk-review small {
  margin: 0;
}

.knowledge-bulk-review small {
  color: var(--muted, #687083);
}

.knowledge-bulk-review button {
  min-width: 250px;
}

.knowledge-bulk-review .app-icon {
  width: 18px;
  height: 18px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 760px) {
  .knowledge-library,
  .knowledge-assistant-panel {
    padding: 10px;
  }

  .knowledge-card-grid,
  .knowledge-question-form,
  .knowledge-progress-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-question-form button,
  .knowledge-progress-row > b {
    width: 100%;
  }

  .knowledge-library-head,
  .knowledge-editor-basics,
  .knowledge-reader-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .knowledge-reader-modal,
  .knowledge-editor-modal {
    width: calc(100vw - 10px);
  }

  .knowledge-section-feedback {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-bulk-review {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-bulk-review button {
    width: 100%;
    min-width: 0;
  }
}


/* 1.53.0: Kapitelwissen und bereichsbezogenes Fachadressbuch */
.knowledge-editor-modal,
.knowledge-reader-modal {
  width: min(1420px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
}

.knowledge-document-layout {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 12px;
  min-height: 420px;
  align-items: start;
}

.knowledge-toc {
  position: sticky;
  top: 0;
  display: grid;
  gap: 9px;
  min-width: 0;
  max-height: min(68dvh, 780px);
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  background: #f7f8fb;
}

.knowledge-toc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--line, #d9deea);
}

.knowledge-toc-head > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #087f6b;
  border-radius: 6px;
}

.knowledge-toc-head > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.knowledge-toc-head small,
.knowledge-chapter-head small {
  color: var(--muted, #687083);
}

.knowledge-toc-list {
  display: grid;
  gap: 3px;
  overflow: auto;
  padding-right: 3px;
}

.knowledge-toc-list button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 8px 8px calc(8px + var(--chapter-level, 0) * 12px);
  color: var(--ink, #101528);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}

.knowledge-toc-list button:hover,
.knowledge-toc-list button.active {
  border-color: color-mix(in srgb, #087f6b 38%, var(--line, #d9deea));
  background: #fff;
}

.knowledge-toc-list button.active {
  box-shadow: inset 3px 0 #087f6b;
}

.knowledge-toc-list button.ancestor {
  color: #075f51;
  background: rgb(8 127 107 / 7%);
}

.knowledge-toc-list button > span,
.knowledge-toc-list button > small {
  color: var(--muted, #687083);
  font-size: .75rem;
}

.knowledge-toc-list button > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.knowledge-chapter-content {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.knowledge-chapter-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line, #d9deea);
  border-left: 4px solid #087f6b;
  border-radius: 7px;
  background: var(--surface, #fff);
}

.knowledge-chapter-head h3,
.knowledge-chapter-head p {
  margin: 0;
}

.knowledge-chapter-pager {
  display: flex;
  gap: 7px;
  flex: 0 0 auto;
}

.knowledge-contact-search,
.knowledge-contact-import {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(190px, .45fr) auto;
  align-items: end;
  gap: 10px;
  margin: 12px 0;
}

.knowledge-contact-import {
  grid-template-columns: minmax(250px, .7fr) minmax(320px, 1fr) auto;
}

.knowledge-contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 9px;
}

.knowledge-contact-card {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  background: var(--surface, #fff);
}

.knowledge-contact-title {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.knowledge-contact-title > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #000548;
  border-radius: 6px;
}

.knowledge-contact-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.knowledge-contact-title small {
  color: var(--muted, #687083);
}

.knowledge-contact-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.knowledge-contact-topics span {
  padding: 4px 7px;
  color: #066250;
  font-size: .78rem;
  font-weight: 700;
  background: #d7f2eb;
  border-radius: 5px;
}

.knowledge-contact-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 6px;
}

.knowledge-contact-details > a,
.knowledge-contact-details > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  color: var(--ink, #101528);
  text-decoration: none;
  background: #f7f8fb;
  border-radius: 5px;
}

.knowledge-contact-details > a:hover {
  box-shadow: inset 0 0 0 1px #087f6b;
}

.knowledge-contact-details strong {
  color: var(--muted, #687083);
  font-size: .72rem;
  text-transform: uppercase;
}

.knowledge-contact-details span {
  overflow-wrap: anywhere;
}

.knowledge-contact-card > p {
  margin: 0;
  color: var(--muted, #687083);
}

@media (max-width: 820px) {
  .knowledge-document-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-toc {
    position: static;
    max-height: 280px;
  }

  .knowledge-chapter-head {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .knowledge-chapter-pager,
  .knowledge-chapter-pager button {
    width: 100%;
  }

  .knowledge-contact-search,
  .knowledge-contact-import,
  .knowledge-contact-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-contact-search button,
  .knowledge-contact-import button {
    width: 100%;
  }
}

/* 1.39.0: context-sensitive editor for dense PDF tables */
.document-modal:not(.document-admin-modal) {
  width: min(1420px, calc(100vw - 20px));
}

.document-context-workspace {
  display: grid;
  grid-template-columns: minmax(520px, 1.55fr) minmax(320px, .8fr);
  gap: 10px;
  min-width: 0;
  align-items: start;
}

.document-context-workspace .document-pdf-viewer {
  max-height: min(70dvh, 860px);
}

.document-context-editor {
  position: sticky;
  top: 0;
  display: grid;
  min-width: 0;
  max-height: min(70dvh, 860px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.document-section-navigator {
  position: sticky;
  top: 0;
  z-index: 12;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.document-section-navigator > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 7px 11px;
  cursor: pointer;
  list-style: none;
}

.document-section-navigator > summary::-webkit-details-marker {
  display: none;
}

.document-section-navigator > summary > span {
  display: grid;
  min-width: 0;
}

.document-section-navigator > summary small,
.document-section-navigator > summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-section-navigator > summary small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.document-section-navigator > summary strong {
  color: var(--navy);
  font-size: 14px;
}

.document-section-navigator > summary em {
  min-width: 42px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--navy);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
}

.document-section-navigator > summary .app-icon {
  transition: transform 160ms ease;
}

.document-section-navigator[open] > summary .app-icon {
  transform: rotate(180deg);
}

.document-section-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  left: 8px;
  z-index: 14;
  max-height: min(58dvh, 520px);
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgb(0 0 0 / 20%);
}

.document-section-menu-head {
  display: grid;
  gap: 2px;
  padding: 11px 12px 9px;
  border-bottom: 1px solid var(--line);
}

.document-section-menu-head span {
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
}

.document-section-menu-head small {
  color: var(--muted);
  font-size: 11px;
}

.document-section-list {
  display: grid;
  gap: 5px;
  padding: 7px;
}

.document-section-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--navy);
  text-align: left;
}

.document-section-option:hover,
.document-section-option.active {
  border-color: var(--line-strong);
  background: var(--surface-subtle);
}

.document-section-option > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.document-section-option strong,
.document-section-option small,
.document-section-option em {
  overflow-wrap: anywhere;
}

.document-section-option strong {
  font-size: 12px;
}

.document-section-option small {
  color: var(--muted);
  font-size: 10px;
}

.document-section-option em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.document-section-option > b {
  color: var(--muted);
  font-size: 10px;
}

.document-section-marker {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.document-section-option.status-progress .document-section-marker {
  border: 6px solid var(--navy);
}

.document-section-option.status-complete .document-section-marker {
  border-color: var(--green);
  background: var(--green);
}

.document-section-option.status-complete .document-section-marker::after {
  content: "\2713";
}

.document-section-option.status-required .document-section-marker {
  border-color: var(--red);
  background: var(--red);
}

.document-section-option.status-required .document-section-marker::after {
  content: "!";
}

.document-context-empty {
  display: grid;
  gap: 5px;
  padding: 20px;
  color: var(--muted);
}

.document-context-empty strong {
  color: var(--navy);
}

.document-context-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.document-context-head h3,
.document-context-head p {
  margin: 0;
}

.document-context-head h3 {
  margin-top: 2px;
  color: var(--navy);
  font-size: 18px;
}

.document-context-head span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.document-context-description {
  margin-top: 5px !important;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.document-context-voice {
  flex: 0 0 auto;
}

.document-context-crop {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 10px 12px 0;
  padding: 7px;
  overflow: hidden;
  border: 2px solid var(--red);
  border-radius: 5px;
  background: #fff;
}

.document-context-crop > span {
  color: #30343f;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

#documentContextCrop {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background: #fff;
}

.document-context-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
  padding: 12px;
}

.document-context-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle);
}

.document-context-field > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.document-context-field > em {
  color: var(--red);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
}

.document-context-field > small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.document-context-fields.kind-matrix .document-context-field.checkbox {
  background: color-mix(in srgb, var(--surface-subtle) 86%, var(--red) 14%);
}

.document-context-fields.kind-record {
  padding: 9px;
  border: 7px solid var(--surface-subtle);
  border-radius: 7px;
}

.document-context-fields.kind-timeline .document-context-field {
  border-left: 4px solid var(--red);
}

.document-original-toggle {
  display: none;
}

/* 1.40.0: semantic document studio */
.semantic-studio-modal {
  width: min(1180px, calc(100vw - 20px));
}

.semantic-studio-intro,
.semantic-studio-basics,
.semantic-section-row,
.semantic-group-settings,
.semantic-field-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.semantic-studio-intro {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: 11px 13px;
  border-left: 4px solid var(--red);
  background: var(--surface-subtle);
}

.semantic-studio-intro div {
  display: grid;
  gap: 2px;
}

.semantic-studio-intro span:not(.document-status-badge) {
  color: var(--muted);
  font-size: 12px;
}

.semantic-studio-basics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.semantic-sections,
.semantic-groups {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.semantic-sections h3,
.semantic-groups h3,
.semantic-groups .panel-head p {
  margin: 0;
}

.semantic-section-row {
  grid-template-columns: minmax(170px, .7fr) minmax(220px, 1.3fr);
}

.semantic-group-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.semantic-group-card.needs-review,
.semantic-field-card.needs-review {
  border-color: color-mix(in srgb, var(--red) 60%, var(--line));
}

.semantic-group-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  background: var(--surface-subtle);
}

.semantic-group-card > summary::-webkit-details-marker {
  display: none;
}

.semantic-group-card > summary span {
  display: grid;
  min-width: 0;
}

.semantic-group-card > summary small {
  color: var(--muted);
  font-size: 10px;
}

.semantic-group-card > summary b {
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
}

.semantic-group-card.needs-review > summary b {
  background: var(--red);
}

.semantic-group-settings {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.semantic-group-settings .check {
  align-self: end;
}

.semantic-group-fields {
  display: grid;
  gap: 7px;
  padding: 9px;
}

.semantic-field-card {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr);
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.semantic-field-title {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.semantic-field-title strong,
.semantic-field-title small {
  overflow-wrap: anywhere;
}

.semantic-field-title small {
  color: var(--muted);
  font-size: 10px;
}

.semantic-field-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 1.41.0: visual PDF field mapper */
.semantic-studio-modal {
  width: min(1680px, calc(100vw - 20px));
  max-height: calc(100dvh - 18px);
}

.semantic-editor-device-warning {
  display: none;
}

.semantic-studio-workspace {
  display: grid;
  grid-template-columns: minmax(460px, 1.08fr) minmax(500px, .92fr);
  gap: 12px;
  min-height: 0;
}

.semantic-mapper-panel,
.semantic-studio-config {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
}

.semantic-mapper-panel {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  grid-template-rows: auto auto minmax(320px, 1fr);
  overflow: hidden;
  max-height: 73dvh;
}

.semantic-mapper-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}

.semantic-mapper-toolbar > div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.semantic-mapper-toolbar span {
  color: var(--muted);
  font-size: 10px;
}

.semantic-mapper-toolbar .panel-actions {
  flex-wrap: nowrap;
}

.semantic-mapper-toolbar .icon-button {
  min-width: 34px;
  min-height: 34px;
}

.semantic-mapper-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  padding: 7px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.semantic-mapper-legend span::before {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 2px;
  background: #0a9f82;
  content: "";
}

.semantic-mapper-legend .review::before {
  background: #e58b00;
}

.semantic-mapper-legend .collision::before {
  background: var(--red);
}

.semantic-mapper-viewer {
  display: grid;
  justify-items: center;
  gap: 16px;
  overflow: auto;
  min-height: 320px;
  padding: 12px;
  background: #d9dde5;
}

.document-map-page {
  position: relative;
  flex: 0 0 auto;
  overflow: visible;
  background: #fff;
  box-shadow: 0 4px 18px rgb(0 0 0 / 16%);
}

.document-map-page > canvas {
  display: block;
}

.document-map-page-label {
  position: absolute;
  right: 5px;
  bottom: 4px;
  z-index: 6;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgb(0 0 0 / 68%);
  color: #fff;
  font-size: 9px;
}

.document-map-field-marker {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  pointer-events: none;
  border: 1px dashed rgb(0 29 92 / 48%);
  background: rgb(0 79 159 / 7%);
}

.document-map-frame {
  position: absolute;
  z-index: 4;
  box-sizing: border-box;
  min-width: 12px;
  min-height: 12px;
  touch-action: none;
  cursor: move;
  border: 2px solid #0a9f82;
  border-radius: 4px;
  background: rgb(10 159 130 / 9%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 72%);
}

.document-map-frame.review {
  border-color: #d37b00;
  background: rgb(229 139 0 / 10%);
}

.document-map-frame.collision {
  z-index: 5;
  border-color: var(--red);
  background: rgb(235 0 60 / 15%);
  box-shadow: 0 0 0 3px rgb(235 0 60 / 18%);
}

.document-map-frame.active,
.document-map-frame.moving {
  z-index: 7;
  box-shadow: 0 0 0 3px rgb(0 29 92 / 22%);
}

.document-map-frame > span {
  position: absolute;
  top: -20px;
  left: -2px;
  max-width: 230px;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: 4px 4px 0 0;
  background: #087865;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-map-frame.review > span {
  background: #a85f00;
}

.document-map-frame.collision > span {
  background: var(--red);
}

.document-map-resize {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  touch-action: none;
  cursor: nwse-resize;
  border: 2px solid #fff;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 1px 4px rgb(0 0 0 / 28%);
  color: inherit;
}

.semantic-studio-config {
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  max-height: 73dvh;
  padding: 10px;
}

.semantic-groups-list {
  display: grid;
  gap: 8px;
}

.semantic-group-fields.drop-target {
  outline: 2px solid var(--red);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--surface) 88%, var(--red) 12%);
}

.semantic-group-empty {
  display: none;
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.semantic-group-fields:not(:has(.semantic-field-card)) .semantic-group-empty {
  display: block;
}

.semantic-field-card {
  grid-template-columns: 28px minmax(120px, .38fr) minmax(0, 1.62fr);
}

.semantic-field-card.dragging {
  opacity: .48;
}

.semantic-field-drag {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  min-height: 42px;
  padding: 0;
  cursor: grab;
  border: 1px solid var(--line);
  background: var(--surface-subtle);
  color: var(--muted);
}

.semantic-field-drag:active {
  cursor: grabbing;
}

.semantic-field-drag .app-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 1180px) and (min-width: 768px) {
  .semantic-studio-workspace {
    grid-template-columns: minmax(360px, .9fr) minmax(400px, 1.1fr);
  }

  .semantic-field-card {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .semantic-field-card .semantic-field-grid {
    grid-column: 2;
  }
}

@media (max-width: 767px) {
  .semantic-editor-device-warning {
    display: grid;
    gap: 5px;
    padding: 13px;
    border-left: 4px solid var(--red);
    background: var(--surface-subtle);
  }

  .semantic-editor-device-warning p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
  }

  .semantic-studio-form {
    display: none;
  }

  .semantic-studio-modal {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
  }
}

.document-context-control {
  position: relative;
  display: grid;
  min-width: 0;
}

.document-context-control :where(input:not([type="checkbox"]), select, textarea) {
  width: 100%;
  min-width: 0;
}

.document-context-control textarea {
  min-height: 70px;
  resize: vertical;
}

.document-context-field.checkbox {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 44px;
}

.document-context-field.checkbox .document-context-control {
  place-items: center;
}

.document-context-field.checkbox input {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0;
}

.document-context-control .document-overlay-dictate {
  right: 5px;
  width: 26px;
  height: 26px;
}

.document-context-control:has(.document-overlay-dictate) input,
.document-context-control:has(.document-overlay-dictate) textarea {
  padding-right: 38px;
}

.document-context-actions {
  display: grid;
  grid-template-columns: auto minmax(64px, 1fr) minmax(150px, auto);
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-subtle);
}

.document-context-actions > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.document-context-actions button {
  min-height: 36px;
}

.document-context-hotspot {
  position: absolute;
  z-index: 3;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  pointer-events: auto;
  border: 2px solid rgb(235 0 60 / 18%);
  border-radius: 4px;
  background: rgb(235 0 60 / 5%);
  color: #fff;
}

.document-context-hotspot > span {
  position: absolute;
  right: -7px;
  bottom: -7px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
  font-size: 10px;
  font-weight: 900;
}

.document-context-hotspot:hover,
.document-context-hotspot:focus-visible,
.document-context-hotspot.active {
  border-color: var(--red);
  background: rgb(235 0 60 / 11%);
  outline: 0;
}

@media (max-width: 1050px) {
  .document-context-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-context-workspace .document-pdf-viewer {
    max-height: 44dvh;
  }

  .document-context-editor {
    position: relative;
    max-height: none;
  }

  .semantic-studio-basics,
  .semantic-group-settings,
  .semantic-field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .document-modal:not(.document-admin-modal) {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
    padding: 8px;
  }

  .document-fill-form {
    gap: 8px;
  }

  .document-context-workspace {
    position: relative;
    gap: 0;
  }

  .document-context-workspace .document-pdf-viewer {
    display: none;
    justify-items: center;
    max-height: 48dvh;
    padding: 5px;
    border-radius: 7px;
  }

  .document-context-workspace.show-original .document-pdf-viewer {
    display: grid;
  }

  .document-original-toggle {
    display: inline-flex;
  }

  .document-context-editor {
    z-index: 4;
    margin-top: 0;
    border-radius: 14px 14px 7px 7px;
    box-shadow: 0 -8px 22px rgb(0 0 0 / 16%);
  }

  .document-context-editor::before {
    content: "";
    width: 42px;
    height: 4px;
    margin: 7px auto 0;
    border-radius: 2px;
    background: var(--line);
  }

  .document-section-navigator > summary {
    min-height: 50px;
    padding-inline: 10px;
  }

  .document-section-navigator[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    background: rgb(0 0 0 / 32%);
  }

  .document-section-navigator[open] > summary {
    position: relative;
    z-index: 14;
  }

  .document-section-menu {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    max-height: min(72dvh, 620px);
    border-radius: 14px 14px 0 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  .document-context-head {
    padding: 8px 10px;
  }

  .document-context-head h3 {
    font-size: 16px;
  }

  .document-context-head .document-context-voice {
    width: 36px;
    min-width: 36px;
    padding-inline: 0;
    overflow: hidden;
    font-size: 0;
  }

  .document-context-head .document-context-voice .app-icon {
    width: 17px;
    height: 17px;
  }

  .document-context-crop {
    margin: 7px 9px 0;
  }

  .document-context-fields {
    gap: 5px;
    padding: 9px;
  }

  .document-context-field {
    padding: 6px;
  }

  .document-context-actions {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 8px 9px;
  }

  .document-context-actions > span {
    display: none;
  }

  .document-context-actions button:first-child {
    width: 38px;
    min-width: 38px;
    padding-inline: 0;
    overflow: hidden;
    font-size: 0;
  }

  .document-context-actions button:first-child .app-icon {
    width: 17px;
    height: 17px;
  }

  .document-context-actions button:last-child {
    width: 100%;
  }

  .semantic-studio-intro,
  .semantic-studio-basics,
  .semantic-section-row,
  .semantic-group-settings,
  .semantic-field-card,
  .semantic-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .semantic-studio-intro {
    align-items: start;
  }
}

@media (max-width: 420px) {
  .document-context-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 1.19.0: Dienstplan-Zentrale und Chat-Hinweise */
.tabs > button {
  position: relative;
}

.nav-badge {
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

.live-chat-alert {
  position: fixed;
  z-index: 1300;
  top: 78px;
  right: 24px;
  width: min(390px, calc(100vw - 32px));
  min-height: 68px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius: 7px;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 14px 38px rgb(0 0 0 / 20%);
  text-align: left;
  animation: live-chat-enter 220ms ease-out;
}

.live-chat-alert > svg {
  width: 24px;
  height: 24px;
  color: var(--red);
}

.live-chat-alert span,
.live-chat-alert strong,
.live-chat-alert small {
  min-width: 0;
  display: block;
}

.live-chat-alert small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes live-chat-enter {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.overview-chat-notice {
  margin-bottom: 16px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(190px, .34fr) minmax(0, 1fr);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--red) 30%, var(--line));
}

.overview-chat-notice-head {
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--red) 7%, var(--surface-raised));
}

.overview-chat-notice-head h2 {
  margin: 2px 0 0;
  font-size: 17px;
}

.overview-chat-notice-list {
  padding: 7px;
  display: grid;
}

.overview-chat-notice-list button {
  min-width: 0;
  min-height: 54px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px 18px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.overview-chat-notice-list button:last-child {
  border-bottom: 0;
}

.overview-chat-notice-list button > span:not(.chat-avatar),
.overview-chat-notice-list strong,
.overview-chat-notice-list small {
  min-width: 0;
  display: block;
}

.overview-chat-notice-list small {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-chat-notice-list button > b {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
}

.roster-shell {
  display: grid;
  gap: 14px;
}

.roster-toolbar {
  padding: 12px;
  display: grid;
  grid-template-columns: auto auto minmax(170px, 230px) auto minmax(280px, 1fr);
  align-items: end;
  gap: 10px;
}

.roster-view-switch button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.roster-view-switch svg {
  width: 17px;
  height: 17px;
}

.roster-toolbar label {
  min-width: 0;
}

.roster-toolbar input {
  width: 100%;
}

.roster-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(75px, 1fr));
  align-self: stretch;
  gap: 6px;
}

.roster-summary span {
  min-width: 0;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.roster-summary b {
  color: var(--ink);
  font-size: 18px;
}

.roster-summary .staffed {
  border-color: color-mix(in srgb, #138a55 40%, var(--line));
  background: color-mix(in srgb, #138a55 7%, var(--surface-raised));
}

.roster-summary .understaffed {
  border-color: color-mix(in srgb, var(--red) 40%, var(--line));
  background: color-mix(in srgb, var(--red) 7%, var(--surface-raised));
}

.roster-workspace {
  min-width: 0;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.roster-palette,
.roster-main {
  min-width: 0;
  padding: 14px;
}

.roster-palette {
  position: sticky;
  top: 78px;
}

.roster-service-types {
  display: grid;
  gap: 7px;
}

.roster-service-types button {
  min-width: 0;
  min-height: 52px;
  padding: 7px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "code name"
    "code time";
  gap: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: element;
  text-align: left;
}

.roster-service-types button.selected {
  border-color: var(--red);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 16%, transparent);
}

.roster-service-types button > span {
  grid-area: code;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 6px;
  background: var(--service-color);
  color: var(--service-text);
  font-weight: 800;
}

.roster-service-types strong { grid-area: name; align-self: end; }
.roster-service-types small { grid-area: time; color: var(--muted); }
.roster-selection-hint {
  margin: 10px 0 0;
  padding: 8px;
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}

.roster-board-head {
  margin-bottom: 11px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.roster-board-head h2,
.roster-board-head p {
  margin: 0;
}

.roster-board-head > p {
  color: var(--muted);
  font-size: 13px;
}

.roster-board {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.roster-day-column {
  min-height: 430px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  transition: border-color 150ms, background 150ms;
}

.roster-day-column.drop-target,
.roster-member-cell.drop-target {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, var(--surface-soft));
  box-shadow: inset 0 0 0 1px var(--red);
}

.roster-day-column > header {
  min-height: 70px;
  padding: 4px;
  display: grid;
  align-content: start;
  gap: 1px;
}

.roster-day-column > header span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
}

.roster-day-column > header strong {
  font-size: 18px;
}

.roster-day-column > header b {
  width: fit-content;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.roster-day-column > header b.understaffed {
  color: var(--red);
}

.roster-day-column > header b.staffed {
  color: #138a55;
}

.roster-day-services {
  display: grid;
  align-content: start;
  gap: 7px;
}

.roster-day-services > p {
  margin: 8px 3px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.roster-service-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-left: 4px solid var(--service-color);
  border-radius: 6px;
  background: var(--surface-raised);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.roster-service-card.dragging,
.roster-service-types button.dragging {
  opacity: .5;
}

.roster-service-card > button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 6px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 10px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.roster-service-card > button > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--service-color);
  color: var(--service-text);
  font-size: 10px;
  font-weight: 800;
}

.roster-service-card > button div,
.roster-service-card > button strong,
.roster-service-card > button small {
  min-width: 0;
  display: block;
}

.roster-service-card > button strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-service-card > button small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}

.roster-assigned {
  padding: 0 6px 6px;
  display: grid;
  gap: 3px;
}

.roster-assigned span {
  padding: 3px 5px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--surface-soft);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-assigned .empty {
  color: var(--muted);
  font-style: italic;
}

.roster-missing {
  padding: 5px 7px;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
  color: #138a55;
  font-size: 10px;
}

.roster-missing span,
.roster-missing b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-missing span {
  color: var(--muted);
  font-weight: 400;
}

.roster-service-card.understaffed .roster-missing {
  color: var(--red);
}

.roster-add-service {
  width: 100%;
  min-height: 38px;
  margin-top: auto;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px dashed var(--line-strong);
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
}

.roster-add-service svg {
  width: 15px;
  height: 15px;
}

.roster-matrix-scroll {
  max-width: 100%;
  max-height: min(72vh, 760px);
  overflow: auto;
  overscroll-behavior: contain;
}

.roster-matrix {
  min-width: 1120px;
  display: grid;
  grid-template-columns: 190px repeat(var(--roster-days), minmax(125px, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.roster-matrix > * {
  min-width: 0;
  min-height: 62px;
  padding: 7px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.roster-matrix-corner,
.roster-matrix-day {
  position: sticky;
  z-index: 4;
  top: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 2px;
  place-content: center;
  border-bottom: 2px solid var(--brand-navy);
  background: var(--surface-raised);
  box-shadow: 0 5px 10px rgba(0, 5, 72, .12);
  text-align: center;
}

.roster-matrix-corner {
  z-index: 6;
  left: 0;
  color: var(--brand-navy);
  font-weight: 800;
}

.roster-matrix-scroll.month .roster-matrix {
  min-width: calc(180px + var(--roster-days) * 96px);
  grid-template-columns: 180px repeat(var(--roster-days), minmax(92px, 1fr));
}

.roster-matrix-day span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
}

.roster-matrix-day strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.15;
}

.roster-member-head {
  position: sticky;
  z-index: 3;
  left: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  background: var(--surface-soft);
}

.roster-member-head span,
.roster-member-head strong,
.roster-member-head small {
  min-width: 0;
  display: block;
}

.roster-member-head strong,
.roster-member-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-member-head strong { font-size: 12px; }
.roster-member-head small { color: var(--muted); font-size: 9px; }
.roster-member-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--avatar-color, var(--navy));
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.identity-avatar.avatar-code-3,
.roster-member-avatar.avatar-code-3 {
  font-size: .64rem;
}

.identity-avatar.avatar-code-4,
.roster-member-avatar.avatar-code-4 {
  font-size: .54rem;
}

.profile-avatar.avatar-code-3 {
  font-size: 1.2rem;
}

.profile-avatar.avatar-code-4 {
  font-size: 1rem;
}

.roster-member-cell {
  display: grid;
  align-content: start;
  gap: 4px;
  background: var(--surface-raised);
}

.roster-member-cell.unavailable {
  background: repeating-linear-gradient(135deg, var(--surface-soft), var(--surface-soft) 7px, color-mix(in srgb, var(--line) 45%, transparent) 7px, color-mix(in srgb, var(--line) 45%, transparent) 14px);
}

.roster-unavailable,
.roster-cell-empty {
  align-self: center;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.roster-member-cell button {
  min-width: 0;
  min-height: 28px;
  padding: 4px 5px;
  overflow: hidden;
  border: 0;
  border-left: 4px solid var(--service-color);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-month-weekdays,
.roster-month-board {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  gap: 5px;
}

.roster-month-weekdays {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.roster-month-board {
  overflow-x: auto;
}

.roster-month-day {
  position: relative;
  min-width: 0;
  min-height: 138px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.roster-month-day.muted {
  border-style: dashed;
  opacity: .35;
}

.roster-month-day.drop-target {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, var(--surface-soft));
  box-shadow: inset 0 0 0 1px var(--red);
}

.roster-month-day > header {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 5px;
}

.roster-month-day > header strong {
  font-size: 16px;
}

.roster-month-day > header span,
.roster-month-day > header b {
  color: var(--muted);
  font-size: 9px;
}

.roster-month-day > header b {
  margin-left: auto;
  color: var(--red);
}

.roster-month-services {
  display: grid;
  gap: 3px;
}

.roster-month-services article {
  overflow: hidden;
  border-left: 4px solid var(--service-color);
  border-radius: 4px;
  background: var(--surface-raised);
}

.roster-month-services article.understaffed {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 45%, var(--line));
}

.roster-month-services button {
  width: 100%;
  min-width: 0;
  min-height: 27px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 9px;
}

.roster-month-services button b {
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--service-color);
  color: var(--service-text);
}

.roster-month-services button span {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-month-add {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  min-height: 25px;
  padding: 0;
  border: 1px dashed var(--line-strong);
  background: transparent;
  color: var(--muted);
}

.roster-month-add svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 1180px) {
  .roster-toolbar {
    grid-template-columns: auto auto minmax(160px, 1fr) auto;
  }

  .roster-summary {
    grid-column: 1 / -1;
  }

  .roster-workspace {
    grid-template-columns: 1fr;
  }

  .roster-palette {
    position: static;
  }

  .roster-service-types {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
}

@media (max-width: 760px) {
  .live-chat-alert {
    top: 68px;
    right: 10px;
    width: calc(100vw - 20px);
  }

  .overview-chat-notice {
    grid-template-columns: 1fr;
  }

  .overview-chat-notice-head {
    padding: 13px;
  }

  .roster-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .roster-view-switch {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .roster-period-switch {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .roster-toolbar label {
    grid-column: 1;
  }

  .roster-toolbar .period-navigation {
    grid-column: 2;
  }

  .roster-summary {
    grid-column: 1 / -1;
  }

  .roster-workspace {
    gap: 10px;
  }

  .roster-palette,
  .roster-main {
    padding: 10px;
  }

  .roster-service-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-service-types button {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .roster-service-types button > span {
    width: 36px;
    height: 36px;
  }

  .roster-board-head {
    align-items: start;
  }

  .roster-board-head > p {
    display: none;
  }

  .roster-board {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .roster-month-weekdays {
    display: none;
  }

  .roster-month-board {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .roster-month-day {
    min-height: 76px;
  }

  .roster-month-day.muted {
    display: none;
  }

  .roster-day-column {
    min-height: 0;
  }

  .roster-day-column > header {
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .roster-day-column > header strong {
    grid-column: 2;
    grid-row: 1;
  }

  .roster-day-column > header b {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .roster-service-types {
    grid-template-columns: 1fr;
  }

  .roster-summary span {
    padding-inline: 5px;
    gap: 4px;
  }

  .roster-summary b {
    font-size: 16px;
  }
}

.app-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.brandbar {
  height: var(--alery-header);
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-raised) 98%, transparent);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  backdrop-filter: blur(14px);
}

.brandmark {
  max-width: min(34vw, 390px);
  gap: 10px;
}

.brandmark img {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: contain;
}

.brandmark strong {
  color: var(--ink);
  font-size: .94rem;
}

.brandmark div > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: .73rem;
}

.brandmark div > span i {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: .62rem;
  font-style: normal;
  font-weight: 700;
}

.identity {
  gap: 9px;
}

.identity-user {
  grid-template-columns: auto minmax(148px, 230px);
  gap: 2px 8px;
  min-width: 0;
}

.identity-profile {
  gap: 8px;
  min-height: 42px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: var(--alery-control-radius);
}

.identity-profile > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.identity-profile .profile-chevron {
  display: block;
  width: 15px;
  height: 15px;
  margin-left: 2px;
  color: var(--muted);
}

.identity-area select {
  min-height: 30px;
  padding-block: 3px;
  border: 1px solid var(--line);
  border-radius: var(--alery-control-radius);
  background: var(--surface-subtle);
  font-size: .76rem;
}

.icon-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.icon-text-button .app-icon {
  width: 17px;
  height: 17px;
}

.tabs {
  inset: var(--alery-header) auto 0 0;
  gap: 3px;
  width: var(--alery-sidebar);
  padding: 18px 12px 14px;
  border-right: 1px solid var(--line);
  background: var(--surface-raised);
  box-shadow: none;
}

.tabs::before {
  display: none;
}

.tabs .nav-group-label {
  display: block;
  margin: 13px 10px 4px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tabs .nav-group-label:first-of-type {
  margin-top: 0;
}

.tabs .nav-admin-label {
  margin-top: auto;
}

.tabs button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 42px;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: var(--alery-control-radius);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 690;
  line-height: 1.2;
}

.tabs button > span:last-child {
  display: flex;
  align-items: center;
  min-height: 22px;
}

.tabs button:hover {
  border-color: var(--line);
  background: var(--surface-subtle);
  color: var(--ink);
}

.tabs button.active {
  border-color: var(--alery-accent-border);
  background: var(--alery-accent-soft);
  color: var(--red);
}

.tabs button.active::before {
  display: none;
}

.nav-icon {
  width: 22px;
}

.nav-icon .app-icon {
  width: 19px;
  height: 19px;
}

.mobile-nav-logout {
  display: none !important;
}

.alery-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.alery-nav-brand b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--red);
  color: white;
}

main:not(.auth-shell):not(.configurator-shell) {
  width: auto;
  max-width: 1600px;
  margin-left: var(--alery-sidebar);
  padding: calc(var(--alery-header) + 22px) clamp(18px, 2.3vw, 34px) 44px;
}

.hero,
.page-overview .hero {
  display: block;
  min-height: 0;
  margin: 0 0 16px;
  padding: 0 0 17px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.hero h1,
.page-overview .hero h1 {
  margin: 3px 0 4px;
  color: var(--ink);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
}

.hero p:not(.eyebrow),
.page-overview .hero p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}

.hero .eyebrow,
.page-overview .hero .eyebrow {
  color: var(--red);
}

.panel,
.metric-card,
.shift-card,
.year-card,
.toolbar,
.notice-board,
.metric-details,
.message-dock,
.item-modal,
.admin-detail-modal,
.area-modal,
.notice-modal,
.calendar-link-modal {
  border: 1px solid var(--line);
  border-radius: var(--alery-radius);
  background: var(--surface-raised);
  box-shadow: var(--alery-shadow);
}

.panel {
  padding: clamp(14px, 1.7vw, 20px);
}

.overview-dashboard.has-message-dock .overview,
.overview {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.metric-card,
.mailbox-card {
  position: relative;
  grid-template-columns: 34px 1fr 14px;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: start;
  column-gap: 10px;
  min-height: 90px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--alery-radius);
  background: var(--surface-raised);
  text-align: left;
  box-shadow: none;
}

.metric-card:hover,
.metric-card.active,
.mailbox-card:hover {
  border-color: var(--alery-accent-border);
  background: var(--alery-accent-soft);
}

.metric-card .metric-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--surface-subtle);
  color: var(--red);
}

.metric-card .metric-icon .app-icon {
  width: 18px;
  height: 18px;
}

.metric-card .metric-value {
  grid-column: 2;
  grid-row: 1;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
}

.metric-card p {
  grid-column: 2;
  grid-row: 2;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.25;
}

.metric-card .metric-chevron {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: var(--muted);
  font-size: 1.25rem;
}

input,
select,
textarea,
button,
.secondary-link {
  border-radius: var(--alery-control-radius);
}

.modal-backdrop {
  z-index: 1200;
  padding: 12px;
  background: rgba(12, 18, 32, .5);
  backdrop-filter: blur(3px);
}

.modal-card {
  position: relative;
  width: min(46rem, 100%);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-top: 6px solid var(--red);
  border-radius: var(--alery-radius);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(10, 18, 32, .28);
  isolation: isolate;
}

.item-modal,
.admin-detail-modal,
.area-modal,
.notice-modal,
.calendar-link-modal {
  box-shadow: 0 24px 70px rgba(10, 18, 32, .22);
}

.admin-subnav {
  gap: 5px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--alery-radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.admin-subnav button {
  min-height: 36px;
  padding-inline: 11px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-size: .77rem;
}

.admin-subnav button.active {
  border-color: var(--alery-accent-border);
  background: var(--alery-accent-soft);
  color: var(--red);
}

.auth-shell {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--red) 8%, transparent), transparent 42%),
    var(--app-bg);
}

.auth-brand,
.auth-panel {
  border-color: var(--line);
  border-radius: var(--alery-radius);
  background: var(--surface-raised);
  box-shadow: var(--alery-shadow);
}

@media (max-width: 1120px) and (min-width: 761px) {
  :root {
    --alery-sidebar: 76px;
  }

  .tabs {
    padding-inline: 9px;
    transform: none;
  }

  .mobile-menu-toggle,
  .tabs .mobile-nav-head {
    display: none;
  }

  .tabs .nav-group-label {
    height: 1px;
    margin: 8px 4px;
    overflow: hidden;
    padding: 0;
    border-top: 1px solid var(--line);
    color: transparent;
  }

  .tabs button {
    justify-content: center;
    padding: 0;
  }

  .tabs button > span:last-child {
    display: none;
  }

  .overview-dashboard.has-message-dock .overview,
  .overview {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  :root {
    --alery-header: 58px;
    --alery-sidebar: 0px;
  }

  .brandbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    height: var(--alery-header);
    padding: 7px 10px;
  }

  .mobile-menu-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: var(--ink);
  }

  .mobile-menu-toggle .app-icon {
    width: 21px;
    height: 21px;
  }

  .brandmark {
    max-width: none;
  }

  .brandmark img {
    width: 36px;
    height: 36px;
  }

  .brandmark div {
    display: none;
  }

  .identity-user {
    display: flex;
    gap: 5px;
  }

  .identity-profile {
    padding: 2px;
  }

  .identity-profile > span:nth-child(2),
  .identity-profile .profile-chevron,
  #logoutButton {
    display: none;
  }

  .identity-area {
    display: block;
    width: min(52vw, 220px);
  }

  .identity-area > span {
    display: none;
  }

  .identity-area select {
    width: 100%;
    min-height: 38px;
  }

  .tabs {
    inset: 0 auto 0 0;
    width: min(84vw, 320px);
    padding: 12px;
    transform: translateX(-105%);
  }

  .tabs.open {
    transform: translateX(0);
  }

  .tabs .mobile-nav-head {
    display: flex;
    margin: -2px 0 10px;
    padding: 0 0 10px;
  }

  .tabs .nav-group-label {
    height: auto;
    margin: 13px 10px 4px;
    overflow: visible;
    padding: 0;
    border: 0;
    color: var(--muted);
  }

  .tabs .nav-admin-label {
    margin-top: 13px;
  }

  .tabs button {
    justify-content: flex-start;
    padding: 0 11px;
  }

  .tabs button > span:last-child {
    display: inline;
  }

  .tabs .mobile-nav-logout {
    display: flex !important;
    margin-top: auto;
    border-color: var(--line);
    background: var(--surface-subtle);
    color: var(--ink);
  }

  .tabs .mobile-nav-logout .nav-icon {
    display: inline-grid;
  }

  .own-profile-modal .profile-logout {
    display: none;
  }

  main:not(.auth-shell):not(.configurator-shell) {
    margin-left: 0;
    padding: calc(var(--alery-header) + 16px) 12px 28px;
  }

  .hero,
  .page-overview .hero {
    margin-bottom: 12px;
    padding: 0 0 13px;
  }

  .overview-dashboard.has-message-dock .overview,
  .overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .metric-card,
  .mailbox-card {
    grid-template-columns: 30px 1fr;
    min-height: 78px;
    padding: 10px;
  }

  .metric-card .metric-icon {
    width: 30px;
    height: 30px;
  }

  .metric-card .metric-chevron {
    display: none;
  }
}

@media (max-width: 390px) {
  .identity-area {
    width: min(48vw, 180px);
  }
}

/* Shared work surfaces and active states form opaque semantic color pairs. */
:root {
  --active-surface: var(--red, #eb003c);
  --on-active-surface: #ffffff;
}

.brandbar, .modal-card, .item-modal, .knowledge-reader-modal,
.knowledge-contact-detail, .deployment-period-filter,
.deployment-period-modes, .deployment-period-heading > span {
  background: var(--surface-raised);
  color: var(--ink);
}

.deployment-period-heading strong, .deployment-kpis strong,
.deployment-kpis .app-icon,
.knowledge-contact-detail h3, .focus-next-panel h2,
.focus-queue-panel h2 {
  color: var(--ink);
}

.workspace-tabs button.active, .deployment-tabs button.active,
.deployment-period-modes button.active, .segmented button.active {
  background: var(--active-surface);
  color: var(--on-active-surface);
  border-color: var(--active-surface);
}

.deployment-period-heading, .modal-actions, .panel-head, .report-module-head {
  flex-wrap: wrap;
}

.deployment-period-heading > div, .deployment-kpis article > span,
.knowledge-contact-detail header > div, .focus-task-copy {
  min-width: 0;
}

.modal-card :where(h2, h3, label), .deployment-kpis strong,
.knowledge-contact-detail :where(h3, p, strong), .focus-task-copy {
  overflow-wrap: anywhere;
  white-space: normal;
}

.deployment-period-stepper :where(input, select),
.deployment-period-range input, input[type="date"], input[type="time"] {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  max-width: 100%;
}

.deployment-period-stepper {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
}

.deployment-period-stepper .icon-button {
  width: 48px;
  min-width: 48px;
  height: 48px;
}

.deployment-period-stepper label { min-width: 0; }

.knowledge-contact-row > span > strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
}

.focus-home-grid, .focus-next-grid { align-items: start; }
.deployment-people-list article { grid-template-columns: minmax(0, 1fr) minmax(70px, 1fr) auto; }
.modal-actions :where(button, .button-link) { height: auto; min-height: 48px; white-space: normal; }

.deployment-filter-bar {
  background: var(--surface-raised);
  color: var(--ink);
}

@media (max-width: 700px) {
  .deployment-period-controls, .deployment-period-range { grid-template-columns: minmax(0, 1fr); }
  .deployment-period-modes { display: flex; flex-wrap: wrap; }
  .deployment-period-modes button, .icon-button, .workspace-tabs button,
  .deployment-tabs button, .download-button { min-height: 48px; }
  .icon-button { min-width: 48px; }
  .deployment-people-list article { grid-template-columns: minmax(0, 1fr) auto; }
  .deployment-people-list article > div { display: none; }
  .deployment-bars > div { grid-template-columns: minmax(0, 1fr) auto; }
  .deployment-bars > div > span { min-width: 0; overflow-wrap: anywhere; }
}

/* Version 1.60.0: compact temporal controls, focused staffing dialog and concise Today view. */
:where(input[type="date"], input[type="time"], input[type="month"], input[type="week"]) {
  max-width: 190px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

input[type="time"] {
  max-width: 145px;
}

.today-open-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.today-open-summary span {
  display: grid;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 6px;
  background: var(--surface-subtle, #f7f8fb);
}

.today-open-summary strong {
  color: var(--blue, #000548);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.today-open-summary small {
  overflow: hidden;
  color: var(--muted, #687083);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-open-all {
  width: 100%;
  margin-top: 9px;
}

.today-open-all .app-icon {
  width: 17px;
}

.item-modal.service-detail-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

.service-detail-dialog > .panel-head {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #d9deea);
}

.service-detail-dialog .modal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.service-detail-content {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  padding-top: 2px;
}

.service-detail-fields,
.service-detail-people {
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.service-detail-fields {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px 6px 6px 2px;
}

.service-detail-people {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 2px 4px 6px 2px;
}

.service-detail-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.service-detail-field-grid > label,
.service-date-time-grid > label {
  display: grid;
  align-content: end;
  gap: 4px;
  min-width: 0;
}

.service-detail-field-grid > .form-wide,
.service-detail-field-grid > .service-date-time-grid {
  grid-column: 1 / -1;
}

.service-date-time-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
}

.service-date-time-grid input {
  width: 100%;
  max-width: none;
  text-align: center;
}

.service-detail-dialog .modal-requirements {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 0;
}

.service-detail-dialog .modal-requirements input[type="number"] {
  max-width: 120px;
  text-align: center;
}

.service-detail-dialog .modal-staffing,
.service-detail-dialog .modal-assignment {
  margin: 0;
  border-radius: 7px;
}

.service-detail-dialog .modal-assignment {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
}

.modal-assignment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.modal-assignment-head p {
  margin: 0;
}

.service-detail-dialog .member-picker-list {
  max-height: min(36dvh, 360px);
}

.self-assignment-notice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 0;
  padding: 10px 11px;
  border-left: 4px solid #a76800;
  border-radius: 5px;
  background: #fff7e8;
  color: var(--ink, #161b2b);
  font-size: .8rem;
  line-height: 1.4;
}

.self-assignment-notice .app-icon {
  width: 19px;
  height: 19px;
  color: #7a4c00;
}

.self-assignment-notice span {
  display: grid;
  gap: 2px;
}

.service-detail-dialog .modal-actions {
  position: relative;
  z-index: 3;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 11px 0 0;
  border-top: 1px solid var(--line, #d9deea);
  background: var(--surface-raised, #fff);
  box-shadow: 0 -5px 12px rgb(5 12 45 / 5%);
}

.service-detail-dialog .modal-actions > :where(button, label) {
  margin: 0;
}

@media (max-width: 920px) {
  .item-modal.service-detail-dialog {
    width: calc(100vw - 14px);
    height: calc(100dvh - 14px);
    max-height: calc(100dvh - 14px);
  }

  .service-detail-dialog .modal-form {
    overflow: hidden;
  }

  .service-detail-content {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  .service-detail-fields,
  .service-detail-people {
    overflow: visible;
    padding-right: 3px;
  }

  .service-detail-dialog .member-picker-list {
    max-height: 300px;
  }
}

@media (max-width: 620px) {
  :where(input[type="date"], input[type="time"], input[type="month"], input[type="week"]) {
    width: 100%;
    max-width: none;
  }

  .service-detail-field-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-detail-field-grid > .form-wide,
  .service-detail-field-grid > .service-date-time-grid {
    grid-column: 1;
  }

  .service-date-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-detail-dialog .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .service-detail-dialog .modal-actions > :where(button, label) {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .service-date-time-grid,
  .today-open-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 1.15.0: layout-faithful PDF forms */
.document-modal {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

.document-fill-form,
.document-schema-fields {
  min-width: 0;
}

.document-pdf-viewer {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: min(64dvh, 780px);
  padding: 9px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #cfd4dc;
}

.document-pdf-loading {
  padding: 32px;
  color: #263044;
  font-weight: 700;
}

.document-pdf-page {
  position: relative;
  flex: none;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 12px rgb(0 0 0 / 18%);
}

.document-pdf-page > canvas {
  display: block;
}

.document-pdf-overlay {
  color-scheme: light;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.document-overlay-field {
  position: absolute;
  display: grid;
  min-width: 0;
  z-index: 1;
  pointer-events: auto;
}

.document-overlay-field input:not([type="checkbox"]),
.document-overlay-field select,
.document-overlay-field textarea {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 1px 4px !important;
  border: 1px solid rgb(0 83 166 / 65%) !important;
  border-radius: 2px !important;
  background: rgb(255 255 255 / 88%) !important;
  color: #111 !important;
  font: 500 clamp(10px, 1.6vw, 14px)/1.1 Arial, sans-serif !important;
}

.document-overlay-field textarea {
  resize: none;
}

.document-overlay-field.checkbox,
.document-overlay-field.radio {
  place-items: center;
}

.document-overlay-field.checkbox input,
.document-overlay-field.radio input {
  width: min(100%, 22px) !important;
  height: min(100%, 22px) !important;
  min-height: 0 !important;
}

.document-overlay-dictate {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  min-height: 0 !important;
  padding: 0;
  translate: 0 -50%;
  border: 0;
  border-radius: 50%;
  background: var(--brand-navy);
  color: #fff;
  font-size: 8px;
}

.document-overlay-dictate .app-icon {
  width: 12px;
  height: 12px;
}

.document-overlay-field input:focus,
.document-overlay-field textarea:focus,
.document-overlay-field select:focus,
.document-overlay-dictate:focus-visible {
  outline: 2px solid var(--brand-navy);
  outline-offset: 1px;
}

.document-overlay-field:has(.document-overlay-dictate) input,
.document-overlay-field:has(.document-overlay-dictate) textarea {
  padding-right: 22px !important;
}

.document-fallback-fields {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.document-fallback-fields > .hint {
  margin: 0;
}

.document-fallback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.document-fallback-field,
.document-fallback-control {
  min-width: 0;
}

.document-fallback-field.wide {
  grid-column: 1 / -1;
}

.document-fallback-control {
  position: relative;
  display: grid;
}

.document-fallback-control input:not([type="checkbox"]),
.document-fallback-control select,
.document-fallback-control textarea {
  width: 100%;
  min-width: 0;
}

.document-fallback-control textarea {
  min-height: 112px;
  resize: vertical;
}

.document-fallback-control .document-overlay-dictate {
  right: 8px;
  width: 26px;
  height: 26px;
}

.document-fallback-control:has(.document-overlay-dictate) input,
.document-fallback-control:has(.document-overlay-dictate) textarea {
  padding-right: 40px;
}

.document-signature {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.document-signature p {
  margin: 0;
  color: var(--muted);
}

#documentSignatureCanvas {
  width: min(100%, 640px);
  height: 150px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

.document-signature-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.document-signature-actions .check {
  flex: 1 1 360px;
}

.document-schema-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.document-schema-fields fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.document-submission-list,
.document-submission-row {
  display: grid;
  gap: 6px;
}

.document-submission-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.document-submission-row > button:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 52px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.document-submission-row > button:first-child span {
  display: grid;
  min-width: 0;
}

.document-submission-row > .danger-button {
  margin-right: 8px;
}

@media (max-width: 700px) {
  .document-modal {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }

  .document-guidance,
  .document-signature-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .document-pdf-viewer {
    justify-items: start;
    max-height: 58dvh;
    padding: 6px;
  }

  .document-schema-fields,
  .document-schema-fields fieldset,
  .document-fallback-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-fallback-field.wide {
    grid-column: 1;
  }

  #documentSignatureCanvas {
    height: 130px;
  }
}

/* 1.18.0: compact staffing, messenger chat, role matrix and year drag-and-drop */
.understaffed-details {
  padding: clamp(12px, 1.5vw, 18px);
}

.understaffed-compact-list {
  display: grid;
  gap: 5px;
}

.understaffed-compact-row {
  display: grid;
  grid-template-columns: 44px minmax(170px, .72fr) minmax(180px, 1fr) minmax(180px, .8fr) 24px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.understaffed-compact-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-subtle);
  filter: none;
}

.understaffed-compact-row .service-code-preview {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  font-size: .72rem;
}

.understaffed-compact-row time,
.understaffed-compact-main,
.understaffed-missing {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.understaffed-compact-row time span,
.understaffed-compact-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.understaffed-missing b {
  color: var(--red);
  font-size: .7rem;
  text-transform: uppercase;
}

.chat-layout {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 12px;
  min-height: min(72dvh, 780px);
}

.chat-layout > .panel {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.chat-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: start;
}

.chat-sidebar-head,
.chat-conversation-head,
.chat-new-form-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-sidebar-head {
  justify-content: space-between;
  min-height: 72px;
  padding: 14px 16px 10px;
}

.chat-sidebar-head h2,
.chat-conversation-head h2 {
  margin: 0;
}

.chat-new-button {
  flex: 0 0 auto;
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.chat-search {
  position: relative;
  display: block;
  margin: 0 12px 10px;
}

.chat-search .app-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 11px;
  width: 17px;
  height: 17px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.chat-search input {
  width: 100%;
  height: 38px;
  padding: 6px 10px 6px 36px;
  border-radius: 7px;
  background: var(--surface-subtle);
}

.chat-new-form {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border-block: 1px solid var(--line);
  background: var(--surface-subtle);
}

.chat-new-form-head {
  justify-content: space-between;
}

.chat-thread-list {
  min-height: 0;
  margin: 0;
  overflow-y: auto;
}

.chat-thread-list > button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 64px;
  padding: 9px 12px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

/* Version 1.21.0: tablet-safe planning workspace */
@media (max-width: 900px) {
  .workspace-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .workspace-tabs button {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .workspace-tabs button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .roster-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
  }

  .roster-view-switch,
  .roster-period-switch,
  .roster-summary {
    grid-column: 1 / -1;
  }

  .roster-view-switch,
  .roster-period-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roster-toolbar label {
    grid-column: 1;
  }

  .roster-toolbar .period-navigation {
    grid-column: 2;
  }

  .roster-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .roster-day-column {
    min-height: 240px;
  }
}

@media (max-width: 600px) {
  .workspace-tabs,
  .roster-board {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .roster-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

.chat-thread-list > button:hover,
.chat-thread-list > button.active {
  background: var(--surface-subtle);
}

.chat-thread-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 4px;
}

.chat-thread-copy > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.chat-thread-copy strong,
.chat-thread-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-copy time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .68rem;
}

.chat-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.chat-avatar.avatar-code-3 {
  font-size: .68rem;
}

.chat-avatar.avatar-code-4 {
  font-size: .58rem;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-group-avatar {
  background: var(--surface-subtle);
  color: var(--navy);
  border: 1px solid var(--line);
}

.chat-group-avatar .app-icon {
  width: 20px;
  height: 20px;
}

.chat-conversation {
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--surface-subtle) !important;
}

.chat-conversation-head {
  min-height: 68px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.chat-conversation-head > div {
  min-width: 0;
}

.chat-conversation-head p {
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-back-button {
  display: none;
}

.chat-message-list {
  gap: 5px;
  padding: 18px clamp(12px, 3vw, 36px);
  scroll-behavior: smooth;
}

.chat-date-separator {
  align-self: center;
  margin: 8px 0;
}

.chat-date-separator span {
  display: block;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
}

.chat-bubble {
  position: relative;
  min-width: 90px;
  max-width: min(72%, 620px);
  padding: 7px 9px 5px;
  border: 1px solid var(--line);
  border-radius: 4px 8px 8px;
  background: var(--surface-raised);
  box-shadow: 0 1px 1px rgb(0 0 0 / .05);
}

.chat-bubble.own {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  border-radius: 8px 4px 8px 8px;
  background: color-mix(in srgb, var(--green) 16%, var(--surface-raised));
  color: var(--ink);
}

.chat-bubble > strong {
  display: block;
  margin-bottom: 2px;
  color: var(--red);
  font-size: .72rem;
}

.chat-bubble p {
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.chat-bubble footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}

.chat-bubble time,
.chat-read-state {
  color: var(--muted);
  font-size: .64rem;
}

.chat-read-state.read {
  color: #1877b7;
}

.chat-compose {
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
}

.chat-compose textarea {
  min-height: 42px;
  max-height: 128px;
  padding: 9px 12px;
  border-radius: 8px;
  resize: vertical;
}

.chat-send-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  border-radius: 50%;
  background: var(--red);
}

.chat-send-button .app-icon {
  width: 19px;
  height: 19px;
}

.role-detail-modal {
  width: min(1120px, calc(100vw - 32px));
}

.rights-editor {
  padding: 12px;
  border-radius: 7px;
  background: var(--surface-subtle);
}

.rights-group {
  padding: 0;
  overflow: hidden;
  border-radius: 6px;
}

.rights-group h4 {
  margin: 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--navy) 8%, var(--surface-raised));
}

.rights-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.role-rights-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.role-rights-table th,
.role-rights-table td {
  padding: 9px 10px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
  text-align: left;
}

.role-rights-table thead th {
  color: var(--muted);
  background: var(--surface-subtle);
  font-size: .7rem;
  text-transform: uppercase;
}

.role-rights-table th:first-child {
  width: 210px;
}

.role-rights-table tbody th {
  color: var(--ink);
  font-size: .82rem;
}

.role-right-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 6px 10px;
}

.role-right-options .check {
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: .8rem;
  cursor: pointer;
}

.role-right-options .check span {
  overflow-wrap: anywhere;
}

.role-right-options .check:hover:not(.disabled-check) {
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: var(--surface-soft);
}

.role-right-options .disabled-check {
  cursor: not-allowed;
  opacity: .72;
}

.rights-protection-notice {
  margin: 10px 0;
  padding: 10px 12px;
  border-left: 4px solid var(--red);
  background: var(--red-soft);
}

.rights-protection-notice.locked {
  border-left-color: var(--muted);
  background: var(--surface-soft);
}

.rights-protection-notice p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .8rem;
}

/* Einheitliche, gut bedienbare Auswahlfelder in der gesamten Web-App. */
input[type="checkbox"],
input[type="radio"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  cursor: not-allowed;
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  cursor: pointer;
}

label:has(> input[type="checkbox"]:disabled),
label:has(> input[type="radio"]:disabled) {
  cursor: not-allowed;
}

.year-drag-tray {
  min-width: 0;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.year-drag-tray > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.year-drag-list {
  display: flex;
  gap: 6px;
  max-width: 100%;
  padding-bottom: 3px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.year-drag-list > button {
  display: grid;
  grid-template-columns: 38px minmax(130px, 190px);
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: grab;
}

.year-drag-list > button.staffed {
  border-left-color: var(--green);
}

.year-drag-list > button span:last-child {
  display: grid;
  min-width: 0;
}

.year-drag-list > button strong,
.year-drag-list > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.year-drag-list > button small {
  color: var(--muted);
  font-size: .68rem;
}

.year-drag-list .service-code-preview {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-size: .65rem;
}

.year-mini-days [data-drop-date].drop-target {
  outline: 2px solid var(--green);
  outline-offset: -1px;
  background: color-mix(in srgb, var(--green) 28%, var(--surface-raised));
}

@media (max-width: 900px) {
  .understaffed-compact-row {
    grid-template-columns: 42px minmax(145px, .8fr) minmax(0, 1fr) 22px;
  }

  .understaffed-missing {
    grid-column: 3;
  }

  .role-right-options {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 760px) {
  .understaffed-compact-row {
    grid-template-columns: 40px minmax(0, 1fr) 20px;
    gap: 5px 8px;
    padding: 7px 8px;
  }

  .understaffed-compact-row time {
    grid-column: 2;
  }

  .understaffed-compact-main,
  .understaffed-missing {
    grid-column: 2 / span 2;
  }

  .understaffed-compact-row > .open-service-arrow {
    grid-column: 3;
    grid-row: 1;
  }

  .chat-layout {
    display: block;
    min-height: calc(100dvh - 170px);
  }

  .chat-layout .chat-sidebar {
    display: grid;
    min-height: calc(100dvh - 170px);
  }

  .chat-layout .chat-conversation {
    display: none;
  }

  .chat-layout.mobile-conversation .chat-sidebar {
    display: none;
  }

  .chat-layout.mobile-conversation .chat-conversation {
    display: grid;
    min-height: calc(100dvh - 170px);
  }

  .chat-back-button {
    display: grid;
    flex: 0 0 auto;
  }

  .chat-conversation-head {
    padding-inline: 8px;
  }

  .chat-message-list {
    padding: 14px 10px;
  }

  .chat-bubble {
    max-width: 88%;
  }

  .chat-compose {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .role-detail-modal {
    width: calc(100vw - 12px);
  }

  .rights-table-scroll {
    overflow: visible;
  }

  .role-rights-table,
  .role-rights-table tbody,
  .role-rights-table tr,
  .role-rights-table th,
  .role-rights-table td {
    display: block;
    width: 100% !important;
  }

  .role-rights-table thead {
    display: none;
  }

  .role-rights-table tr {
    padding: 9px 10px;
    border-top: 1px solid var(--line);
  }

  .role-rights-table th,
  .role-rights-table td {
    padding: 0;
    border: 0;
  }

  .role-rights-table tbody th {
    margin-bottom: 7px;
  }

  .role-right-options {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .role-right-options .check {
    min-height: 34px;
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface-raised);
  }
}

/* Keep the 1.22 component dimensions above all earlier responsive layers. */
.roster-workspace {
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 10px;
}

.roster-palette {
  max-height: calc(100dvh - 98px);
  padding: 8px;
  overflow-y: auto;
}

.roster-service-types {
  gap: 4px;
}

.roster-service-types button {
  min-height: 36px;
  padding: 3px 5px;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas: "code time";
  gap: 6px;
}

.roster-service-types button > span {
  width: 30px;
  height: 30px;
}

.roster-service-types strong {
  display: none;
}

.segmented > button {
  min-height: 34px;
  height: 34px;
}

.period-navigation,
.toolbar > label :where(input, select),
.roster-toolbar > label :where(input, select),
.period-navigation > .icon-button {
  min-height: 42px;
  height: 42px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .roster-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .roster-palette {
    position: static;
    max-height: none;
    overflow: hidden;
  }

  .roster-service-types {
    display: grid;
    grid-auto-columns: 112px;
    grid-auto-flow: column;
    overflow-x: auto;
  }
}

/* Version 1.33.0 final overrides. */
.roster-member-head > .roster-member-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.item-modal,
.admin-detail-modal,
.area-modal,
.notice-modal,
.calendar-link-modal {
  gap: 8px;
  width: min(780px, calc(100vw - 24px));
  padding: 12px;
}

.item-modal > .panel-head,
.admin-detail-modal > .panel-head,
.area-modal > .panel-head {
  margin-bottom: 4px;
}

.item-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
.admin-detail-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
.area-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
.admin-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select) {
  min-height: 34px;
  height: 34px;
  padding: 5px 8px;
  line-height: 1.2;
}

.item-modal :where(input[type="color"]),
.admin-detail-modal :where(input[type="color"]),
.area-modal :where(input[type="color"]) {
  width: 48px;
  min-height: 34px;
  height: 34px;
  padding: 3px;
}

.item-modal textarea,
.admin-detail-modal textarea,
.area-modal textarea {
  min-height: 58px;
  padding: 7px 8px;
}

.service-type-editor {
  grid-template-columns: 44px repeat(4, minmax(110px, 1fr));
  gap: 7px 9px;
  align-items: end;
}

.service-type-editor > * {
  min-width: 0;
}

.service-type-editor .service-code-preview {
  width: 44px;
  height: 34px;
  align-self: end;
  border-radius: 6px;
}

.service-type-editor > label:has([name="color"]) {
  grid-column: 2;
}

.service-type-editor > label:has([name="textColor"]) {
  grid-column: 3;
}

.service-type-editor > label:has([name="activeUntil"]) {
  grid-column: 4;
}

.service-type-editor > label:has([name="active"]) {
  grid-column: 5;
}

.service-type-editor .individual-time-option {
  grid-column: 2 / -1;
  align-self: center;
  min-height: 34px;
}

.service-type-editor .individual-time-option span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
}

.service-type-editor.has-individual-time .service-fixed-time {
  opacity: .48;
}

.service-default-requirements,
.service-type-editor .area-multi-select {
  padding: 8px 10px;
}

.service-type-actions {
  gap: 7px;
}

.service-type-editor .service-type-actions {
  width: 100%;
  margin-inline: 0;
  padding: 8px 0 0;
}

.service-type-actions button {
  min-width: 118px;
  min-height: 36px;
  padding: 6px 12px;
}

.area-role-row {
  grid-template-columns: minmax(190px, 1.25fr) minmax(150px, 1fr) minmax(120px, .65fr) auto;
  gap: 7px;
  align-items: end;
  padding-block: 7px;
}

.individual-service-time-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.individual-service-time-form .duration-field {
  grid-column: span 2;
}

.individual-service-time-form .form-wide {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .item-modal,
  .admin-detail-modal,
  .area-modal,
  .notice-modal,
  .calendar-link-modal {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    padding: 10px;
  }

  .item-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
  .admin-detail-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select),
  .area-modal :where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select) {
    min-height: 40px;
    height: 40px;
  }

  .service-type-editor,
  .individual-service-time-form,
  .area-role-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-type-editor .individual-time-option,
  .individual-service-time-form .duration-field,
  .individual-service-time-form .form-wide {
    grid-column: 1;
  }

  .service-type-editor > label:has([name="color"]),
  .service-type-editor > label:has([name="textColor"]),
  .service-type-editor > label:has([name="activeUntil"]),
  .service-type-editor > label:has([name="active"]) {
    grid-column: 1;
  }

  .service-type-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Version 1.43.0 final cascade: these workspaces intentionally exceed compact item modals. */
.role-detail-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1460px, calc(100vw - 24px));
  height: min(940px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  padding: 12px;
}

.role-detail-modal .role-editor {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.role-detail-modal .rights-editor,
.role-detail-modal .rights-group,
.role-detail-modal .rights-table-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.role-detail-modal .rights-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
}

.semantic-studio-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1800px, calc(100vw - 16px));
  height: calc(100dvh - 16px);
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  padding: 10px;
}

.semantic-studio-modal > .panel-head {
  z-index: 6;
  margin: 0;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.semantic-studio-form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.semantic-studio-workspace {
  display: grid;
  grid-template-columns: minmax(420px, var(--semantic-preview-width, 56%)) 10px minmax(420px, 1fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
  padding-top: 10px;
}

.semantic-studio-workspace .semantic-mapper-panel,
.semantic-studio-workspace .semantic-studio-config {
  position: relative;
  top: auto;
  align-self: stretch;
  height: 100%;
  max-height: none;
  min-height: 0;
}

.semantic-studio-workspace .semantic-mapper-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
  border-radius: 7px 0 0 7px;
}

.semantic-studio-workspace .semantic-mapper-viewer {
  height: 100%;
  min-height: 0;
}

.semantic-studio-workspace .semantic-studio-config {
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0 7px 7px 0;
}

.semantic-studio-modal .modal-actions {
  position: relative;
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 0 0;
}

.semantic-studio-modal .modal-actions > button {
  width: auto;
}

@media (max-width: 1180px) and (min-width: 768px) {
  .semantic-studio-workspace {
    grid-template-columns: minmax(300px, var(--semantic-preview-width, 52%)) 8px minmax(340px, 1fr);
  }
}

@media (max-width: 760px) {
  .role-detail-modal {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    padding: 8px;
  }

  .role-detail-modal .rights-table-scroll {
    overflow-x: auto;
  }

  .role-detail-modal .role-rights-table,
  .role-detail-modal .role-rights-table tbody,
  .role-detail-modal .role-rights-table tr,
  .role-detail-modal .role-rights-table th,
  .role-detail-modal .role-rights-table td {
    display: revert;
    width: auto !important;
  }

  .role-detail-modal .role-rights-table {
    display: table;
    width: 100%;
    min-width: 860px;
  }

  .role-detail-modal .role-rights-table thead {
    display: table-header-group;
  }

  .role-detail-modal .role-rights-table tbody {
    display: table-row-group;
  }

  .role-detail-modal .role-rights-table tr {
    display: table-row;
    padding: 0;
    border: 0;
  }

  .role-detail-modal .role-rights-table th,
  .role-detail-modal .role-rights-table td {
    display: table-cell;
    padding: 8px 10px;
    border-top: 1px solid var(--line);
  }

  .role-detail-modal .role-rights-table tbody th {
    margin: 0;
  }

.role-detail-modal .role-right-options {
    grid-template-columns: repeat(4, minmax(145px, 1fr));
  }
}

@media (max-width: 767px) {
  .semantic-studio-modal {
    display: block;
    width: calc(100vw - 8px);
    height: auto;
    max-height: calc(100dvh - 8px);
    overflow: auto;
    padding: 8px;
  }

  .semantic-studio-form {
    display: none;
  }
}

/* Version 1.47.0: consistent PDF tools and sequential field guidance. */
.semantic-mapper-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.semantic-mapper-toolbar .semantic-add-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 138px;
  min-height: 38px;
  padding: 7px 12px;
  overflow: hidden;
  line-height: 1.15;
}

.semantic-mapper-toolbar .semantic-add-field > span {
  color: inherit;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.semantic-mapper-toolbar .semantic-add-field .app-icon {
  width: 17px;
  min-width: 17px;
  height: 17px;
}

.semantic-zoom-control {
  display: grid;
  grid-template-columns: 38px 58px 38px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--alery-control-radius);
  background: var(--surface-raised);
}

.semantic-mapper-toolbar .semantic-zoom-control .icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.semantic-mapper-toolbar .semantic-zoom-control .icon-button:first-child {
  border-right: 1px solid var(--line);
}

.semantic-mapper-toolbar .semantic-zoom-control .icon-button:last-child {
  border-left: 1px solid var(--line);
}

.semantic-mapper-toolbar .semantic-zoom-control output {
  display: grid;
  place-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.document-context-field.navigation-current {
  outline: 3px solid color-mix(in srgb, var(--red) 28%, transparent);
  outline-offset: 2px;
  transition: outline-color 180ms ease;
}

@media (max-width: 1180px) and (min-width: 768px) {
  .semantic-mapper-actions {
    width: 100%;
  }
}

/* Version 1.50.0: direct PDF workspace and controlled protocol actions. */
.document-pdf-pane {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.document-pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.document-pdf-toolbar > span {
  display: grid;
  min-width: 0;
}

.document-pdf-toolbar > span small {
  color: var(--red);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.document-pdf-toolbar > span strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-pdf-toolbar .semantic-zoom-control {
  flex: none;
  grid-template-columns: 38px 58px 38px auto;
}

.document-pdf-toolbar .semantic-zoom-control .icon-button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
}

.document-pdf-toolbar .semantic-zoom-control output {
  display: grid;
  place-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.document-pdf-toolbar .document-pdf-fit {
  width: auto;
  min-width: 78px;
  min-height: 38px;
  padding: 6px 10px;
  border-width: 0 0 0 1px;
  border-radius: 0;
}

.document-direct-head,
.document-direct-actions,
.document-direct-group {
  display: flex;
  align-items: center;
}

.document-direct-head {
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px 6px;
}

.document-direct-head h3,
.document-direct-head p {
  margin: 0;
}

.document-direct-groups {
  display: grid;
  gap: 4px;
  padding: 4px 7px 8px;
}

.document-direct-group {
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.document-direct-group > span {
  display: grid;
  min-width: 0;
}

.document-direct-group small,
.document-direct-group b {
  color: var(--muted);
  font-size: 10px;
}

.document-direct-group strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-direct-group.active {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--surface));
}

.document-direct-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.document-direct-actions button {
  width: auto;
  min-height: 38px;
}

.document-overlay-field.is-filled input:not([type="checkbox"]),
.document-overlay-field.is-filled select,
.document-overlay-field.is-filled textarea {
  border-color: rgb(0 145 112 / 75%) !important;
  background: rgb(240 255 249 / 94%) !important;
}

.document-overlay-field.is-required-empty input:not([type="checkbox"]),
.document-overlay-field.is-required-empty select,
.document-overlay-field.is-required-empty textarea {
  border-color: rgb(235 0 60 / 78%) !important;
  background: rgb(255 244 247 / 94%) !important;
}

.document-overlay-field.navigation-current {
  z-index: 8;
  outline: 3px solid color-mix(in srgb, var(--red) 34%, transparent);
  outline-offset: 2px;
}

.document-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding-right: 8px;
}

.document-row-actions button {
  width: auto;
  min-height: 36px;
  padding: 6px 10px;
  white-space: nowrap;
}

.document-row-actions .app-icon {
  width: 16px;
  height: 16px;
}

.document-row-actions .icon-button {
  width: 36px;
  min-width: 36px;
  padding: 0;
}

@media (min-width: 701px) {
  .document-context-workspace .document-pdf-viewer {
    max-height: min(72dvh, 900px);
  }

  .document-original-toggle {
    display: none;
  }
}

@media (min-width: 860px) and (max-width: 1050px) {
  .document-context-workspace {
    grid-template-columns: minmax(500px, 1fr) minmax(250px, 310px);
  }

  .document-context-editor {
    position: sticky;
    max-height: min(72dvh, 900px);
  }
}

@media (max-width: 700px) {
  .document-pdf-toolbar {
    display: flex;
    flex-wrap: wrap;
  }

  .document-pdf-toolbar .semantic-zoom-control {
    grid-template-columns: 38px 48px 38px auto;
    max-width: 100%;
  }

  .document-row-actions {
    grid-column: 1;
    justify-content: stretch;
    padding: 0 8px 8px;
  }

  .document-row-actions button:not(.icon-button) {
    flex: 1 1 auto;
    min-width: 0;
  }

  .document-submission-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 1.53.0 final width override: large knowledge workspaces stay usable after legacy modal rules. */
.item-modal.knowledge-editor-modal,
.item-modal.knowledge-reader-modal {
  width: min(1420px, calc(100vw - 24px));
  max-width: min(1420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow-x: hidden;
}

@media (max-width: 820px) {
  .item-modal.knowledge-editor-modal,
  .item-modal.knowledge-reader-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
}

.document-export-workspace{display:grid;gap:14px}
.document-filter-panel{display:grid;gap:12px;padding:14px 0;border-block:1px solid var(--line,#d9deea)}
.document-filter-heading,.document-default-filter-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.document-filter-heading h3,.document-filter-heading p{margin:0}
.document-filter-heading p:last-child{margin-top:3px;color:var(--muted,#687083)}
.document-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}
.document-filter-picker,.document-filter-period,.document-filter-qualification>label,.document-default-filter-settings,.document-default-filter-settings>.document-default-filter-grid>fieldset{min-width:0;margin:0;border:1px solid var(--line,#d9deea);border-radius:7px;background:var(--surface,#fff)}
.document-filter-picker>summary{display:grid;gap:3px;min-height:58px;padding:9px 38px 9px 11px;cursor:pointer;list-style:none;position:relative}
.document-filter-picker>summary::-webkit-details-marker{display:none}
.document-filter-picker>summary::after{content:"⌄";position:absolute;top:50%;right:13px;transform:translateY(-50%);color:var(--muted,#687083);font-size:18px}
.document-filter-picker[open]>summary::after{content:"⌃"}
.document-filter-picker>summary span,.document-filter-period legend,.document-filter-qualification>label,.document-default-filter-settings legend{color:var(--muted,#687083);font-size:12px;font-weight:800}
.document-filter-picker>summary strong{min-width:0;overflow:hidden;color:var(--ink,#101528);text-overflow:ellipsis;white-space:nowrap}
.document-filter-options{display:grid;max-height:230px;overflow:auto;padding:6px;border-top:1px solid var(--line,#d9deea)}
.document-filter-option{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;min-height:40px;padding:6px;border-radius:5px;color:var(--ink,#101528);font-weight:700}
.document-filter-option:hover{background:var(--surface-soft,#f4f6fa)}
.document-filter-option input,.document-export-checkbox input{width:20px;height:20px;margin:0;accent-color:var(--brand-red,#eb003c)}
.document-filter-qualification{display:grid;gap:8px}
.document-filter-qualification>label{display:grid;gap:5px;padding:8px 10px 10px}
.document-filter-qualification select,.document-filter-period input{min-height:38px}
.document-filter-period{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 10px 10px}
.document-filter-period legend{padding-inline:4px}
.document-filter-period label{display:grid;gap:4px;color:var(--muted,#687083);font-size:12px;font-weight:800}
.document-filter-search{position:sticky;top:-6px;z-index:1;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:6px;padding:6px;background:var(--surface,#fff)}
.document-filter-search input{min-width:0;min-height:38px}
.document-filter-search .app-icon{width:18px;height:18px;color:var(--muted,#687083)}
.document-template-default-action{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px;padding:9px;border-top:1px solid var(--line,#d9deea);background:var(--surface-soft,#f4f6fa)}
.document-template-default-action span{display:grid;gap:2px}
.document-template-default-action small{color:var(--muted,#687083)}
.document-filter-chips{display:flex;flex-wrap:wrap;gap:6px}
.document-filter-chips button{display:inline-grid;grid-template-columns:minmax(0,auto) 16px;align-items:center;gap:6px;min-height:34px;max-width:100%;padding:5px 8px 5px 10px;border:1px solid color-mix(in srgb,var(--brand-red,#eb003c) 45%,var(--line,#d9deea));background:color-mix(in srgb,var(--brand-red,#eb003c) 8%,var(--surface,#fff));color:var(--ink,#101528)}
.document-filter-chips button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.document-filter-chips .app-icon{width:15px;height:15px}
.document-filter-error,.document-export-notice{display:flex;align-items:center;gap:7px;margin:0;padding:9px 10px;border-left:3px solid var(--danger,#b70030);background:color-mix(in srgb,var(--danger,#b70030) 8%,var(--surface,#fff));color:var(--ink,#101528)}
.document-filter-error .app-icon{flex:0 0 auto;width:18px;height:18px;color:var(--danger,#b70030)}
.document-export-notice{border-left-color:var(--brand-teal,#007d68)}
.document-export-toolbar{display:grid;grid-template-columns:minmax(230px,auto) auto 1fr auto;align-items:center;gap:9px;padding:10px;border:1px solid var(--line,#d9deea);border-radius:7px;background:var(--surface-soft,#f4f6fa)}
.document-export-toolbar>strong{justify-self:end;color:var(--ink,#101528)}
.document-export-error{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid color-mix(in srgb,var(--danger,#b70030) 45%,var(--line,#d9deea));border-radius:7px;background:color-mix(in srgb,var(--danger,#b70030) 8%,var(--surface,#fff))}
.document-export-error>div{display:grid;gap:3px}
.document-export-error span{color:var(--muted,#687083)}
.document-submission-row{grid-template-columns:42px minmax(220px,1fr) minmax(260px,1fr) auto;gap:0;overflow:hidden}
.document-submission-row.is-selected{border-color:var(--brand-red,#eb003c);box-shadow:inset 3px 0 var(--brand-red,#eb003c)}
.document-export-checkbox{align-self:stretch;display:grid;place-items:center;min-height:56px;cursor:pointer}
.document-submission-row>[data-preview-document]{display:flex;align-items:center;justify-content:space-between;min-width:0;min-height:56px;padding:9px 10px;border:0;background:transparent;color:inherit;text-align:left}
.document-submission-row>[data-preview-document]>span{display:grid;gap:2px;min-width:0}
.document-submission-row>[data-preview-document] strong,.document-submission-row>[data-preview-document] small{overflow-wrap:anywhere}
.document-submission-facts{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(170px,1.2fr);align-items:center;gap:9px;padding:8px 10px;border-left:1px solid var(--line,#d9deea)}
.document-submission-facts span{display:grid;gap:2px;color:var(--ink,#101528);overflow-wrap:anywhere}
.document-submission-facts b{color:var(--muted,#687083);font-size:11px;text-transform:uppercase}
.document-default-filter-settings{display:grid;gap:12px;padding:12px}
.document-default-filter-settings>legend{padding-inline:5px;color:var(--brand-navy,#000548);font-size:14px}
.document-default-filter-intro>div{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:start;gap:8px}
.document-default-filter-intro span{display:grid;gap:2px}
.document-default-filter-intro>span{display:block;padding:5px 8px;border-radius:5px;background:var(--surface-soft,#f4f6fa);color:var(--muted,#687083);font-weight:800}
.document-default-filter-intro small{color:var(--muted,#687083)}
.document-default-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.document-default-filter-settings>.document-default-filter-grid>fieldset{display:grid;align-content:start;gap:8px;padding:9px}
.document-default-filter-options{display:grid;max-height:170px;overflow:auto}
.document-default-filter-period{grid-template-columns:repeat(2,minmax(0,1fr))}
.document-default-filter-period label{display:grid;gap:4px}

@media (max-width:1180px){
  .document-submission-row{grid-template-columns:42px minmax(0,1fr) auto}
  .document-submission-facts{grid-column:2;border-top:1px solid var(--line,#d9deea);border-left:0}
  .document-row-actions{grid-column:3;grid-row:1/3}
}

@media (max-width:760px){
  .document-filter-grid,.document-default-filter-grid{grid-template-columns:minmax(0,1fr)}
  .document-filter-heading,.document-default-filter-intro,.document-export-error,.document-template-default-action{align-items:stretch;flex-direction:column}
  .document-export-toolbar{grid-template-columns:minmax(0,1fr) auto}
  .document-export-toolbar>strong{justify-self:start}
  .document-export-toolbar>button:last-child{grid-column:1/-1;width:100%}
  .document-submission-row{grid-template-columns:42px minmax(0,1fr)}
  .document-submission-facts,.document-row-actions{grid-column:1/-1;grid-row:auto}
  .document-submission-facts{grid-template-columns:minmax(0,1fr);padding-left:12px}
  .document-row-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px;border-top:1px solid var(--line,#d9deea)}
  .document-row-actions button:not(.icon-button){width:100%}
}

@media (max-width:430px){
  .document-filter-period,.document-default-filter-period,.document-export-toolbar,.document-row-actions{grid-template-columns:minmax(0,1fr)}
  .document-export-toolbar>button,.document-filter-heading>button{width:100%}
}


/* 1.54.0: responsive knowledge contact directory */
.knowledge-contact-overview{display:grid;gap:12px;margin-bottom:14px;padding:16px;border-block:1px solid var(--line,#d9deea);background:#fff}
.knowledge-contact-overview-head,.knowledge-contact-directory-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.knowledge-contact-overview-head h2,.knowledge-contact-overview-head p,.knowledge-contact-directory-head h2,.knowledge-contact-directory-head p{margin-top:0}
.knowledge-contact-cluster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.knowledge-contact-cluster-grid>button{min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:2px 9px;padding:11px;color:var(--ink,#101528);text-align:left;background:#f7f8fb;border:1px solid var(--line,#d9deea);border-radius:7px}
.knowledge-contact-cluster-grid>button:hover,.knowledge-contact-cluster-grid>button:focus-visible{border-color:#007d68;box-shadow:inset 3px 0 #007d68}
.knowledge-contact-cluster-grid>button>span{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;color:#fff;background:#000548;border-radius:6px}
.knowledge-contact-cluster-grid>button>strong,.knowledge-contact-cluster-grid>button>small{min-width:0;overflow-wrap:anywhere}
.knowledge-contact-cluster-grid>button>small{color:var(--muted,#687083)}
.knowledge-contact-cluster-grid>button>.app-icon{grid-column:3;grid-row:1/3}
.knowledge-contacts-directory{display:grid;gap:12px;min-width:0}
.knowledge-contact-search{grid-template-columns:minmax(230px,1.4fr) minmax(240px,1fr) minmax(150px,.55fr) auto;align-items:end;padding:12px;border:1px solid var(--line,#d9deea);background:#fff}
.knowledge-contact-cluster-filter{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin}
.knowledge-contact-cluster-filter button{flex:0 0 auto;padding:7px 10px;color:#000548;font-size:.84rem;font-weight:700;background:#fff;border:1px solid #aeb6c8;border-radius:6px}
.knowledge-contact-cluster-filter button.active{color:#fff;background:#000548;border-color:#000548}
.knowledge-contact-cluster-filter button span{margin-left:4px;padding:1px 5px;color:inherit;background:rgb(255 255 255/18%);border-radius:4px}
.knowledge-contact-directory-body{min-width:0;display:grid;grid-template-columns:minmax(300px,.72fr) minmax(420px,1.28fr);gap:10px;align-items:start}
.knowledge-contact-results{min-width:0;max-height:min(68dvh,820px);overflow:auto;border:1px solid var(--line,#d9deea);background:#fff}
.knowledge-contact-row{width:100%;min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:start;gap:9px;padding:11px;color:var(--ink,#101528);text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line,#d9deea);border-radius:0}
.knowledge-contact-row:last-child{border-bottom:0}
.knowledge-contact-row:hover,.knowledge-contact-row.active{background:#f1f8f6;box-shadow:inset 4px 0 #007d68}
.knowledge-contact-row>span:nth-child(2){min-width:0;display:grid;gap:3px}
.knowledge-contact-row strong,.knowledge-contact-row small,.knowledge-contact-row em{min-width:0;overflow-wrap:anywhere}
.knowledge-contact-row small,.knowledge-contact-row em{color:var(--muted,#687083);font-size:.82rem;font-style:normal;line-height:1.35}
.knowledge-contact-row-icon{width:36px;height:36px;display:grid;place-items:center;color:#fff;background:#000548;border-radius:6px}
.knowledge-contact-row-clusters{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.knowledge-contact-row-clusters i{padding:2px 5px;color:#066250;font-size:.7rem;font-style:normal;font-weight:700;background:#d7f2eb;border-radius:4px}
.knowledge-contact-detail{min-width:0;display:grid;gap:13px;padding:16px;border:1px solid var(--line,#d9deea);background:#fff}
.knowledge-contact-detail>header{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center}
.knowledge-contact-detail>header>span{width:44px;height:44px;display:grid;place-items:center;color:#fff;background:#000548;border-radius:7px}
.knowledge-contact-detail h3,.knowledge-contact-detail header p,.knowledge-contact-detail-section p,.knowledge-contact-jurisdiction p{margin:0}
.knowledge-contact-detail h3,.knowledge-contact-detail p,.knowledge-contact-detail strong{overflow-wrap:anywhere}
.knowledge-contact-jurisdiction{padding:12px;color:#073f36;background:#e3f5f0;border-left:4px solid #007d68}
.knowledge-contact-jurisdiction strong,.knowledge-contact-detail-section>strong{display:block;margin-bottom:5px;font-size:.78rem;letter-spacing:0;text-transform:uppercase}
.knowledge-contact-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:7px}
.knowledge-contact-actions a{min-width:0;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;padding:9px;color:#000548;text-decoration:none;background:#f7f8fb;border:1px solid var(--line,#d9deea);border-radius:6px}
.knowledge-contact-actions a:hover{border-color:#eb003c}
.knowledge-contact-actions a span{min-width:0;display:grid;gap:2px}
.knowledge-contact-actions a strong{font-size:.8rem}
.knowledge-contact-detail-section{padding-top:11px;border-top:1px solid var(--line,#d9deea)}
.knowledge-contact-admin-list{display:grid;margin-top:12px;border:1px solid var(--line,#d9deea)}
.knowledge-contact-admin-head,.knowledge-contact-admin-list article{min-width:0;display:grid;grid-template-columns:minmax(210px,.8fr) minmax(280px,1.5fr) auto;gap:10px;align-items:center;padding:9px 11px}
.knowledge-contact-admin-head{color:var(--muted,#687083);font-size:.72rem;font-weight:800;text-transform:uppercase;background:#f1f3f7}
.knowledge-contact-admin-list article{border-top:1px solid var(--line,#d9deea)}
.knowledge-contact-admin-list article>span{min-width:0;display:grid;gap:2px}
.knowledge-contact-admin-list article strong,.knowledge-contact-admin-list article small{overflow-wrap:anywhere}
.knowledge-contact-admin-list article small{color:var(--muted,#687083)}
@media(max-width:900px){.knowledge-contact-search{grid-template-columns:repeat(2,minmax(0,1fr))}.knowledge-contact-search button{width:100%}.knowledge-contact-directory-body{grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr)}}
@media(max-width:760px){.knowledge-contact-overview,.knowledge-contact-detail{padding:12px}.knowledge-contact-overview-head,.knowledge-contact-directory-head{align-items:stretch;flex-direction:column}.knowledge-contact-overview-head button{width:100%}.knowledge-contact-cluster-grid,.knowledge-contact-search,.knowledge-contact-directory-body{grid-template-columns:minmax(0,1fr)}.knowledge-contact-results{max-height:none}.knowledge-contact-detail{scroll-margin-top:12px}.knowledge-contact-actions{grid-template-columns:minmax(0,1fr)}.knowledge-contact-admin-head{display:none}.knowledge-contact-admin-list article{grid-template-columns:minmax(0,1fr) auto}.knowledge-contact-admin-list article>span:nth-child(2){grid-column:1/-1;grid-row:2}}
/* 1.55.0: structured knowledge library and reviewed contact proposals */
.knowledge-library-groups{display:grid;gap:18px;margin-top:14px}
.knowledge-library-group{min-width:0;padding-top:12px;border-top:2px solid #000548}
.knowledge-library-group>header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.knowledge-library-group>header>span{width:38px;height:38px;display:grid;place-items:center;color:#fff;background:#000548;border-radius:6px}
.knowledge-library-group>header>div{display:grid;gap:1px}
.knowledge-library-group h3,.knowledge-library-group small{margin:0}
.knowledge-library-group small{color:var(--muted,#687083)}
.knowledge-library-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px}
.knowledge-library-item{position:relative;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:8px;padding:12px;color:var(--ink,#101528);text-align:left;background:#fff;border:1px solid var(--line,#d9deea);border-radius:7px;overflow:hidden}
.knowledge-library-item:hover,.knowledge-library-item:focus-visible{border-color:#007d68;box-shadow:inset 4px 0 #007d68}
.knowledge-library-item-main{min-width:0;display:grid;gap:4px}
.knowledge-library-item-main>small{color:#007d68;font-size:.7rem;font-weight:800;text-transform:uppercase}
.knowledge-library-item-main>strong,.knowledge-library-item-main>span{overflow-wrap:anywhere}
.knowledge-library-item-main>span{display:-webkit-box;color:var(--muted,#687083);font-size:.82rem;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.knowledge-library-item-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}
.knowledge-library-item-meta b{padding:2px 6px;color:#000548;font-size:.7rem;background:#eef0f7;border-radius:4px}
.knowledge-library-item>.knowledge-card-progress{grid-column:1/-1;margin:0}
.knowledge-contact-directory-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.knowledge-contact-directory-actions button{min-height:38px}
.knowledge-contact-directory-actions button span{display:inline-grid;min-width:20px;margin-left:3px;padding:1px 5px;place-items:center;border-radius:4px;background:rgb(0 5 72/10%)}
.knowledge-contact-workspace{min-width:0}
.knowledge-contact-proposal-modal{width:min(920px,calc(100vw - 24px));max-height:94dvh;overflow:auto}
.knowledge-contact-proposal-editor{width:min(1080px,calc(100vw - 24px))}
.knowledge-contact-proposal-editor form{display:grid;gap:12px}
.knowledge-contact-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.knowledge-contact-form-grid label{min-width:0}
.knowledge-contact-form-grid .wide{grid-column:1/-1}
.knowledge-contact-card-scan{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:#eef7f5;border:1px solid #96d3c7}
.knowledge-contact-card-scan>div{display:flex;align-items:center;gap:10px}
.knowledge-contact-card-scan>div>span{width:38px;height:38px;display:grid;place-items:center;color:#fff;background:#007d68;border-radius:6px}
.knowledge-contact-card-scan>div>div{display:grid;gap:2px}
.knowledge-contact-card-scan small{color:var(--muted,#687083)}
.knowledge-contact-card-scan input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.knowledge-contact-card-scan .disabled{opacity:.6;pointer-events:none}
.knowledge-contact-proposal-list{display:grid;border:1px solid var(--line,#d9deea)}
.knowledge-contact-proposal-list>button{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr) 20px;align-items:center;gap:10px;padding:11px;color:var(--ink,#101528);text-align:left;background:#fff;border:0;border-bottom:1px solid var(--line,#d9deea);border-radius:0}
.knowledge-contact-proposal-list>button:last-child{border-bottom:0}
.knowledge-contact-proposal-list>button:hover{background:#f3f8f7}
.knowledge-contact-proposal-list>button>span:nth-child(2){min-width:0;display:grid;gap:2px}
.knowledge-contact-proposal-list strong,.knowledge-contact-proposal-list small,.knowledge-contact-proposal-list em{overflow-wrap:anywhere}
.knowledge-contact-proposal-list small,.knowledge-contact-proposal-list em{color:var(--muted,#687083);font-size:.8rem;font-style:normal}
.knowledge-proposal-status{display:inline-flex;align-items:center;width:max-content;padding:3px 7px;font-size:.72rem;font-weight:800;border-radius:4px}
.knowledge-proposal-status.pending{color:#7b4b00;background:#fff0c7}.knowledge-proposal-status.approved{color:#006553;background:#d9f4ec}.knowledge-proposal-status.rejected{color:#9e1737;background:#fde4eb}
.knowledge-contact-review-note{display:grid;gap:5px}
@media(max-width:760px){.knowledge-library-grid,.knowledge-contact-form-grid{grid-template-columns:minmax(0,1fr)}.knowledge-contact-form-grid .wide{grid-column:auto}.knowledge-contact-directory-actions{justify-content:flex-start}.knowledge-contact-directory-actions button{flex:1 1 auto}.knowledge-contact-card-scan{align-items:stretch;flex-direction:column}.knowledge-contact-card-scan .button-link{width:100%}.knowledge-contact-proposal-list>button{grid-template-columns:minmax(0,1fr) 20px}.knowledge-contact-proposal-list .knowledge-proposal-status{grid-column:1/-1}.knowledge-contact-proposal-modal .modal-actions{position:sticky;bottom:0;background:#fff}}

/* Version 1.60.0: guided, responsive evaluations. */
.report-workspace {
  display: grid;
  gap: 14px;
}

.report-guide {
  display: grid;
  gap: 14px;
  margin: 0;
}

.report-guide-heading,
.report-module-head,
.report-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.report-guide-heading h2,
.report-guide-heading p,
.report-module-head h3,
.report-module-head p {
  margin: 0;
}

.report-guide-heading > div:first-child {
  display: grid;
  gap: 3px;
}

.report-guide-heading > div:first-child > p:last-child {
  color: var(--muted, #687083);
  font-size: .84rem;
}

.report-export-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-question-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(168px, 1fr));
  gap: 0;
  overflow-x: auto;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  background: var(--surface, #fff);
}

.report-question-nav button {
  display: flex;
  min-width: 168px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  border-right: 1px solid var(--line, #d9deea);
  border-radius: 0;
  color: var(--blue, #000548);
  background: transparent;
  white-space: nowrap;
}

.report-question-nav button:last-child {
  border-right: 0;
}

.report-question-nav button.active {
  color: #fff;
  background: var(--blue, #000548);
}

.report-question-nav .app-icon {
  width: 19px;
  height: 19px;
}

.report-filter-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  background: var(--surface-subtle, #f7f8fb);
}

.report-filter-core {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
}

.report-filter-core > label {
  display: grid;
  min-width: 150px;
  gap: 4px;
}

.report-filter-core > label :where(input, select) {
  min-height: 40px;
}

.report-filter-drawers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-filter-drawers details,
.report-saved-views {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line, #d9deea);
  border-radius: 6px;
  background: var(--surface, #fff);
}

.report-filter-drawers summary,
.report-saved-views > summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--blue, #000548);
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.report-filter-drawers summary::-webkit-details-marker,
.report-saved-views > summary::-webkit-details-marker {
  display: none;
}

.report-filter-drawers summary b,
.report-saved-views > summary b {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 12px;
  color: var(--blue, #000548);
  background: var(--surface-muted, #eef1f7);
  font-size: .72rem;
}

.report-filter-drawers .app-icon,
.report-saved-views .app-icon {
  width: 18px;
}

.report-checklist {
  display: grid;
  gap: 7px;
  max-height: 240px;
  padding: 0 9px 9px;
  overflow: auto;
}

.report-checklist > div {
  display: grid;
  gap: 3px;
}

.report-checklist > div > label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  min-height: 38px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
}

.report-checklist > div > label:hover,
.report-checklist > div > label:has(input:checked) {
  background: color-mix(in srgb, var(--red, #eb003c) 7%, var(--surface, #fff));
}

.report-checklist input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
}

.report-filter-search {
  position: relative;
  display: block;
}

.report-filter-search .app-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--muted, #687083);
  pointer-events: none;
}

.report-filter-search input {
  width: 100%;
  min-height: 38px;
  padding-left: 34px;
}

.report-filter-footer {
  color: var(--muted, #687083);
  font-size: .76rem;
}

.report-view-tools {
  display: flex;
  justify-content: flex-end;
}

.report-saved-views {
  width: min(100%, 620px);
}

.report-saved-views form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 0 10px 10px;
}

.report-saved-views form label {
  display: grid;
  gap: 4px;
}

.report-saved-views form input,
.report-saved-views form button {
  min-height: 40px;
}

.report-saved-views > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px 10px;
}

.report-saved-views > div > span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.report-saved-views > p {
  padding: 0 10px 10px;
}

.report-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.report-kpis article {
  min-height: 104px;
  padding: 13px 14px;
  border-top: 3px solid var(--red, #eb003c);
  background: var(--surface-raised, #fff);
}

.report-kpis article:nth-child(2) {
  border-top-color: #007d68;
}

.report-kpis article:nth-child(3) {
  border-top-color: #1877b7;
}

.report-kpis article:nth-child(4) {
  border-top-color: #a76800;
}

.report-kpis article strong {
  font-variant-numeric: tabular-nums;
}

.report-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.report-module {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  background: var(--surface-raised, #fff);
}

.report-module-head {
  margin-bottom: 12px;
}

.report-module-head h3 {
  color: var(--blue, #000548);
  font-size: 1rem;
}

.report-trend-chart {
  display: flex;
  min-height: 220px;
  align-items: stretch;
  gap: 5px;
  overflow-x: auto;
  padding: 12px 4px 0;
  border-bottom: 1px solid var(--line, #d9deea);
}

.report-trend-column {
  display: grid;
  min-width: 34px;
  flex: 1 0 34px;
  grid-template-rows: minmax(150px, 1fr) auto;
  gap: 5px;
  text-align: center;
}

.report-trend-column > div {
  display: flex;
  min-height: 150px;
  align-items: end;
  justify-content: center;
  gap: 3px;
}

.report-trend-column i {
  width: min(16px, 42%);
  height: var(--height);
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--red, #eb003c);
}

.report-trend-column i.previous {
  background: #8b92a1;
}

.report-trend-column small {
  color: var(--muted, #687083);
  font-size: .65rem;
  white-space: nowrap;
}

.report-insights ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-insights li {
  position: relative;
  padding: 10px 10px 10px 36px;
  border-left: 3px solid #007d68;
  border-radius: 4px;
  background: color-mix(in srgb, #007d68 6%, var(--surface, #fff));
  line-height: 1.4;
}

.report-insights li::before {
  position: absolute;
  top: 8px;
  left: 10px;
  content: "✓";
  color: #007d68;
  font-weight: 900;
}

.report-ranking {
  display: grid;
  gap: 5px;
}

.report-ranking > :where(div, button) {
  display: grid;
  grid-template-columns: 28px minmax(120px, .8fr) minmax(100px, 1.5fr) 64px auto;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-bottom: 1px solid var(--line, #d9deea);
  border-radius: 0;
  color: var(--ink, #121522);
  background: transparent;
  text-align: left;
}

.report-ranking > button:hover,
.report-ranking > button:focus-visible {
  background: var(--surface-subtle, #f7f8fb);
}

.report-ranking-position {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--blue, #000548);
  background: var(--surface-muted, #eef1f7);
  font-size: .75rem;
  font-weight: 900;
}

.report-ranking-copy {
  display: grid;
  min-width: 0;
}

.report-ranking-copy :where(strong, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-ranking-copy small {
  color: var(--muted, #687083);
}

.report-ranking-bar {
  height: 9px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface-muted, #eef1f7);
}

.report-ranking-bar i {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red, #eb003c), #bd0031);
}

.report-ranking > :where(div, button) > b {
  text-align: right;
  white-space: nowrap;
}

.report-detail-table {
  overflow: hidden;
  border: 1px solid var(--line, #d9deea);
  border-radius: 6px;
}

.report-detail-head,
.report-detail-table > button {
  display: grid;
  grid-template-columns: 150px minmax(150px, .8fr) minmax(220px, 1.4fr) minmax(150px, .8fr) 76px;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
}

.report-detail-head {
  color: #fff;
  background: var(--blue, #000548);
  font-size: .75rem;
}

.report-detail-table > button {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-bottom: 1px solid var(--line, #d9deea);
  border-radius: 0;
  color: var(--ink, #121522);
  background: var(--surface, #fff);
  text-align: left;
}

.report-detail-table > button:last-child {
  border-bottom: 0;
}

.report-detail-table > button:hover,
.report-detail-table > button:focus-visible {
  background: var(--surface-subtle, #f7f8fb);
}

.report-detail-table :where(time, span) {
  display: grid;
  min-width: 0;
}

.report-detail-table :where(time, span) small {
  overflow: hidden;
  color: var(--muted, #687083);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.report-detail-table > button > b {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1050px) {
  .report-filter-drawers,
  .report-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-detail-table {
    overflow-x: auto;
  }

  .report-detail-head,
  .report-detail-table > button {
    min-width: 850px;
  }
}

@media (max-width: 680px) {
  .report-guide-heading,
  .report-module-head,
  .report-filter-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .report-module-head > .count-badge {
    align-self: flex-start;
  }

  .report-export-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-export-actions button {
    width: 100%;
  }

  .report-question-nav {
    display: flex;
    scroll-snap-type: x mandatory;
  }

  .report-question-nav button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .report-filter-core {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-filter-core > label {
    min-width: 0;
  }

  .report-period-navigation {
    align-self: end;
  }

  .report-saved-views,
  .report-view-tools {
    width: 100%;
  }

  .report-saved-views form {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-kpis article {
    min-height: 96px;
  }

  .report-ranking > :where(div, button) {
    grid-template-columns: 28px minmax(0, 1fr) 64px auto;
  }

  .report-ranking-bar {
    grid-column: 2 / -1;
  }

  .report-detail-head {
    display: none;
  }

  .report-detail-table {
    display: grid;
    gap: 7px;
    overflow: visible;
    border: 0;
  }

  .report-detail-table > button {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 11px;
    border: 1px solid var(--line, #d9deea);
    border-left: 4px solid var(--red, #eb003c);
    border-radius: 6px;
  }

  .report-detail-table > button > :where(time, strong, span) {
    grid-column: 1;
  }

  .report-detail-table > button > b {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 420px) {
  .report-filter-core,
  .report-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}
.knowledge-team-documents{min-width:0;display:grid;gap:14px;padding:18px;background:#fff;border:1px solid var(--line,#d9deea)}
.knowledge-team-upload{display:grid;gap:11px;padding:14px;background:#f5f7fa;border:1px solid #cbd2df}
.knowledge-team-upload-head{display:flex;align-items:start;justify-content:space-between;gap:12px}
.knowledge-team-upload-head h3,.knowledge-team-upload-head p{margin:0}
.knowledge-team-upload-head>span{color:var(--muted,#687083);font-size:.78rem;font-weight:700}
.knowledge-team-upload-form{display:grid;grid-template-columns:minmax(240px,1fr) minmax(180px,.45fr);gap:9px 12px}
.knowledge-team-upload-form label{min-width:0}
.knowledge-team-upload-form .wide{grid-column:1/-1}
.knowledge-team-upload-form textarea{min-height:70px}
.knowledge-team-upload-actions{display:flex;justify-content:flex-end}
.knowledge-team-document-categories{display:grid;gap:16px}
.knowledge-team-document-category-group{display:grid;gap:9px}
.knowledge-team-document-category-group>header{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line,#d9deea)}
.knowledge-team-document-category-group>header>span{width:38px;height:38px;display:grid;place-items:center;color:#000548;background:#eef1f7;border-radius:6px}
.knowledge-team-document-category-group>header>div{min-width:0;display:grid;gap:2px}
.knowledge-team-document-category-group>header h3,.knowledge-team-document-category-group>header p{margin:0}
.knowledge-team-document-category-group>header p{color:var(--muted,#687083);font-size:.8rem}
.knowledge-team-document-category-group>header>b{min-width:28px;padding:4px 7px;text-align:center;background:#eef1f7;border-radius:4px}
.knowledge-team-document-admin{display:grid;gap:14px}
.knowledge-team-upload-actions button{display:inline-flex;align-items:center;gap:7px}
.knowledge-team-document-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:9px}
.knowledge-team-document-card{min-width:0;display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:13px;border:1px solid var(--line,#d9deea);border-radius:7px;background:#fff}
.knowledge-team-document-icon{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:#000548;border-radius:6px}
.knowledge-team-document-main{min-width:0;display:grid;align-content:start;gap:5px}
.knowledge-team-document-main h3,.knowledge-team-document-main p{margin:0;overflow-wrap:anywhere}
.knowledge-team-document-main p{color:var(--muted,#687083);line-height:1.4}
.knowledge-team-document-category{width:max-content;padding:2px 6px;color:#006653;font-size:.7rem;font-weight:800;text-transform:uppercase;background:#dff3ee;border-radius:4px}
.knowledge-team-document-meta{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--muted,#687083);font-size:.76rem}
.knowledge-team-document-meta span{min-width:0;overflow-wrap:anywhere}
.knowledge-team-document-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding-top:9px;border-top:1px solid var(--line,#d9deea)}
.knowledge-team-document-actions .button-link{display:inline-flex;align-items:center;gap:7px}
@media(max-width:760px){.knowledge-team-documents{padding:12px}.knowledge-team-upload-head{align-items:stretch;flex-direction:column}.knowledge-team-upload-form,.knowledge-team-document-grid{grid-template-columns:minmax(0,1fr)}.knowledge-team-upload-form .wide{grid-column:auto}.knowledge-team-upload-actions,.knowledge-team-document-actions{align-items:stretch;flex-direction:column}.knowledge-team-upload-actions button,.knowledge-team-document-actions .button-link,.knowledge-team-document-actions button{width:100%;justify-content:center}.knowledge-team-document-card{grid-template-columns:38px minmax(0,1fr)}.knowledge-team-document-icon{width:38px;height:38px}}

/* Version 1.58.0: sichere Dokumentvorschau und verwaltbare Fachkontaktkarten. */
.button-link.secondary,a.secondary{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:7px;padding:0 16px;color:var(--blue,#000548);font-weight:800;text-decoration:none;background:var(--surface-raised,#fff);border:1px solid var(--blue,#000548);border-radius:var(--alery-control-radius,5px)}
.button-link.secondary:hover,a.secondary:hover{filter:brightness(.96)}
.download-button,.preview-button{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.download-button,.admin-shell button.download-button{min-height:42px;padding:0 16px;color:var(--blue,#000548);background:var(--surface-raised,#fff);border:1px solid var(--blue,#000548)}
.download-button .app-icon,.preview-button .app-icon{width:18px;height:18px}
.knowledge-team-document-card{grid-template-columns:minmax(0,1fr);padding:0;overflow:hidden}
.knowledge-team-document-preview-trigger{min-width:0;min-height:0;display:grid;grid-template-columns:42px minmax(0,1fr) 20px;align-items:start;gap:10px;padding:13px;color:var(--ink,#101528);text-align:left;background:#fff;border:0;border-radius:0}
.knowledge-team-document-preview-trigger:hover,.knowledge-team-document-preview-trigger:focus-visible{background:#f2f8f6;box-shadow:inset 4px 0 #007d68;filter:none}
.knowledge-team-document-preview-trigger>.app-icon{align-self:center;color:#000548}
.knowledge-team-document-preview-trigger .knowledge-team-document-main{display:grid}
.knowledge-team-document-preview-trigger .knowledge-team-document-main>strong{font-size:1rem;overflow-wrap:anywhere}
.knowledge-team-document-description{color:var(--muted,#687083);line-height:1.4;overflow-wrap:anywhere}
.knowledge-team-document-actions{grid-column:1;padding:9px 13px}
.knowledge-team-document-preview-modal{width:min(1180px,calc(100vw - 24px));height:min(900px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;overflow:hidden}
.knowledge-team-document-preview-frame{min-width:0;min-height:0;display:grid;place-items:center;overflow:auto;background:#eef0f4;border:1px solid var(--line,#d9deea)}
.knowledge-team-document-preview-frame iframe{width:100%;height:100%;min-height:520px;border:0;background:#fff}
.knowledge-team-document-preview-frame img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.knowledge-team-document-preview-unavailable{max-width:620px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:start;padding:24px}
.knowledge-team-document-preview-unavailable>.app-icon{width:48px;height:48px;color:#000548}
.knowledge-team-document-preview-unavailable h3,.knowledge-team-document-preview-unavailable p{margin:0}
.knowledge-team-document-preview-unavailable p{margin-top:6px;color:var(--muted,#687083);line-height:1.5}
.knowledge-team-document-preview-modal .modal-actions{margin:0;padding-top:10px;background:#fff}
.knowledge-contact-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:10px;margin-top:14px}
.knowledge-contact-admin-card{min-width:0;display:grid;align-content:start;gap:11px;padding:13px;background:#fff;border:1px solid var(--line,#d9deea);border-radius:7px}
.knowledge-contact-admin-card>header{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center}
.knowledge-contact-admin-card>header>span{width:42px;height:42px;display:grid;place-items:center;color:#fff;background:#000548;border-radius:6px}
.knowledge-contact-admin-card>header>div{min-width:0}
.knowledge-contact-admin-card h3,.knowledge-contact-admin-card header p,.knowledge-contact-admin-card p{margin:0;overflow-wrap:anywhere}
.knowledge-contact-admin-topics{display:flex;flex-wrap:wrap;gap:4px}
.knowledge-contact-admin-topics strong,.knowledge-contact-admin-topics span{padding:3px 6px;color:#066250;font-size:.72rem;background:#d7f2eb;border-radius:4px}
.knowledge-contact-admin-jurisdiction{padding:10px;color:#073f36;background:#e3f5f0;border-left:4px solid #007d68}
.knowledge-contact-admin-jurisdiction>strong,.knowledge-contact-admin-address>strong{display:block;margin-bottom:4px;font-size:.72rem;text-transform:uppercase}
.knowledge-contact-admin-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.knowledge-contact-admin-methods a{min-width:0;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:7px;padding:8px;color:#000548;text-decoration:none;background:#f7f8fb;border:1px solid var(--line,#d9deea);border-radius:6px}
.knowledge-contact-admin-methods a span{min-width:0;display:grid;gap:1px;font-size:.75rem}.knowledge-contact-admin-methods a strong{overflow-wrap:anywhere;font-size:.78rem}
.knowledge-contact-admin-card details{padding-top:8px;border-top:1px solid var(--line,#d9deea)}.knowledge-contact-admin-card summary{color:#000548;font-weight:800;cursor:pointer}.knowledge-contact-admin-card details p{margin-top:6px;color:var(--muted,#687083);line-height:1.45}
.knowledge-contact-admin-card>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--line,#d9deea)}.knowledge-contact-admin-card>footer>span{min-width:0;color:var(--muted,#687083);font-size:.75rem;overflow-wrap:anywhere}
@media(max-width:760px){.knowledge-team-document-preview-trigger{grid-template-columns:38px minmax(0,1fr) 18px}.knowledge-team-document-preview-modal{width:calc(100vw - 10px);height:calc(100dvh - 10px);max-height:calc(100dvh - 10px);padding:10px}.knowledge-team-document-preview-frame iframe{min-height:0}.knowledge-team-document-preview-modal .modal-actions{display:grid;grid-template-columns:1fr}.knowledge-contact-admin-grid,.knowledge-contact-admin-methods{grid-template-columns:minmax(0,1fr)}.knowledge-contact-admin-card>footer{align-items:stretch;flex-direction:column}.knowledge-contact-admin-card>footer button{width:100%}}

/* Version 1.59.0: aufgabenorientierte Navigation und ruhiger Arbeitsstart. */
.identity-area-name {
  display: grid;
  gap: 2px;
  min-width: 180px;
  padding: 7px 10px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 6px;
  color: var(--ink, #101528);
  background: var(--surface-raised, #fff);
  font-weight: 800;
}

.identity-area-name small {
  color: var(--red, #eb003c);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.identity-area {
  width: min(320px, 30vw);
  min-width: 0;
}

.identity-area > span {
  color: var(--red, #eb003c);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.identity-area select {
  width: 100%;
  min-height: 38px;
  border-radius: 6px;
  font-weight: 800;
}

@media (min-width: 1121px) {
  .identity-user {
    grid-template-columns: auto minmax(240px, 320px);
  }
}

@media (max-width: 1120px) and (min-width: 761px) {
  .brandmark div,
  .identity-profile > span:nth-child(2),
  .identity-profile .profile-chevron {
    display: none;
  }

  .identity-user {
    grid-template-columns: 42px minmax(210px, 280px);
  }

  .identity-area {
    width: 100%;
  }
}

.today-status-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  background: var(--surface-raised, #fff);
}

.today-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.today-status-heading h2,
.today-status-heading p,
.today-status-heading small {
  margin: 0;
}

.today-status-heading h2 {
  color: var(--blue, #000548);
  font-size: 18px;
}

.today-status-heading small {
  color: var(--muted, #687083);
}

.today-inbox-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 230px;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 6px;
  color: var(--blue, #000548);
  background: var(--surface, #fff);
  text-align: left;
}

.today-inbox-button:hover,
.today-inbox-button:focus-visible {
  border-color: var(--blue, #000548);
  filter: none;
}

.today-inbox-button.has-unread {
  border-color: color-mix(in srgb, var(--red, #eb003c) 55%, var(--line, #d9deea));
  background: color-mix(in srgb, var(--red, #eb003c) 5%, var(--surface, #fff));
}

.today-inbox-button > .app-icon {
  width: 22px;
  height: 22px;
}

.today-inbox-button > span {
  display: grid;
  min-width: 0;
}

.today-inbox-button small {
  overflow: hidden;
  color: var(--muted, #687083);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-inbox-button b {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  color: #fff;
  background: var(--red, #eb003c);
  font-size: 10px;
}

.today-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line, #d9deea);
  border-radius: 6px;
  overflow: hidden;
}

.today-status-item {
  display: grid;
  grid-template-columns: 34px auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 64px;
  padding: 9px 10px;
  border: 0;
  border-right: 1px solid var(--line, #d9deea);
  border-radius: 0;
  color: var(--ink, #101528);
  background: var(--surface, #fff);
  text-align: left;
}

.today-status-item:last-child {
  border-right: 0;
}

.today-status-item:hover,
.today-status-item:focus-visible {
  background: color-mix(in srgb, var(--blue, #000548) 4%, var(--surface, #fff));
  filter: none;
}

.today-status-item > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: var(--blue, #000548);
  background: #eef0f7;
}

.today-status-item.has-value > span:first-child {
  color: #9e1737;
  background: #fde4eb;
}

.today-status-item > strong {
  color: var(--blue, #000548);
  font-size: 20px;
}

.today-status-item > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.today-status-item b,
.today-status-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.today-status-item b {
  font-size: 11px;
}

.today-status-item small {
  color: var(--muted, #687083);
  font-size: 9px;
}

.today-status-item > .app-icon:last-child {
  width: 16px;
  color: var(--muted, #687083);
}

.overview-priority-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
}

.today-next-planning .personal-upcoming-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.today-next-planning .personal-upcoming-item:first-child {
  border-left: 4px solid #007d68;
  background: color-mix(in srgb, #007d68 5%, var(--surface, #fff));
}

.today-open-services .count-badge {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 17px;
}

.today-open-services .open-service-list {
  margin-top: 10px;
}

.availability-list {
  gap: 8px;
  margin-top: 8px;
}

.availability-entry {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 11px 13px;
  border: 1px solid var(--line, #d7dce7);
  border-left: 4px solid #a76800;
  border-radius: 6px;
  color: var(--ink, #121522);
  background: var(--surface-raised, #fff);
  text-align: left;
  box-shadow: 0 1px 2px rgba(5, 12, 45, .04);
}

.availability-entry.is-editable:hover,
.availability-entry.is-editable:focus-visible {
  border-color: color-mix(in srgb, #a76800 55%, var(--line, #d7dce7));
  border-left-color: #a76800;
  background: var(--surface-subtle, #f7f8fb);
  box-shadow: 0 3px 10px rgba(5, 12, 45, .07);
}

.availability-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 5px;
  color: #a76800;
  background: #fff1d5;
}

.availability-icon .app-icon {
  width: 18px;
  height: 18px;
}

.availability-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.availability-copy > strong {
  color: var(--ink, #121522);
  font-size: .9rem;
  font-weight: 850;
  line-height: 1.25;
}

.availability-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  color: var(--muted, #626a7a);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.4;
}

.availability-meta > span + span::before {
  content: "·";
  margin-right: 7px;
  color: #a4a9b5;
}

.availability-note {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 12px;
  color: #7a4c00;
  background: #fff1d5;
  font-size: .7rem;
  font-weight: 850;
}

.availability-arrow {
  display: grid;
  place-items: center;
  color: var(--muted, #626a7a);
}

.availability-arrow .app-icon {
  width: 17px;
  height: 17px;
}

.availability-team-panel .count-badge {
  background: #a76800;
}

@media (max-width: 560px) {
  .availability-entry {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 64px;
    padding: 10px;
  }

  .availability-icon {
    width: 32px;
    height: 32px;
  }

  .availability-meta > span {
    flex-basis: 100%;
  }

  .availability-meta > span + span::before {
    content: none;
  }
}

.knowledge-unified-search {
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(360px, 1.35fr);
  gap: 14px 24px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line, #d9deea);
  background: var(--surface-raised, #fff);
}

.knowledge-unified-search h2,
.knowledge-unified-search p {
  margin: 0;
}

.knowledge-unified-search h2 {
  color: var(--blue, #000548);
  font-size: 20px;
}

.knowledge-unified-search > div:first-child > p:last-child {
  margin-top: 4px;
  color: var(--muted, #687083);
  font-size: 12px;
}

.knowledge-unified-search form {
  align-self: center;
}

.knowledge-unified-search form > label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted, #687083);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.knowledge-unified-search form > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding-left: 12px;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  background: var(--surface, #fff);
}

.knowledge-unified-search form > div:focus-within {
  border-color: var(--blue, #000548);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, #000548) 12%, transparent);
}

.knowledge-unified-search form .app-icon {
  width: 19px;
  color: var(--muted, #687083);
}

.knowledge-unified-search input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.knowledge-unified-search form button[type="submit"] {
  min-height: 38px;
  margin-right: 4px;
  border-radius: 5px;
}

.knowledge-unified-search form .icon-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  color: var(--blue, #000548);
  background: #eef0f7;
}

.knowledge-unified-results {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line, #d9deea);
  border-radius: 7px;
  overflow: hidden;
}

.knowledge-unified-result-summary {
  display: flex;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #d9deea);
  background: #f4f5f8;
}

.knowledge-unified-result-summary strong {
  color: var(--blue, #000548);
}

.knowledge-unified-result-summary span {
  color: var(--muted, #687083);
  font-size: 11px;
}

.knowledge-unified-results > section {
  min-width: 0;
  padding: 10px 12px 12px;
  border-right: 1px solid var(--line, #d9deea);
}

.knowledge-unified-results > section:last-child {
  border-right: 0;
}

.knowledge-unified-results > section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.knowledge-unified-results > section > header h3 {
  margin: 0;
  color: var(--blue, #000548);
  font-size: 12px;
}

.knowledge-unified-results > section > header button {
  min-height: 30px;
  padding: 4px 7px;
  border: 0;
  color: var(--blue, #000548);
  background: transparent;
  font-size: 9px;
}

.knowledge-unified-results > section > header button span {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: 3px;
  border-radius: 10px;
  color: #fff;
  background: var(--blue, #000548);
}

.knowledge-unified-results > section > div {
  display: grid;
}

.knowledge-unified-results > section > div > button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 4px;
  border: 0;
  border-top: 1px solid var(--line, #d9deea);
  border-radius: 0;
  color: var(--ink, #101528);
  background: transparent;
  text-align: left;
}

.knowledge-unified-results > section > div > button:hover,
.knowledge-unified-results > section > div > button:focus-visible {
  background: #f7f8fa;
  filter: none;
}

.knowledge-unified-results > section > div > button > span:first-child {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  color: var(--blue, #000548);
  background: #eef0f7;
}

.knowledge-unified-results > section > div > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.knowledge-unified-results > section > div > button strong,
.knowledge-unified-results > section > div > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knowledge-unified-results > section > div > button strong {
  font-size: 10px;
}

.knowledge-unified-results > section > div > button small {
  color: var(--muted, #687083);
  font-size: 9px;
}

.knowledge-unified-results > section > div > button > .app-icon:last-child {
  width: 14px;
  color: var(--muted, #687083);
}

@media (max-width: 1050px) {
  .today-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-status-item:nth-child(2n) {
    border-right: 0;
  }

  .today-status-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line, #d9deea);
  }

  .overview-priority-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-unified-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .knowledge-unified-results > section,
  .knowledge-unified-results > section:last-child {
    border-right: 0;
    border-bottom: 1px solid var(--line, #d9deea);
  }

  .knowledge-unified-results > section:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 760px) {
  .identity-area {
    width: min(52vw, 220px);
    min-width: 0;
  }

  .knowledge-unified-search {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px 12px;
  }

  .knowledge-unified-search form > div {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }

  .knowledge-unified-search form button[type="submit"] {
    grid-column: 1 / -1;
    width: calc(100% + 2px);
    margin: 0 0 -1px -1px;
    border-radius: 0 0 6px 6px;
  }

  .knowledge-unified-result-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .today-status-panel {
    padding: 12px;
  }

  .today-status-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .today-inbox-button {
    width: 100%;
    min-width: 0;
  }

  .today-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .today-status-item,
  .today-status-item:nth-child(2n),
  .today-status-item:nth-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--line, #d9deea);
  }

  .today-status-item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 390px) {
  .identity-area {
    width: min(48vw, 180px);
  }
}