:root {
  color-scheme: light;
  --red: #eb003c;
  --brand-navy: #000548;
  --navy: var(--brand-navy);
  --red-soft: #ffccd8;
  --blue: #000548;
  --blue-soft: #deeefc;
  --yellow: #deff00;
  --green: #00a68b;
  --grey: #f0f0f0;
  --surface: #ffffff;
  --ink: #14141a;
  --muted: #626878;
  --line: #d9dce7;
  --warn: #eb003c;
  --ok: #007d68;
  --shadow: 0 14px 36px rgba(0, 5, 72, 0.08);
  font-family: "Maven Pro", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mobile-release-admin { display: grid; gap: 16px; }
.mobile-release-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mobile-release-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; }
.mobile-release-card fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 12px; }
.mobile-release-card label { min-width: 0; }
.mobile-release-card small { color: var(--muted); }
.mobile-release-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mobile-release-stats span { display: grid; align-content: center; min-height: 58px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .78rem; text-align: center; }
.mobile-release-stats strong { color: var(--ink); font-size: 1.15rem; }
.mobile-release-channels, .mobile-release-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mobile-release-actions button { flex: 1 1 180px; }
@media (max-width: 900px) { .mobile-release-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mobile-release-card { padding: 12px; } .mobile-release-card fieldset, .mobile-release-stats { grid-template-columns: 1fr; } }

/* 1.13.0: licensed documentation workspace and personal avatars */
.documentation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
  gap: 14px;
}

.document-import {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.document-import summary,
.document-schema-editor summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
}

.document-import form,
.document-schema-editor form {
  padding: 0 14px 14px;
}

.document-template-list {
  display: grid;
  gap: 7px;
}

.document-template-list > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.document-template-list > button span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.document-template-list small {
  color: var(--muted);
}

.document-modal {
  width: min(960px, calc(100vw - 24px));
}

.document-fill-form,
.document-fields {
  display: grid;
  gap: 12px;
}

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

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

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

.document-field-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

.document-field-control input,
.document-field-control select,
.document-field-control textarea {
  width: 100%;
  min-width: 0;
}

.document-dictate {
  color: var(--red);
}

.document-guidance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--grey);
}

.document-completion-status {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-subtle, var(--grey));
}

.document-completion-status p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

.document-status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.document-status-badge {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  color: var(--warn);
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.document-status-badge.complete,
.document-status-badge.signed {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: var(--ok);
}

.document-status-badge.sent {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}

.document-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 8px 8px;
}

.document-row-actions button {
  min-height: 34px;
  padding: 6px 10px;
}

.document-schema-editor {
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

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

.profile-menu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.profile-logout {
  border-color: var(--red);
  color: var(--red);
}

.profile-avatar-settings {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.profile-avatar-preview {
  grid-row: span 2;
}

.profile-avatar,
.identity-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--avatar-color, var(--brand-navy));
  color: #fff;
  font-weight: 800;
}

.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: 1.5rem;
}

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

.avatar-comic {
  background-color: #dceef2;
  overflow: hidden;
}

.avatar-comic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.profile-avatar-options {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.profile-avatar-options > div {
  display: grid;
  gap: 6px;
}

.profile-avatar-options > div > strong {
  color: var(--muted);
  font-size: .78rem;
}

.profile-image-choice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.profile-image-choice .avatar-option {
  grid-column: 1 / -1;
}

.avatar-preset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-preset-list label {
  position: relative;
}

.avatar-preset-list input {
  position: absolute;
  opacity: 0;
}

.avatar-preset-list span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: var(--avatar-color);
  color: #fff;
  font-weight: 800;
}

.avatar-preset-list input:checked + span {
  border-color: var(--yellow);
  outline: 2px solid var(--brand-navy);
}

.comic-avatar-list span {
  background-color: #dceef2;
}

@media (max-width: 800px) {
  .documentation-layout,
  .document-fields,
  .document-schema-editor fieldset {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-history {
    order: 2;
  }

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

  .profile-avatar-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-avatar-preview {
    grid-row: auto;
  }

  .profile-image-choice {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-logout {
    display: inline-flex;
  }
}

/* Compact lists and responsive detail dialogs added in 1.12.0. */
.service-type-admin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.upcoming-appointment-compact,
.calendar-day-service,
.calendar-import-list > button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(112px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.upcoming-appointment-compact time,
.upcoming-appointment-compact > span,
.calendar-day-service > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.upcoming-appointment-compact time span,
.upcoming-appointment-compact small,
.calendar-day-service small {
  color: var(--muted);
  font-size: .78rem;
}

.compact-appointment-list,
.calendar-day-service-list {
  display: grid;
  gap: 7px;
}

.calendar-day-service {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  border-left: 4px solid #d62828;
}

.calendar-day-service.staffed {
  border-left-color: #16834a;
}

.calendar-import-list > button {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  margin-bottom: 7px;
}

.calendar-import-list > button i {
  width: 12px;
  height: 36px;
  border-radius: 4px;
}

.calendar-import-list > button > span {
  display: grid;
  gap: 2px;
}

.year-mini-days button.has-items {
  color: #fff;
  overflow: hidden;
  background: var(--avatar-color, var(--red));
  font-weight: 800;
}

.import-invitation-action {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 8px;
}

@media (max-width: 760px) {
  .service-type-admin-list {
    grid-template-columns: 1fr;
  }

  .upcoming-appointment-compact {
    grid-template-columns: 1fr auto;
  }

  .upcoming-appointment-compact time,
  .upcoming-appointment-compact > span {
    grid-column: 1;
  }

  .upcoming-appointment-compact > b {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .modal-actions > button,
  .compact-action-modal button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
}

/* 1.10.2: compact open services and collision-aware calendar entries */
.open-service-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.open-service-compact {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 62px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.open-service-compact:hover,
.open-service-compact:focus-visible {
  background: var(--surface-subtle, #f7f8fb);
  filter: none;
  box-shadow: none;
}

.open-service-alert-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  color: #b6002a;
  background: #fde7ec;
}

.open-service-alert-icon .app-icon {
  width: 17px;
  height: 17px;
}

.open-service-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.open-service-copy > strong {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.open-service-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 7px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
}

.open-service-meta > span::before {
  content: "·";
  margin-right: 7px;
}

.open-service-meta time,
.open-service-meta > span {
  color: inherit;
  font: inherit;
  white-space: nowrap;
}

.open-service-arrow {
  color: var(--muted);
  font-size: 1.25rem;
  text-align: center;
}

.calendar-entry-cluster {
  display: grid;
  grid-template-columns: repeat(var(--entry-count), minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.calendar-entry-cluster .calendar-entry {
  min-width: 0;
}

.week-calendar-entry {
  justify-self: start;
  width: calc((100% - (var(--lane-count) - 1) * 4px) / var(--lane-count));
  margin-left: calc(var(--lane-index) * (100% / var(--lane-count)));
}

@media (max-width: 760px) {
  .open-service-compact {
    grid-template-columns: 32px minmax(0, 1fr) 20px;
    gap: 9px;
    min-height: 58px;
    padding: 9px 0;
  }

  .open-service-alert-icon {
    width: 30px;
    height: 30px;
  }

  .open-service-copy > strong {
    font-size: .78rem;
  }

  .open-service-meta {
    font-size: .68rem;
  }

  .calendar-entry-cluster {
    gap: 2px;
  }

  .calendar-entry-cluster .calendar-entry {
    padding-inline: 3px;
    border-left-width: 3px;
  }

  .calendar-entry-cluster .calendar-entry small:last-child {
    display: none;
  }
}

/* Hotfix 1.9.1 */
.overview-dashboard.has-message-dock {
  grid-template-columns: minmax(0, 1fr);
}

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

.metric-card,
.mailbox-card {
  display: grid;
  min-height: 104px;
  align-content: center;
  justify-items: start;
  padding-block: 14px;
}

.mailbox-card {
  width: 100%;
  height: 100%;
  min-height: 104px;
}

input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="number"] {
  min-height: 42px;
  line-height: 42px;
  text-align: center;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value {
  min-height: 40px;
  line-height: 40px;
  text-align: center;
}

.service-code-preview {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .overview-dashboard.has-message-dock .overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .overview-dashboard.has-message-dock .overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Version 1.10.1: compact dialogs and communication layout */
.service-code-preview {
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1;
}

.item-modal,
.admin-detail-modal,
.area-modal,
.notice-modal,
.calendar-link-modal {
  width: min(820px, calc(100vw - 24px));
  max-height: min(860px, calc(100dvh - 24px));
  padding: clamp(14px, 2vw, 20px);
  overflow: auto;
}

.admin-detail-modal .panel-head,
.message-focus .panel-head {
  position: sticky;
  z-index: 4;
  top: 0;
  margin: -4px -4px 12px;
  padding: 4px;
  background: var(--surface-raised);
}

.service-type-editor {
  display: grid;
  grid-template-columns: 52px repeat(3, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.service-type-editor .service-default-requirements,
.service-type-editor .area-multi-select,
.service-type-editor .service-type-actions {
  grid-column: 1 / -1;
}

.service-type-editor label,
.admin-detail-form label,
.modal-form label {
  min-width: 0;
}

.service-type-editor input,
.service-type-editor select,
.admin-detail-form input,
.admin-detail-form select,
.modal-form input,
.modal-form select {
  min-height: 38px;
}

.service-type-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.service-type-actions button {
  width: auto;
  min-width: 150px;
}

.message-focus {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding-top: 12px;
}

.message-focus .panel-head {
  align-items: center;
  padding-right: 2px;
}

.message-focus .panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-focus .modal-close {
  flex: 0 0 42px;
  margin-left: 8px;
}

.message-focus .dock-composer {
  margin: 0;
  padding: 12px;
  border-radius: 6px;
}

.message-focus .dock-message-list {
  max-height: min(58dvh, 560px);
}

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

  .service-type-editor,
  .admin-detail-form,
  .modal-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-type-editor .service-code-preview {
    justify-self: start;
  }

  .service-type-editor > *,
  .service-type-editor .service-default-requirements,
  .service-type-editor .area-multi-select,
  .service-type-editor .service-type-actions {
    grid-column: 1;
  }

  .service-type-actions,
  .message-focus .panel-actions {
    flex-wrap: wrap;
  }

  .service-type-actions button {
    width: 100%;
  }
}

/* Role ranks, hierarchy planning and compact responsive controls added in 1.22.0. */
:root {
  --control-height: 42px;
}

.avatar-comic,
.identity-avatar.avatar-comic {
  background-color: #dceef2;
  overflow: hidden;
}

.identity-avatar {
  background-color: var(--red);
}

.identity-avatar.avatar-comic {
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.avatar-preset-list .avatar-comic {
  width: 44px;
  height: 44px;
  display: grid;
  border-radius: 50%;
}

.role-basics {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr);
  gap: 10px;
}

.role-basics label {
  min-width: 0;
}

.role-basics small {
  color: var(--muted);
  font-size: .72rem;
}

.rank-access-notice {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--red) 5%, var(--surface-raised));
}

.rank-access-notice svg {
  width: 20px;
  color: var(--red);
}

.rank-access-notice span {
  display: grid;
}

.rank-access-notice small {
  color: var(--muted);
}

.member-directory-row.rank-protected {
  border-left-color: var(--muted);
}

.area-role-row {
  padding-left: min(calc(var(--area-depth, 0) * 14px), 56px);
}

.area-drag-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .78rem;
}

.area-drag-hint svg {
  width: 16px;
}

.area-root-drop {
  min-height: 34px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: .76rem;
  transition: .15s ease;
}

.area-root-drop.drop-active {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface-raised));
  color: var(--red);
}

.area-tree-row {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 0;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.area-tree-row.dragging {
  opacity: .45;
}

.area-tree-row.drop-child {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--surface-raised));
}

.area-tree-row.drop-before::before,
.area-tree-row.drop-after::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}

.area-tree-row.drop-before::before {
  top: -5px;
}

.area-tree-row.drop-after::after {
  bottom: -5px;
}

.area-drag-handle {
  width: 34px;
  height: 100%;
  min-height: 54px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.area-drag-handle:active {
  cursor: grabbing;
}

.area-tree-open {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.area-tree-open > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.area-tree-open small {
  overflow: hidden;
  color: var(--muted);
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-type-admin-row {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.service-type-admin-row .compact-admin-row {
  border: 0;
  border-radius: 6px 0 0 6px;
}

.service-type-more {
  width: 38px;
  min-height: 100%;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0 6px 6px 0;
  background: transparent;
}

.record-action-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  min-width: 190px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

.record-action-menu button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.record-action-menu button:hover {
  background: var(--surface-subtle);
}

.record-action-menu svg {
  width: 16px;
}

.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;
}

:where(.toolbar, .roster-toolbar, .report-toolbar, .area-create-form, .compact-create, .member-form, .panel-actions, .period-navigation) {
  align-items: end;
}

:where(.toolbar, .roster-toolbar, .report-toolbar, .area-create-form, .compact-create, .member-form, .panel-actions)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, button),
.segmented > button,
.period-navigation > button {
  min-height: var(--control-height);
  height: var(--control-height);
  box-sizing: border-box;
}

:where(.toolbar, .roster-toolbar, .report-toolbar, .area-create-form, .compact-create, .member-form) > label {
  min-width: 0;
}

:where(.toolbar, .roster-toolbar, .report-toolbar, .area-create-form, .compact-create, .member-form) :where(input, select) {
  width: 100%;
  min-width: 0;
}

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

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

.period-navigation {
  min-height: var(--control-height);
  display: flex;
  align-items: stretch;
  gap: 6px;
}

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

@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;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
  }

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

@media (max-width: 600px) {
  .role-basics {
    grid-template-columns: minmax(0, 1fr);
  }

  .area-tree-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .area-drag-handle {
    width: 32px;
  }

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

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .toolbar .segmented {
    grid-column: 1 / -1;
    width: 100%;
  }

  .toolbar > label {
    width: 100%;
  }
}

/* Version 1.21.0 final workspace state guarantees */
.workspace-tabs button.active,
.workspace-tabs button.active:hover,
.admin-group-nav button.active,
.admin-group-nav button.active:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
}

/* Version 1.21.0: task-oriented workspaces and administration */
.workspace-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.workspace-tabs {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  scrollbar-width: thin;
}

.workspace-tabs button {
  display: inline-grid;
  grid-template-columns: 20px auto auto;
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: max-content;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
}

.workspace-tabs button:hover {
  background: var(--surface-soft);
  color: var(--ink);
}

.workspace-tabs button.active {
  background: var(--navy);
  color: #fff;
}

.workspace-tabs button .app-icon {
  width: 19px;
  height: 19px;
}

.workspace-tabs button b {
  display: grid;
  min-width: 21px;
  min-height: 21px;
  place-items: center;
  padding: 1px 5px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--red) 88%, white);
  color: #fff;
  font-size: .72rem;
}

.workspace-content {
  min-width: 0;
}

.workspace-two-column {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr);
  gap: 12px;
  align-items: start;
}

.workspace-two-column > .wide {
  grid-column: 1 / -1;
}

.workspace-intro {
  margin: -3px 0 14px;
  color: var(--muted);
  line-height: 1.45;
}

.overview-tools-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.overview-tools-grid.single > .panel {
  max-width: none;
}

.notice-board-title > button {
  margin-inline-start: auto;
}

.notification-center-list {
  display: grid;
  gap: 6px;
}

.notification-center-list > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
}

.notification-center-list > button.unread {
  border-inline-start: 4px solid var(--red);
  background: color-mix(in srgb, var(--red) 5%, var(--surface-raised));
}

.notification-kind {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--navy);
}

.notification-kind .app-icon {
  width: 18px;
}

.notification-center-list button > span:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-center-list small,
.notification-center-list em {
  overflow: hidden;
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-center-list button > b {
  color: var(--red);
  font-size: .74rem;
}

.notification-chevron {
  width: 15px;
  transform: rotate(-90deg);
}

.notice-management-list {
  display: grid;
  gap: 8px;
}

.notice-management-list > article {
  display: grid;
  gap: 4px;
}

.notice-management-list > article > small {
  padding-inline: 10px;
  color: var(--muted);
  font-size: .75rem;
}

.admin-navigation {
  display: grid;
  grid-template-columns: minmax(205px, .34fr) minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.admin-group-nav {
  display: grid;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-raised);
}

.admin-group-nav button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.admin-group-nav button.active {
  background: var(--navy);
  color: #fff;
}

.admin-group-nav .app-icon {
  width: 17px;
}

.admin-navigation .admin-subnav {
  align-content: start;
  margin: 0;
}

.inheritance-settings {
  display: grid;
  gap: 6px;
}

.inheritance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-raised);
}

.inheritance-row > span {
  display: grid;
  gap: 2px;
}

.inheritance-row small {
  color: var(--muted);
}

.inheritance-row select {
  min-height: 36px;
}

.effective-access-badge,
.status-chip {
  display: inline-grid;
  width: max-content;
  min-height: 25px;
  place-items: center;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}

.effective-access-badge.inherited {
  background: color-mix(in srgb, #1877b7 12%, var(--surface-raised));
  color: #126398;
}

.effective-access-badge.local,
.status-chip.ok {
  background: color-mix(in srgb, #007d68 13%, var(--surface-raised));
  color: #006250;
}

.area-role-row {
  grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) auto;
}

.area-role-row .area-assignment > span {
  display: grid;
}

.area-role-row .area-assignment small {
  color: var(--muted);
  font-size: .72rem;
}

.rights-explanation {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.rights-explanation p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
}

.role-rights-table .unlicensed-feature {
  opacity: .68;
}

.role-rights-table th > span,
.role-rights-table th > small {
  display: block;
}

.role-rights-table th > small {
  margin-top: 3px;
  color: var(--red);
  font-size: .68rem;
}

.license-kpis,
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.license-kpis article,
.system-status-grid article {
  display: grid;
  gap: 3px;
  min-height: 94px;
  align-content: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
}

.license-kpis strong {
  font-size: 1.45rem;
}

.license-kpis span,
.license-kpis small,
.system-status-grid small {
  color: var(--muted);
}

.system-status-grid article {
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
}

.system-status-grid .app-icon {
  width: 25px;
  color: var(--navy);
}

.system-status-grid article > span {
  display: grid;
  gap: 4px;
}

.migration-security-note {
  display: grid;
  gap: 4px;
  margin: 14px 0;
  padding: 12px 14px;
  border-left: 4px solid var(--red);
  background: var(--surface-soft);
}

.migration-security-note p {
  margin: 0;
  color: var(--muted);
}

.migration-export-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 14px 0 8px;
}

@media (max-width: 600px) {
  .migration-export-actions button {
    width: 100%;
  }
}

.license-package-list,
.package-price-grid {
  display: grid;
  gap: 8px;
}

.license-package-list {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.license-package-list article {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.license-package-list article.active {
  border-color: color-mix(in srgb, #007d68 46%, var(--line));
}

.license-package-list article > span {
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.license-package-list article.active > span {
  color: #007d68;
}

.license-package-list small {
  color: var(--muted);
  line-height: 1.35;
}

.package-price-grid > section,
.config-package {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.package-price-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.package-price-head > span,
.config-package > div:first-child {
  display: grid;
  gap: 2px;
}

.package-price-head small,
.config-package small {
  color: var(--muted);
}

.config-package {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.platform-owner-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--red) 5%, var(--surface-raised));
}

.platform-owner-banner .app-icon {
  width: 26px;
  color: var(--red);
}

.platform-owner-banner > div {
  display: grid;
  gap: 2px;
}

.system-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.system-link-list a {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--navy);
  font-weight: 750;
  text-decoration: none;
}

@media (max-width: 900px) {
  .workspace-tabs {
    margin-inline: -2px;
  }

  .workspace-two-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-navigation {
    display: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-navigation.open {
    display: grid;
  }

  .admin-group-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-navigation .admin-subnav {
    display: grid;
    position: static;
    max-height: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .area-role-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .license-kpis,
  .system-status-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .workspace-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

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

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

  .notification-center-list > button {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .notification-center-list .notification-chevron {
    display: none;
  }

  .notification-center-list small,
  .notification-center-list em {
    white-space: normal;
  }

  .admin-group-nav {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .notice-board-title {
    align-items: start;
  }

  .notice-board-title > button {
    grid-column: 1 / -1;
    width: 100%;
    margin: 6px 0 0;
  }
}

/* Version 1.14.0 final cascade guarantees */
.tabs::before {
  display: none;
}

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

.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 {
  color: var(--muted);
}

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

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

.brandbar {
  height: var(--alery-header);
}

.brandmark div > span i {
  display: inline-block;
}

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

.identity-profile > span:nth-child(2) strong,
.identity-profile > span:nth-child(2) small {
  display: block;
}

.identity-profile .profile-chevron {
  display: block;
}

main:not(.auth-shell):not(.configurator-shell) {
  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 {
  color: var(--ink);
}

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

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

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

.metric-card {
  grid-template-columns: 34px 1fr 14px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  min-height: 90px;
  padding: 13px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.metric-card .metric-icon {
  grid-column: 1;
  grid-row: 1 / 3;
}

.metric-card .metric-value {
  grid-column: 2;
  grid-row: 1;
}

.metric-card p {
  grid-column: 2;
  grid-row: 2;
}

.metric-card .metric-chevron {
  grid-column: 3;
  grid-row: 1 / 3;
}

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

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

  .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 {
    height: var(--alery-header);
  }

  .mobile-menu-toggle {
    display: grid;
  }

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

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

  .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: auto;
  }

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

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

  .identity-profile > span:nth-child(2),
  .identity-profile .profile-chevron,
  #logoutButton {
    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 {
    grid-template-columns: 30px 1fr;
    min-height: 78px;
    padding: 10px;
  }

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

@media (max-width: 390px) {
  .overview-dashboard.has-message-dock .overview,
  .overview {
    grid-template-columns: 1fr;
  }
}

/* Version 1.14.0: neutral Alery platform design system */
: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);
}

.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);
}

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

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

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

.brandmark div > span i {
  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 .profile-chevron {
  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 {
  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 {
  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;
}

.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;
}

.nav-admin {
  margin-bottom: 2px;
}

.mobile-nav-head {
  border-bottom-color: var(--line);
}

.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) {
  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);
}

.panel-head {
  gap: 12px;
}

.panel-head h2,
.panel-head h3 {
  margin-top: 2px;
}

.eyebrow {
  letter-spacing: .04em;
}

.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 {
  border-left: 1px solid var(--line);
}

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

.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;
}

.overview-columns,
.planning-grid,
.admin-grid,
.documentation-layout {
  gap: 12px;
}

input,
select,
textarea {
  border-color: var(--line-strong);
  border-radius: var(--alery-control-radius);
  background: var(--surface-raised);
}

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

button:not(.secondary):not(.icon-button):not(.metric-card):not(.mailbox-card):not(.tabs button):not(.admin-subnav button):not(.calendar-day-button):not(.day):not(.calendar-entry):not(.member-directory-row):not(.compact-admin-row) {
  font-weight: 730;
}

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

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

.modal-close,
.mobile-nav-close {
  display: grid;
  place-items: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: var(--alery-control-radius);
}

.modal-close .app-icon,
.mobile-nav-close .app-icon {
  width: 18px;
  height: 18px;
}

.admin-nav-wrap {
  margin-bottom: 12px;
}

.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:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

.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);
}

.auth-brand img {
  border-radius: var(--alery-radius);
}

html[data-theme="dark"] {
  --alery-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px rgba(0, 0, 0, .15);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --alery-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px rgba(0, 0, 0, .15);
  }
}

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

  .tabs {
    padding-inline: 9px;
  }

  .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;
  }

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

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

  .brandmark {
    max-width: 31vw;
  }
}

@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);
    border-radius: var(--alery-control-radius);
    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;
    grid-template-columns: none;
    gap: 5px;
  }

  .identity-profile {
    padding: 2px;
  }

  .identity-profile > span:last-of-type,
  .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;
    font-size: .74rem;
  }

  .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;
    border: 0;
    color: var(--muted);
  }

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

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

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

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

  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-bottom: 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;
    column-gap: 8px;
  }

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

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

  .metric-card .metric-value {
    font-size: 1.13rem;
  }

  .metric-card p {
    font-size: .67rem;
  }

  .admin-nav-toggle {
    border: 1px solid var(--line);
    border-radius: var(--alery-control-radius);
    background: var(--surface-raised);
  }

  .admin-subnav {
    border-radius: var(--alery-radius);
  }

  .panel {
    padding: 13px;
  }
}

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

  .overview-dashboard.has-message-dock .overview,
  .overview {
    grid-template-columns: 1fr;
  }

  .metric-card,
  .mailbox-card {
    min-height: 68px;
  }
}

/* Keep lane offsets after legacy calendar margin declarations. */
.week-calendar-entry {
  justify-self: start;
  width: calc((100% - (var(--lane-count) - 1) * 4px) / var(--lane-count));
  margin-left: calc(var(--lane-index) * (100% / var(--lane-count)));
}

/* Version 1.9: compact administration, focused mailbox and report charts */
.mailbox-card {
  width: 100%;
  min-height: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-sm);
}

.mailbox-card span,
.mailbox-card small {
  display: block;
}

.mailbox-card strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--blue);
  font-size: 1.4rem;
}

.mailbox-card.has-unread {
  border-color: var(--red);
  box-shadow: inset 4px 0 0 var(--red), var(--shadow-sm);
}

.message-focus-backdrop {
  z-index: 120;
}

.message-focus {
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: min(860px, calc(100vh - 32px));
  overflow: auto;
}

.compact-create {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.compact-create input,
.compact-create button {
  width: 100%;
  min-height: 42px;
}

.compact-admin-list {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.compact-admin-row {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.compact-admin-row:hover {
  border-color: var(--red);
  background: var(--surface-raised);
}

.compact-admin-row span,
.compact-admin-row small {
  display: block;
  min-width: 0;
}

.compact-admin-row small {
  margin-top: 3px;
  color: var(--muted);
}

.admin-detail-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.admin-detail-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-detail-form .area-multi-select,
.admin-detail-form .modal-actions {
  grid-column: 1 / -1;
}

.calendar-import-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.calendar-import-summary i {
  width: 12px;
  height: 42px;
  border-radius: 4px;
}

.calendar-import-summary span {
  display: block;
  color: var(--muted);
}

.report-controls {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 16px;
  align-items: start;
}

.report-member-filter {
  display: grid;
  gap: 6px;
}

.report-member-filter select {
  width: 100%;
  min-height: 128px;
}

.report-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.report-kpis article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.report-kpis span,
.report-kpis small,
.report-kpis strong {
  display: block;
}

.report-kpis strong {
  margin: 5px 0;
  color: var(--blue);
  font-size: 1.6rem;
}

.report-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.report-chart {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.chart-legend {
  color: var(--muted);
  font-size: .76rem;
}

.chart-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  background: var(--red);
}

.chart-legend i:nth-of-type(2) {
  background: var(--muted);
}

.report-chart article {
  display: grid;
  grid-template-columns: minmax(90px, 140px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  font-size: .82rem;
}

.chart-bars {
  display: grid;
  gap: 3px;
}

.chart-bars span {
  display: flex;
  width: max(3px, var(--bar));
  min-height: 18px;
  align-items: center;
  padding: 1px 5px;
  background: var(--red);
  color: white;
}

.chart-bars span.previous {
  background: var(--muted);
}

.chart-bars b {
  white-space: nowrap;
  font-size: .72rem;
}

@media (max-width: 760px) {
  .compact-create,
  .admin-detail-form,
  .report-controls,
  .report-kpis,
  .report-charts {
    grid-template-columns: minmax(0, 1fr);
  }

  .compact-create button,
  .modal-actions button {
    width: 100%;
  }

  .report-chart article {
    grid-template-columns: minmax(80px, 110px) minmax(0, 1fr);
  }
}

.calendar-entry[draggable="true"],
.week-calendar-entry[draggable="true"] { cursor: grab; }

.calendar-entry.dragging,
.week-calendar-entry.dragging { cursor: grabbing; opacity: .45; }

[data-drop-date].drop-target {
  outline: 3px solid var(--green);
  outline-offset: -3px;
  background: #e5f6f2;
}

.personal-upcoming { margin-bottom: 16px; }

.personal-upcoming-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.personal-upcoming-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  color: var(--blue);
  text-align: left;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 4px;
}

.personal-upcoming-item span,
.personal-upcoming-item small,
.direct-message span { color: var(--muted); font-size: .8rem; }

.messages-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 16px;
}

.message-form { max-width: 720px; }

.message-form select[multiple],
.messages-layout aside select[multiple] { min-height: 130px; }

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

.direct-message {
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 4px;
  background: var(--surface-raised);
}

.direct-message div { display: grid; gap: 5px; }
.direct-message p { margin: 0; white-space: pre-wrap; }

.copy-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 6px;
}

.copy-field input { min-width: 0; }

@media (max-width: 800px) {
  .messages-layout,
  .copy-field { grid-template-columns: 1fr; }
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--grey);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
  max-width: 100%;
}

button,
input,
select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

button {
  border-color: var(--red);
  background: var(--red);
  color: white;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 800;
}

button:hover {
  filter: brightness(0.94);
}

button.secondary {
  border-color: var(--blue);
  background: var(--surface-raised);
  color: var(--blue);
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  background: var(--surface-raised);
  color: var(--ink);
  padding: 0 10px;
}

input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="number"] {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
}

textarea {
  min-height: 74px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  resize: vertical;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  max-width: 760px;
  color: var(--blue);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0;
}

h2 {
  color: var(--blue);
  font-size: 1.1rem;
}

h3 {
  color: var(--blue);
  font-size: 1rem;
  margin-top: 4px;
}

main,
.brandbar,
.tabs {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0 16px;
}

.brandmark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brandmark img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.brandmark strong,
.brandmark span {
  display: block;
}

.brandmark strong {
  color: var(--red);
  font-size: 1.1rem;
  font-weight: 900;
}

.brandmark div > span {
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 700;
}

.identity {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: min(100%, 430px);
}

.identity div {
  display: grid;
  gap: 2px;
  text-align: right;
}

.identity strong {
  color: var(--blue);
}

.identity span {
  color: var(--muted);
  font-size: 0.8rem;
}

.identity-user {
  display: grid;
  gap: 2px;
  min-width: 190px;
}

.identity-area {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}

.identity .identity-area span,
.identity-area-name {
  color: var(--muted);
  font-size: .72rem;
}

.identity-area select {
  min-height: 32px;
  padding: 4px 28px 4px 8px;
  background: var(--surface-raised);
  color: var(--blue);
  font-size: .78rem;
}

label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.tabs button,
.segmented button {
  min-width: max-content;
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--blue);
}

.tabs button.active,
.segmented button.active {
  border-color: var(--blue);
  background: var(--brand-navy);
  color: white;
}

.mobile-menu-toggle,
.mobile-nav-head,
.navigation-backdrop,
.admin-nav-toggle {
  display: none;
}

.hero {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  min-height: 210px;
  margin-bottom: 14px;
  padding: 26px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(38%, 420px);
  border-left: 24px solid var(--red);
  background: var(--brand-navy);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero p:not(.eyebrow) {
  max-width: 610px;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 600;
}

.eyebrow {
  color: var(--red);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.overview-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 12px;
}

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

.overview-dashboard .overview {
  margin-bottom: 0;
}

.message-dock {
  min-height: 0;
  padding: 12px;
}

.message-dock .panel-head {
  margin-bottom: 8px;
}

.dock-message-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}

.dock-message {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px 10px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  background: var(--surface-raised);
}

.dock-message:hover {
  background: var(--blue-soft);
  filter: none;
}

.dock-message span,
.dock-message time {
  color: var(--muted);
  font-size: .72rem;
}

.dock-message p {
  margin: 0;
  overflow: hidden;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dock-message.system-message {
  cursor: default;
}

.dock-composer {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.dock-composer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dock-composer label {
  display: grid;
  gap: 3px;
  font-size: .76rem;
  font-weight: 700;
}

.dock-composer textarea {
  min-height: 68px;
}

.metric-card,
.panel,
.shift-card,
.year-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}

.metric-card {
  display: block;
  width: 100%;
  min-height: 94px;
  text-align: left;
  padding: 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-top: 5px solid var(--red);
  background: var(--surface-raised);
  color: var(--ink);
}

.metric-card:hover,
.metric-card.active {
  border-top-color: var(--blue);
  background: var(--blue-soft);
  filter: none;
}

.overview span {
  display: block;
  color: var(--blue);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
}

.overview p,
.shift-card p,
.mini-row p,
.hint,
.missing {
  color: var(--muted);
  font-size: 0.9rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.toolbar > label {
  min-width: 150px;
}

.toolbar .period-navigation {
  align-self: flex-end;
}

.segmented {
  display: flex;
  gap: 6px;
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 14px;
  align-items: start;
  padding-bottom: 32px;
}

.layout.without-side {
  grid-template-columns: minmax(0, 1fr);
}

.panel {
  padding: 16px;
}

.side {
  display: grid;
  gap: 14px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.grid-form {
  display: grid;
  grid-template-columns: 110px 180px 1.2fr repeat(3, minmax(110px, 0.7fr)) 1fr 150px;
  gap: 8px;
  margin-bottom: 14px;
}

.grid-form.item-form {
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  padding: 14px;
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.item-form > button,
.form-wide {
  grid-column: 1 / -1;
}

.grid-form.compact {
  grid-template-columns: 1fr 70px 160px;
}

.requirements {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--grey);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.stack {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.timeline,
.mini-list {
  display: grid;
  gap: 10px;
}

.shift-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-left: 6px solid var(--service-color, var(--red));
}

.shift-card.termin {
  border-left-color: var(--blue);
}

.date {
  color: var(--red);
  font-weight: 900;
}

.status-row {
  display: flex;
  align-items: start;
  gap: 8px;
  justify-content: end;
  white-space: nowrap;
}

.pill,
.chips span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 900;
}

.ok {
  color: var(--ok);
}

.warning {
  color: var(--warn);
}

.chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.missing {
  grid-column: 1 / -1;
  color: var(--warn);
  font-weight: 800;
}

.assign-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 110px 150px;
  gap: 8px;
}

.assign-row.complete {
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.volunteer-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.volunteer-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.calendar-head,
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-head {
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.day {
  min-height: 112px;
  padding: 8px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.day.muted {
  background: var(--grey);
}

.day > strong {
  display: block;
  color: var(--blue);
  margin-bottom: 6px;
}

.day-number {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--blue);
}

.day-number:hover {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--blue);
  filter: none;
}

.calendar-entry {
  display: grid;
  width: 100%;
  min-height: 0;
  margin-top: 4px;
  padding: 5px 6px;
  border: 0;
  border-left: 5px solid var(--entry-color);
  background: color-mix(in srgb, var(--entry-color) 14%, white);
  color: var(--blue);
  text-align: left;
}

.calendar-entry:hover {
  filter: brightness(0.97);
}

.calendar-entry.dienst.staffed,
.week-calendar-entry.dienst.staffed {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 18%, white);
}

.calendar-entry.dienst.understaffed,
.week-calendar-entry.dienst.understaffed {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 16%, white);
}

.calendar-entry strong,
.calendar-entry small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-entry small {
  color: var(--muted);
  font-size: 0.66rem;
  white-space: nowrap;
}

.calendar-annotations {
  display: grid;
  gap: 3px;
  margin: 2px 0 5px;
}

.calendar-annotations span {
  display: block;
  min-height: 5px;
  overflow: hidden;
  padding: 2px 5px;
  border-left: 4px solid var(--annotation-color);
  background: color-mix(in srgb, var(--annotation-color) 20%, white);
  color: var(--blue);
  font-size: .62rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-annotations.compact {
  display: flex;
  width: 100%;
  margin: 2px 0 0;
}

.calendar-annotations.compact span {
  flex: 1;
  min-width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--annotation-color);
}

.service-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
  padding: 10px;
  background: var(--grey);
  color: var(--muted);
  font-size: 0.78rem;
}

.service-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.service-legend i {
  width: 12px;
  height: 12px;
}

.calendar-quick-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 18px;
  padding: 14px;
  border-left: 6px solid var(--red);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.form-intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--blue);
}

.form-intro span {
  color: var(--muted);
  font-size: 0.8rem;
}

.quick-requirements {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
}

.calendar-quick-form .form-error {
  grid-column: 1 / -1;
}

.calendar-hint {
  margin-bottom: 14px;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.week-day {
  min-width: 0;
  min-height: 220px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.week-date {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px;
  border: 0;
  border-bottom: 3px solid var(--red);
  background: var(--grey);
  color: var(--blue);
}

.week-day > div {
  padding: 6px;
}

.week-day p {
  color: var(--muted);
  font-size: 0.72rem;
}

.day span {
  display: block;
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  color: white;
  font-size: 0.74rem;
  font-weight: 800;
}

.day span.dienst {
  background: var(--red);
}

.day span.termin {
  background: var(--brand-navy);
}

.year-grid,
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-bottom: 32px;
}

.year-card {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-top: 5px solid var(--blue);
}

.year-card strong {
  color: var(--blue);
  text-transform: capitalize;
}

.year-card span {
  color: var(--muted);
  font-weight: 700;
}

.wide {
  grid-column: 1 / -1;
}

.flash {
  position: fixed;
  z-index: 300;
  top: 12px;
  left: 50%;
  width: min(520px, calc(100% - 24px));
  padding: 13px 16px;
  border-left: 5px solid var(--green);
  background: var(--surface-raised);
  color: var(--blue);
  font-weight: 800;
  box-shadow: 0 14px 38px rgba(0, 5, 72, .24);
  transform: translate(-50%, -140%);
  animation: save-toast 4s ease forwards;
}

@keyframes save-toast {
  0% { opacity: 0; transform: translate(-50%, -140%); }
  10%, 78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -140%); visibility: hidden; }
}

.metric-details {
  margin-bottom: 12px;
  padding: 16px;
  border-left: 6px solid var(--blue);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.notice-board {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
  padding: 14px;
  border: 2px solid var(--red);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.notice-board-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notice-board-title > span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 1.5rem;
  font-weight: 900;
}

.notice-board article {
  padding: 10px 12px;
  border-left: 5px solid var(--yellow);
  background: var(--brand-navy);
  color: white;
}

.notice-board article p {
  margin: 4px 0;
}

.notice-board article small {
  color: #dfe2ff;
}

.notice-card-button {
  display: grid;
  width: 100%;
  min-height: 0;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  text-align: left;
}

.notice-card-button:hover {
  filter: none;
  text-decoration: underline;
}

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-weight: 900;
}

.open-services {
  padding: 2px;
}

.empty-success {
  padding: 14px;
  border-left: 5px solid var(--green);
  background: #e5f6f2;
  color: #005f50;
  font-weight: 800;
}

.section-divider {
  height: 1px;
  margin: 22px 0;
  background: var(--line);
}

.email-trigger-settings {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--grey);
}

.email-trigger-settings .hint {
  margin: 2px 0 0;
}

.unsaved-backdrop {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 5, 72, .5);
}

.unsaved-dialog {
  width: min(520px, 100%);
  padding: 24px;
  border-top: 8px solid var(--red);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 24px 60px rgba(0, 5, 72, .24);
}

.unsaved-dialog h2 {
  margin: 5px 0 10px;
  font-size: 1.35rem;
}

.unsaved-dialog > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.5;
}

.unsaved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

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

.edit-row {
  display: grid;
  grid-template-columns: 24px minmax(180px, 1fr) 72px 110px;
  gap: 8px;
  align-items: center;
}

.edit-row.qualification-row {
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.7fr) auto 110px;
}

.panel-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 48px;
  padding: 0 10px;
  border-color: var(--blue);
  background: var(--surface-raised);
  color: var(--blue);
}

.icon-button.active {
  background: var(--brand-navy);
  color: white;
}

.eye-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50% / 60%;
}

.eye-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.inactive-row {
  padding: 10px;
  border-left: 5px solid var(--muted);
  background: var(--grey);
  opacity: 0.78;
}

.inline-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto);
  gap: 8px;
  margin-bottom: 14px;
}

.inline-create button {
  white-space: normal;
}

.service-type-form,
.service-type-editor {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) 90px 120px 120px 80px minmax(150px, auto);
  gap: 8px;
  align-items: end;
}

.service-default-requirements {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--grey);
}

.service-default-requirements > strong {
  grid-column: 1 / -1;
  color: var(--blue);
  font-size: 0.82rem;
}

.service-type-form {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.service-type-list {
  display: grid;
  gap: 10px;
}

.service-type-editor {
  grid-template-columns: 56px minmax(160px, 1.4fr) 80px 110px 110px 70px 145px auto 110px;
}

.service-type-form > button {
  grid-column: 1 / -1;
  width: min(100%, 240px);
  justify-self: end;
}

.service-type-editor > button {
  width: 100%;
  min-width: 0;
}

.service-code-preview {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  color: white;
  font-weight: 900;
}

.member-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) minmax(170px, auto);
  gap: 8px;
  margin-bottom: 16px;
}

.member-form fieldset {
  grid-column: 1 / -1;
}

fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

legend {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 900;
}

.member-list {
  margin-top: 14px;
}

.member-directory {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.member-directory-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.4fr) minmax(200px, 1fr);
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--blue);
  text-align: left;
}

.member-directory-row span,
.member-directory-row small {
  color: var(--muted);
}

.member-login-status {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.member-login-status.complete {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface-raised));
  color: var(--ok);
}

.member-login-status.pending {
  background: color-mix(in srgb, var(--red) 12%, var(--surface-raised));
  color: var(--warn);
}

.member-login-detail {
  grid-column: 1 / -1;
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle);
}

.member-login-detail small {
  color: var(--muted);
}

.item-modal.member-modal {
  width: min(1180px, calc(100vw - 28px));
  max-height: min(92vh, 900px);
  overflow: auto;
}

.member-master-form,
.area-structure-form {
  display: grid;
  gap: 12px;
}

.member-editor.member-master-form {
  grid-template-columns: minmax(0, 1fr);
}

.member-master-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.member-master-form .member-data-group {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.member-data-group > label {
  grid-column: span 4;
  min-width: 0;
}

.member-data-group > label.field-wide {
  grid-column: span 6;
}

.member-data-group > label.street-field {
  grid-column: span 6;
}

.member-data-group > label.house-number-field {
  grid-column: span 2;
}

.member-data-group > label.city-field {
  grid-column: span 5;
}

.member-data-group input,
.member-data-group select {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: .94rem;
}

.member-data-group input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
}

.member-data-group label {
  gap: 6px;
  font-size: .82rem;
}

.member-data-group .active-member-check {
  align-self: end;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--grey);
}

.qualification-data .member-qualifications {
  grid-column: 1 / -1;
}

.area-role-assignments > .hint {
  grid-column: 1 / -1;
}

.member-master-form .technical-security-data {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.technical-security-copy {
  min-width: 0;
}

.technical-security-copy .hint {
  margin: 4px 0 0;
  max-width: 70ch;
}

.technical-security-action {
  min-width: 150px;
  min-height: 44px;
  white-space: nowrap;
}

.technical-security-note {
  align-self: center;
  margin: 0;
}

.two-factor-setup-modal {
  width: min(760px, calc(100vw - 24px));
}

.two-factor-setup-content {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.two-factor-qr {
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.two-factor-qr img {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
}

.two-factor-setup-copy {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.two-factor-setup-copy > p {
  margin: 0;
}

.two-factor-secret {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
}

.two-factor-secret code {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--grey);
}

.two-factor-setup-modal .modal-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-notification-settings .check {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--grey);
}

.area-role-row {
  grid-column: span 6;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr);
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--grey);
}

.area-role-row .area-assignment {
  min-height: 46px;
  padding: 0 10px;
  background: var(--surface-raised);
}

.area-role-row select:disabled {
  background: var(--grey);
}

.area-structure-form {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.area-structure-head {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 54px;
  gap: 8px;
  align-items: center;
}

.area-structure-form textarea {
  min-height: 68px;
}

.member-editor {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 150px;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.admin-shell {
  padding-bottom: 32px;
}

.admin-nav-wrap {
  position: relative;
}

.admin-subnav {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.admin-subnav button {
  min-height: 34px;
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--blue);
}

.admin-subnav button.active {
  border-color: var(--blue);
  background: var(--brand-navy);
  color: white;
}

.admin-shell .panel {
  padding: 12px;
}

.admin-shell input,
.admin-shell select,
.admin-shell button,
.admin-shell .service-code-preview {
  min-height: 34px;
  font-size: 0.82rem;
}

.admin-shell button.secondary {
  border: 1px solid var(--blue);
  background: var(--brand-navy);
  color: white;
}

.service-type-editor .service-type-save-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--blue);
  background-color: var(--brand-navy);
  color: white;
  -webkit-appearance: none;
  appearance: none;
  opacity: 1;
  grid-column: 1 / -1;
  justify-self: stretch;
  padding: 10px 16px;
  overflow: visible;
  white-space: normal;
}

.service-type-editor .service-type-save-button:hover,
.service-type-editor .service-type-save-button:focus-visible {
  border-color: var(--blue);
  background-color: var(--brand-navy);
  color: white;
}

.area-create-form {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 72px;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}

.area-create-form button {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  white-space: normal;
}

.area-multi-select {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
}

.area-multi-select > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.area-multi-select .check {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.area-multi-select .check > span:last-child {
  display: grid;
  min-width: 0;
}

.area-multi-select small {
  color: var(--muted);
  font-size: .72rem;
}

.area-context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-left: 4px solid var(--red);
}

.area-context-banner span {
  color: var(--muted);
  font-size: .82rem;
  text-align: right;
}

.scoped-record-form > .area-multi-select {
  width: 100%;
}

.area-tree {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}

.area-tree-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: calc(100% - min(calc(var(--area-depth) * 24px), 120px));
  margin-left: min(calc(var(--area-depth) * 24px), 120px);
  padding: 11px 12px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  color: var(--ink);
  text-align: left;
}

.area-tree-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-subtle);
}

.area-tree-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.area-tree-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.area-tree-row > b {
  font-size: 1.25rem;
}

.area-modal {
  width: min(920px, calc(100vw - 28px));
}

.area-modal-form {
  display: grid;
  gap: 12px;
}

.area-modal-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
}

.area-modal-form .form-wide,
.area-modal-form fieldset > .hint {
  grid-column: 1 / -1;
}

.inheritance-settings,
.service-validity {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.service-inline-swatch {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 2px;
}

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

  .area-create-form label:has(input[type="color"]) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .area-create-form,
  .area-modal-form fieldset,
  .inheritance-settings,
  .service-validity {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .area-modal-form .form-wide,
  .area-modal-form fieldset > .hint {
    grid-column: 1;
  }

  .area-tree-row {
    width: calc(100% - min(calc(var(--area-depth) * 14px), 56px));
    margin-left: min(calc(var(--area-depth) * 14px), 56px);
  }

  .area-multi-select > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .area-context-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .area-context-banner span {
    text-align: left;
  }
}

.member-record {
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.member-record summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: var(--blue);
  cursor: pointer;
}

.member-record summary span {
  color: var(--muted);
  font-size: 0.8rem;
}

.member-record .member-editor {
  padding: 12px;
}

.rights-editor {
  grid-column: 1 / -1;
  padding: 10px;
  border: 1px solid var(--line);
  background: var(--grey);
}

.rights-editor h3 {
  margin-bottom: 8px;
}

.rights-group {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.rights-group h4 {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: .86rem;
}

.rights-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(95px, auto));
  gap: 8px;
  align-items: center;
  min-height: 32px;
  border-top: 1px solid var(--line);
}

.rights-row:first-of-type {
  border-top: 0;
}

.member-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.member-actions button {
  border: 1px solid var(--red);
  background: var(--red);
  color: white;
}

.member-actions .password-button {
  border-color: var(--blue);
  background: var(--brand-navy);
}

.import-form {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.import-result {
  margin-top: 12px;
  padding: 12px;
  border-left: 5px solid var(--green);
  background: #e5f6f2;
}

.import-result.has-errors {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.swap-inbox {
  margin-bottom: 12px;
  border-left: 6px solid var(--red);
}

.swap-admin-info {
  margin-bottom: 12px;
  border-left: 6px solid var(--blue);
}

.swap-actions {
  display: flex;
  gap: 6px;
}

.period-navigation {
  display: flex;
  gap: 6px;
}

.period-navigation .icon-button {
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  background: var(--brand-navy);
  color: white;
  font-size: 1.5rem;
}

.day-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-warning {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-weight: 900;
}

.week-day {
  display: grid;
  grid-template-rows: auto minmax(80px, 1fr) auto;
}

.week-controls {
  display: flex;
  align-items: end;
  gap: 10px;
}

.week-time-grid {
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(105px, 1fr));
  grid-template-rows: 54px repeat(var(--week-slots), minmax(42px, 1fr));
  min-width: 860px;
  position: relative;
}

.week-time-grid-wrapper {
  overflow-x: auto;
}

.week-time-corner,
.week-time-header,
.week-time-label,
.week-time-cell {
  border: 1px solid var(--line);
}

.week-time-corner,
.week-time-label {
  display: grid;
  place-items: center;
  background: var(--grey);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.week-time-header {
  grid-row: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 5px;
  background: var(--brand-navy);
  color: white;
}

.week-time-cell {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: var(--surface-raised);
  border-color: var(--line);
}

.week-time-cell:hover {
  background: var(--blue-soft);
  filter: none;
}

.week-calendar-entry {
  z-index: 2;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
  margin: 2px;
  margin-left: calc(var(--lane-index) * (100% / var(--lane-count)) + 2px);
  padding: 6px;
  border: 0;
  border-left: 5px solid var(--entry-color);
  background: color-mix(in srgb, var(--entry-color) 18%, white);
  color: var(--blue);
  text-align: left;
}

.week-calendar-entry b {
  color: var(--red);
  font-size: 0.68rem;
}

.week-calendar-entry.staffed b {
  color: var(--green);
}

.availability-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.availability-row {
  width: 100%;
  color: var(--ink);
  text-align: left;
  background: var(--surface-raised);
}

.week-staffing-summary {
  display: grid;
  grid-template-columns: 64px repeat(7, minmax(140px, 1fr));
  min-width: 1040px;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface-raised);
}

.week-staffing-summary > * {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--line);
  font-size: .72rem;
}

.week-staffing-summary > *:last-child { border-right: 0; }
.week-staffing-summary .staffed { color: var(--ok); background: #e5f6f2; }
.week-staffing-summary .understaffed { color: var(--red); background: var(--red-soft); }
.week-staffing-summary .no-services { color: var(--muted); background: var(--grey); }

.week-staffing {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.week-staffing button {
  min-height: 30px;
  padding: 5px;
  border: 0;
  color: white;
  font-size: 0.7rem;
}

.week-staffing .staffed,
.modal-staffing.staffed {
  background: var(--green);
}

.week-staffing .understaffed,
.modal-staffing.understaffed {
  background: var(--red);
}

.item-title-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  text-align: left;
}

.item-title-button:hover {
  filter: none;
  text-decoration: underline;
}

.modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: 20px;
  background: rgba(20, 20, 26, 0.62);
}

.item-modal {
  width: min(760px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 18px;
  border-top: 8px solid var(--red);
  background: var(--surface-raised);
  box-shadow: 0 24px 70px rgba(0, 5, 72, 0.3);
}

.modal-close {
  min-width: 38px;
  background: var(--brand-navy);
  color: white;
  font-size: 1.3rem;
}

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

.modal-requirements,
.modal-staffing,
.modal-actions {
  grid-column: 1 / -1;
}

.modal-assignment {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: var(--grey);
}

.modal-requirements {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
}

.modal-staffing {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  color: white;
}

.modal-actions {
  position: sticky;
  z-index: 3;
  bottom: -18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
}

.deletion-hint {
  margin: 0;
  padding: 9px 11px;
  border-left: 4px solid var(--red);
  background: var(--red-soft);
  color: var(--blue);
  font-size: .82rem;
}

.danger-button {
  border-color: #a4002a;
  background: #a4002a;
  color: white;
}

.role-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.role-record {
  border: 1px solid var(--line);
}

.role-record summary {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--blue);
  cursor: pointer;
}

.report-toolbar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--grey);
}

.report-toolbar label {
  min-width: 170px;
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.report-summary > * {
  padding: 12px;
  border-left: 5px solid var(--red);
  background: var(--brand-navy);
  color: white;
  font-weight: 900;
}

.report-table {
  border: 1px solid var(--line);
}

.report-head,
.report-table article {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 90px 100px minmax(280px, 2fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
}

.report-head {
  background: var(--brand-navy);
  color: white;
}

.report-table article {
  border-top: 1px solid var(--line);
}

.report-table article p {
  color: var(--muted);
  font-size: 0.82rem;
}

.year-card .calendar-entry {
  margin-top: 5px;
}

.year-mini-weekdays,
.year-mini-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}

.year-mini-weekdays {
  color: var(--muted);
  font-size: 0.65rem;
}

.year-mini-days button {
  width: 100%;
  min-height: 27px;
  padding: 0;
  border-color: transparent;
  background: var(--surface-raised);
  color: var(--blue);
  font-size: 0.7rem;
}

.year-mini-days button.has-items {
  border-color: var(--red);
  background: var(--red-soft);
  font-weight: 900;
}

.year-mini-days button.has-annotation {
  box-shadow: inset 0 -4px var(--year-annotation);
}

.calendar-import-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 90px;
  gap: 10px;
  align-items: end;
}

.calendar-import-form button {
  grid-column: 1 / -1;
  width: 100%;
}

.calendar-import-list,
.version-history,
.range-annotations {
  display: grid;
  gap: 8px;
}

.calendar-import-list article,
.range-annotations article {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.calendar-import-list article > i,
.range-annotations article > i {
  align-self: stretch;
  min-height: 34px;
  border-radius: 3px;
  background: var(--annotation-color);
}

.calendar-import-list article div,
.range-annotations article div {
  display: grid;
}

.calendar-import-list article span,
.range-annotations article span {
  color: var(--muted);
  font-size: .78rem;
}

.version-entry {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.version-entry:first-child {
  border-top: 0;
}

.version-marker {
  align-self: start;
  padding: 6px 8px;
  border-left: 5px solid var(--red);
  background: var(--red-soft);
  color: var(--blue);
  font-size: .78rem;
  font-weight: 900;
}

.version-entry h3 {
  margin: 0 0 4px;
}

.version-entry p {
  color: var(--muted);
}

.version-entry ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

@media (max-width: 700px) {
  .modal-form,
  .modal-requirements {
    grid-template-columns: 1fr;
  }

  .modal-requirements > *,
  .modal-staffing,
  .modal-actions {
    grid-column: 1;
  }

  .modal-assignment {
    grid-template-columns: 1fr;
  }

  .report-summary,
  .report-head,
  .report-table article {
    grid-template-columns: 1fr;
  }

  .report-head {
    display: none;
  }
}

/* 1.10.1: compact dialogs and cross-client team chat */
.chat-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.chat-sidebar, .chat-conversation { min-height: min(68vh, 720px); }
.chat-new { border-block: 1px solid var(--line); padding-block: 10px; }
.chat-new summary { color: var(--red); cursor: pointer; font-weight: 750; }
.compact-form { gap: 8px; margin-top: 10px; }
.compact-form label { gap: 4px; }
.chat-thread-list { display: grid; gap: 4px; margin-top: 12px; }
.chat-thread-list > button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 10px; color: var(--ink); text-align: left; background: transparent; border: 1px solid transparent; }
.chat-thread-list > button.active { background: var(--soft); border-color: var(--line); }
.chat-thread-list span { display: grid; min-width: 0; }
.chat-thread-list small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-list b { display: grid; place-items: center; min-width: 24px; height: 24px; color: #fff; background: var(--red); border-radius: 50%; }
.chat-conversation { display: grid; grid-template-rows: auto minmax(240px, 1fr) auto; }
.chat-message-list { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 8px 2px; overflow-y: auto; }
.chat-bubble { align-self: flex-start; width: fit-content; max-width: min(78%, 620px); padding: 9px 11px; background: var(--soft); border: 1px solid var(--line); border-radius: 8px; }
.chat-bubble.own { align-self: flex-end; color: #fff; background: var(--navy); border-color: var(--navy); }
.chat-bubble p { margin: 3px 0; white-space: pre-wrap; }
.chat-bubble time { font-size: .72rem; opacity: .72; }
.chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding-top: 10px; border-top: 1px solid var(--line); }
.chat-compose label, .chat-compose textarea { width: 100%; }
.chat-compose textarea { min-height: 48px; resize: vertical; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-sidebar, .chat-conversation { min-height: auto; }
  .chat-conversation { min-height: 55vh; }
  .chat-bubble { max-width: 88%; }
  .chat-compose { grid-template-columns: 1fr; }
}

.member-qualifications {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.password-notice {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 16px;
  margin: 12px 0;
  padding: 14px;
  border-left: 6px solid var(--yellow);
  background: var(--brand-navy);
  color: white;
}

.password-notice code {
  grid-row: span 2;
  align-self: center;
  padding: 8px 10px;
  background: var(--surface-raised);
  color: var(--blue);
  font-size: 1rem;
  font-weight: 900;
}

.password-notice span {
  font-size: 0.84rem;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 480px);
  width: min(1080px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  align-items: center;
  gap: 70px;
  padding: 32px 0;
}

.auth-brand {
  position: relative;
  padding: 40px 0 40px 36px;
  border-left: 12px solid var(--red);
}

.auth-brand img {
  width: 130px;
  height: 130px;
  margin-bottom: 22px;
}

.auth-brand h1 {
  margin: 6px 0 14px;
}

.auth-brand > p:last-child {
  max-width: 520px;
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 700;
}

.auth-panel {
  padding: 30px;
  border-top: 10px solid var(--red);
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.auth-panel h2 {
  margin: 5px 0 22px;
  font-size: 1.6rem;
}

.auth-form input {
  min-height: 48px;
}

.auth-form button {
  min-height: 48px;
  margin-top: 6px;
}

.demo-access {
  display: grid;
  gap: 4px;
  margin-top: 22px;
  padding: 12px;
  background: var(--grey);
  color: var(--muted);
  font-size: 0.82rem;
}

.demo-access strong {
  color: var(--blue);
}

.configurator-link {
  display: grid;
  gap: 3px;
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid var(--blue);
  border-left: 5px solid var(--red);
  border-radius: 6px;
  color: var(--blue);
  text-decoration: none;
}

.configurator-link span {
  color: var(--muted);
  font-size: .78rem;
}

.configurator-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

.configurator-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 0 24px;
}

.configurator-header h1 {
  margin-top: 5px;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.configurator-back {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--blue);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 900;
}

.configurator-price {
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 12px 15px;
  border-left: 6px solid var(--red);
  background: var(--surface-raised);
}

.configurator-price span {
  color: var(--muted);
  font-size: .75rem;
}

.configurator-price strong {
  color: var(--blue);
  font-size: 1.4rem;
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}

.wizard-steps button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 46px;
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--muted);
}

.wizard-steps button span {
  display: grid;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--grey);
  color: var(--blue);
}

.wizard-steps button.active {
  border-color: var(--blue);
  background: var(--brand-navy);
  color: white;
}

.wizard-steps button.complete span {
  background: var(--green);
  color: white;
}

.configurator-content {
  min-height: 520px;
  padding: 30px;
  background: var(--surface-raised);
  box-shadow: var(--shadow);
}

.configurator-panel {
  width: min(780px, 100%);
  margin: 0 auto;
}

.configurator-panel.wide-panel {
  width: 100%;
}

.configurator-panel h2 {
  margin: 6px 0 10px;
  font-size: 1.55rem;
}

.configurator-intro {
  max-width: 760px;
  margin-bottom: 24px;
  color: var(--muted);
  line-height: 1.5;
}

.configurator-form {
  display: grid;
  gap: 14px;
}

.configurator-form.two-columns {
  grid-template-columns: 1fr 1fr;
}

.configurator-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.configurator-actions span {
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
}

.config-area-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px auto;
  gap: 8px;
  margin-bottom: 18px;
}

.config-area-list {
  display: grid;
  gap: 8px;
}

.config-area-list article {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 58px 42px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
}

.config-area-list article > span {
  width: 12px;
  height: 100%;
  min-height: 36px;
}

.area-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.area-module-grid > section {
  padding: 14px;
  border: 1px solid var(--line);
}

.area-module-grid header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.area-module-grid header span {
  width: 8px;
  height: 28px;
}

.module-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border-bottom: 1px solid var(--grey);
}

.module-option input {
  width: 18px;
  min-height: auto;
}

.module-option span {
  display: grid;
  gap: 2px;
}

.module-option small {
  color: var(--muted);
}

.branding-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
  gap: 24px;
  align-items: center;
  margin-top: 24px;
}

.tenant-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 180px;
  padding: 24px;
  border-top: 10px solid var(--tenant-color);
  background: var(--grey);
}

.tenant-preview-mark {
  display: grid;
  flex: 0 0 64px;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--tenant-color);
  color: white;
  font-size: 1.8rem;
  font-weight: 900;
}

.tenant-preview div {
  display: grid;
  gap: 4px;
}

.tenant-preview strong {
  color: var(--blue);
  font-size: 1.2rem;
}

.tenant-preview p,
.tenant-preview small {
  color: var(--muted);
}

.configuration-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}

.configuration-summary section {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px;
  border: 1px solid var(--line);
}

.configuration-summary section span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.configuration-summary i {
  display: inline-block;
  width: 8px;
  height: 22px;
}

.price-breakdown {
  display: grid;
  border: 1px solid var(--line);
}

.price-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}

.price-breakdown .total {
  border: 0;
  background: var(--brand-navy);
  color: white;
  font-size: 1.1rem;
}

.configurator-success {
  margin: 16px 0;
  padding: 12px;
  border-left: 5px solid var(--green);
  background: #e5f6f2;
  color: #006757;
  font-weight: 800;
}

.legal-hint {
  margin-top: 12px;
  color: var(--muted);
  font-size: .76rem;
}

.secondary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--blue);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 800;
}

.pricing-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.pricing-form fieldset {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.module-price-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.form-error {
  margin-bottom: 12px;
  padding: 10px;
  border-left: 5px solid var(--red);
  background: var(--red-soft);
  color: #8b0024;
  font-weight: 800;
}

.permission-form {
  display: grid;
  grid-template-columns: 1fr 1fr repeat(3, auto) 150px;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
}

.check input {
  width: auto;
  min-height: auto;
}

.rights-table {
  display: grid;
  gap: 6px;
}

.rights-table article {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  padding: 10px;
  background: var(--grey);
  border-radius: 4px;
}

.swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  border: 1px solid var(--line);
}

.overview-priority-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}

.overview-priority-grid .personal-upcoming {
  margin: 0;
}

.overview-priority-grid > .panel,
.overview-tools-grid > .panel,
.overview-list,
.timeline,
.shift-card,
.assign-row,
.modal-assignment,
.modal-form,
.availability-times,
form,
fieldset,
label {
  min-width: 0;
}

.overview-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}

.overview-list {
  margin-bottom: 32px;
}

.panel,
.metric-card,
.shift-card,
.year-card,
.toolbar,
.notice-board,
.metric-details,
.auth-panel,
.auth-brand {
  border-radius: 8px;
}

input,
select,
textarea,
button,
.personal-upcoming-item,
.direct-message,
.dock-message,
.chat-message {
  border-radius: 6px;
}

.chat-stream {
  display: grid;
  gap: 10px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
}

.chat-message {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid #d9dde5;
  border-left: 4px solid #eb003c;
  background: var(--surface-raised);
}

.chat-message.sent {
  border-left-color: #5b6575;
  background: #f5f6f8;
}

.chat-message > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.chat-message p,
.chat-message small {
  margin: 0;
}

.chat-message time,
.chat-message small {
  color: #626a78;
  font-size: .76rem;
}

.chat-category {
  color: #eb003c;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.swap-card {
  align-items: stretch;
  flex-direction: column;
}

.swap-reply {
  display: grid;
  gap: 8px;
  width: 100%;
}

.swap-reply textarea {
  min-height: 70px;
}

.swap-response-list {
  display: grid;
  gap: 4px;
  margin-top: 7px;
}

.branding-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--soft);
}

.branding-preview img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.branding-preview span {
  display: grid;
  gap: 3px;
  font-weight: 800;
}

.branding-preview small {
  color: var(--muted);
}

.email-template-admin {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
}

.email-preview {
  overflow: hidden;
  padding: 26px;
  border-top: 8px solid var(--mail-accent);
  border-radius: 8px;
  background: var(--surface-raised);
  box-shadow: 0 8px 24px rgba(6, 8, 63, .12);
}

.email-preview > img {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  object-fit: contain;
}

.email-preview-heading small,
.email-preview-footer {
  color: var(--muted);
  font-size: .78rem;
}

.email-preview-heading h3 {
  margin: 6px 0 18px;
  font-size: 1.35rem;
}

.email-preview-content {
  padding: 14px;
  border-left: 4px solid var(--mail-accent);
  background: var(--soft);
  line-height: 1.5;
}

.email-preview a {
  display: inline-block;
  margin: 12px 0;
  padding: 11px 16px;
  border-radius: 6px;
  background: var(--mail-accent);
  color: white;
  font-weight: 800;
}

.modal-assignment select[multiple],
.assign-row select[multiple] {
  min-height: 112px;
}

@media (max-width: 1040px) {
  .member-master-form .member-data-group {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .member-data-group > label,
  .member-data-group > label.field-wide,
  .member-data-group > label.street-field,
  .member-data-group > label.city-field {
    grid-column: span 3;
  }

  .member-data-group > label.house-number-field {
    grid-column: span 2;
  }

  .area-role-row {
    grid-column: 1 / -1;
  }

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

  .email-template-admin {
    grid-template-columns: 1fr;
  }

  .overview,
  .layout,
  .year-grid,
  .admin-grid,
  .week-grid {
    grid-template-columns: 1fr;
  }

  .grid-form,
  .permission-form,
  .member-form,
  .member-editor,
  .calendar-quick-form,
  .service-type-form,
  .service-type-editor,
  .notice-board {
    grid-template-columns: 1fr 1fr;
  }

  .wide {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .overview-priority-grid,
  .overview-tools-grid,
  .overview-dashboard.has-message-dock {
    grid-template-columns: minmax(0, 1fr);
  }

  .assign-row,
  .assign-row.complete,
  .modal-assignment {
    grid-template-columns: minmax(0, 1fr);
  }

  .assign-row > button,
  .modal-assignment > button,
  .volunteer-row > button {
    width: 100%;
    justify-self: stretch;
  }

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

  .modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .modal-actions > button,
  .modal-actions > label {
    width: 100%;
  }

  .toolbar > label,
  .toolbar .period-navigation,
  .toolbar .segmented {
    min-width: 0;
    width: 100%;
  }

  .toolbar .segmented > button,
  .toolbar .period-navigation > button {
    flex: 1 1 0;
    min-width: 0;
  }

  .configurator-header {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .configurator-price {
    grid-column: 2;
    min-width: 0;
  }

  .wizard-steps {
    grid-template-columns: repeat(5, 46px);
    justify-content: space-between;
  }

  .wizard-steps button {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .wizard-steps button span {
    font-size: .84rem;
  }

  .pricing-form fieldset,
  .module-price-grid {
    grid-template-columns: 1fr 1fr;
  }

  body.navigation-open {
    overflow: hidden;
  }

  main,
  .brandbar {
    width: min(calc(100% - 24px), 1240px);
  }

  .brandbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(250px, auto);
    align-items: center;
    gap: 12px;
    padding-top: 12px;
  }

  .mobile-menu-toggle {
    display: grid;
    place-content: center;
    gap: 4px;
    width: 42px;
    min-height: 42px;
    padding: 0;
    border-color: var(--blue);
    background: var(--surface-raised);
  }

  .mobile-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--brand-navy);
  }

  .brandmark {
    min-width: 0;
  }

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

  .brandmark div {
    min-width: 0;
  }

  .brandmark strong,
  .brandmark div > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navigation-backdrop {
    position: fixed;
    z-index: 80;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(0, 5, 72, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }

  .navigation-backdrop.open {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .tabs {
    position: fixed;
    z-index: 90;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: min(330px, 88vw);
    margin: 0;
    padding: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--surface-raised);
    box-shadow: 18px 0 40px rgba(0, 5, 72, .2);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }

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

  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    color: var(--blue);
  }

  .mobile-nav-head strong {
    font-size: 1.15rem;
  }

  .mobile-nav-close {
    display: grid;
    place-items: center;
    width: 40px;
    min-height: 40px;
    padding: 0;
    border-color: var(--line);
    background: var(--surface-raised);
    color: var(--blue);
    font-size: 1.7rem;
    line-height: 1;
  }

  .tabs > button {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    min-height: 46px;
    text-align: left;
  }

  .admin-nav-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label icon" "value icon";
    width: 100%;
    min-height: 56px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-color: var(--blue);
    background: var(--surface-raised);
    color: var(--blue);
    text-align: left;
  }

  .admin-nav-toggle span {
    grid-area: label;
    color: var(--muted);
    font-size: .7rem;
  }

  .admin-nav-toggle strong {
    grid-area: value;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .admin-nav-toggle b {
    grid-area: icon;
    align-self: center;
    font-size: 1.3rem;
  }

  .admin-subnav {
    position: absolute;
    z-index: 30;
    top: calc(100% - 4px);
    left: 0;
    right: 0;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    max-height: min(62vh, 420px);
    margin: 0;
    padding: 10px;
    overflow-y: auto;
    border-color: var(--blue);
    box-shadow: var(--shadow);
  }

  .admin-subnav.open {
    display: grid;
  }

  .admin-subnav button {
    width: 100%;
    min-width: 0;
    padding: 7px 10px;
    white-space: normal;
  }

  .admin-shell,
  .admin-grid,
  .admin-shell .panel,
  .admin-shell form,
  .admin-shell fieldset,
  .member-record,
  .rights-editor,
  .rights-group {
    min-width: 0;
    max-width: 100%;
  }

  .admin-shell input,
  .admin-shell select,
  .admin-shell textarea,
  .admin-shell button {
    max-width: 100%;
  }
}

@media (max-width: 680px) {
  .member-directory-row,
  .member-master-form fieldset {
    grid-template-columns: 1fr;
  }

  .member-master-form .member-data-group {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .member-data-group > label,
  .member-data-group > label.field-wide,
  .member-data-group > label.street-field,
  .member-data-group > label.house-number-field,
  .member-data-group > label.city-field,
  .area-role-row {
    grid-column: 1;
  }

  .area-role-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .unsaved-dialog {
    padding: 20px 16px;
  }

  .unsaved-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .unsaved-actions button {
    width: 100%;
  }

  .configurator-shell {
    width: min(calc(100% - 20px), 1180px);
    padding-top: 10px;
  }

  .configurator-header {
    gap: 10px;
    padding-bottom: 16px;
  }

  .configurator-header h1 {
    font-size: 1.55rem;
  }

  .configurator-price {
    grid-column: 1 / -1;
  }

  .configurator-content {
    min-height: 0;
    padding: 20px 14px;
  }

  .configurator-form.two-columns,
  .branding-config-grid,
  .configuration-summary,
  .pricing-form fieldset,
  .module-price-grid {
    grid-template-columns: 1fr;
  }

  .config-area-create {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  .config-area-create button {
    grid-column: 1 / -1;
  }

  .config-area-list article {
    grid-template-columns: 10px minmax(0, 1fr) 48px 40px;
    padding: 8px;
  }

  .area-module-grid {
    grid-template-columns: 1fr;
  }

  .configurator-actions {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .configurator-actions span {
    display: none;
  }

  .overview-priority-grid,
  .overview-tools-grid {
    grid-template-columns: 1fr;
  }
  main,
  .brandbar {
    width: min(calc(100% - 20px), 1240px);
  }

  .hero {
    align-items: stretch;
    flex-direction: column;
  }

  .brandbar {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .identity {
    grid-column: 1 / -1;
  }

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

  .brandmark strong {
    font-size: .92rem;
  }

  .brandmark div > span {
    font-size: .78rem;
  }

  .admin-subnav {
    grid-template-columns: 1fr;
  }

  .identity,
  .toolbar,
  .calendar-quick-form,
  .grid-form,
  .grid-form.compact,
  .requirements,
  .quick-requirements,
  .service-default-requirements,
  .permission-form,
  .assign-row,
  .shift-card,
  .rights-table article {
    grid-template-columns: 1fr;
  }

  .inline-create,
  .service-type-form,
  .service-type-editor,
  .notice-board {
    grid-template-columns: 1fr;
  }

  .service-type-form > button,
  .service-type-editor > button {
    grid-column: auto;
    width: 100%;
    justify-self: stretch;
  }

  .calendar-import-form,
  .version-entry {
    grid-template-columns: 1fr;
  }

  .grid-form.item-form {
    grid-template-columns: 1fr;
  }

  .item-form > button,
  .form-wide,
  .form-intro,
  .quick-requirements,
  .calendar-quick-form .form-error {
    grid-column: auto;
  }

  .identity {
    align-items: stretch;
    flex-direction: column;
  }

  .identity div {
    text-align: left;
  }

  .identity-area,
  .rights-row {
    grid-template-columns: 1fr;
  }

  .auth-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 20px;
    padding: 20px 0;
  }

  .auth-brand {
    padding: 16px 0 16px 18px;
    border-left-width: 7px;
  }

  .auth-brand img {
    width: 88px;
    height: 88px;
    margin-bottom: 12px;
  }

  .auth-brand h1 {
    font-size: 2.2rem;
  }

  .auth-panel {
    padding: 22px;
  }

  .edit-row,
  .edit-row.qualification-row,
  .member-form,
  .member-editor {
    grid-template-columns: 1fr;
  }

  .member-form fieldset,
  .member-qualifications {
    grid-column: auto;
  }

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

  .hero::after {
    width: 100%;
    height: 26px;
    inset: auto 0 0 0;
  }

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

  .month-grid,
  .calendar-head {
    gap: 3px;
  }

  .day {
    min-height: 84px;
    padding: 6px;
  }

  .status-row {
    justify-content: start;
    flex-wrap: wrap;
  }
}

/* Version 1.29.0: compact dialogs, searchable people and period controls. */
.item-modal,
.admin-detail-modal,
.area-modal,
.notice-modal,
.calendar-link-modal {
  gap: 10px;
}

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

.item-modal .panel-head h2,
.admin-detail-modal .panel-head h2,
.area-modal .panel-head h2 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.modal-form,
.admin-detail-form,
.member-master-form {
  gap: 8px 10px;
}

.modal-form > label,
.admin-detail-form > label,
.member-master-form label {
  gap: 4px;
}

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

.item-modal textarea,
.admin-detail-modal textarea,
.area-modal textarea {
  min-height: 72px;
}

.modal-form fieldset,
.member-master-form fieldset {
  padding: 8px 10px 10px;
}

.modal-requirements {
  gap: 8px;
}

.modal-staffing,
.modal-assignment {
  padding: 10px;
  gap: 8px;
}

.staffing-people {
  margin: 0;
  line-height: 1.35;
}

.assigned-staff-list,
.qualification-choice-list {
  gap: 6px;
}

.assigned-staff-row {
  min-height: 48px;
  padding: 6px 8px;
}

.assigned-staff-row small {
  line-height: 1.25;
}

.member-picker {
  display: grid;
  gap: 6px;
}

.member-picker-search {
  position: relative;
  display: block;
}

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

.member-picker-search input {
  width: 100%;
  padding-left: 34px !important;
}

.member-picker-list {
  display: grid;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.member-picker-list > label {
  display: grid;
  grid-template-columns: auto 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin: 0;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.member-picker-list > label:last-child {
  border-bottom: 0;
}

.member-picker-list > label:has(input:checked) {
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.member-picker-list input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.member-picker-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.72rem;
}

.member-picker-list span {
  display: grid;
  min-width: 0;
}

.member-picker-list small {
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.availability-period-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
}

.availability-period-grid > label {
  display: grid;
  grid-template-rows: minmax(22px, auto) 42px;
  gap: 4px;
  min-width: 0;
}

.availability-period-grid > label > span {
  align-self: end;
}

.availability-period-grid input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: 42px;
  padding-block: 6px;
}

.availability-form-note,
.withdrawal-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.withdrawal-hint {
  padding: 7px 9px;
  border-left: 4px solid var(--line-strong);
  background: var(--surface-soft);
}

.availability-edit-form > label {
  grid-template-rows: minmax(22px, auto) 40px;
  align-content: end;
}

.profile-feedback {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr);
  gap: 14px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
}

.profile-feedback h3,
.profile-feedback p {
  margin: 0;
}

.profile-feedback .compact-form {
  display: grid;
  gap: 8px;
}

.report-period-navigation {
  align-self: end;
}

@media (max-width: 680px) {
  .item-modal :where(input:not([type="checkbox"]):not([type="radio"]), select),
  .admin-detail-modal :where(input:not([type="checkbox"]):not([type="radio"]), select),
  .area-modal :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 44px;
  }

  .modal-assignment-actions,
  .profile-feedback {
    grid-template-columns: 1fr;
  }

  .modal-assignment-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .modal-assignment-actions button {
    width: 100%;
  }

  .availability-period-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-feedback {
    display: grid;
  }
}

@media (max-width: 380px) {
  .availability-period-grid {
    grid-template-columns: 1fr;
  }
}

/* Product UI 2.0: stable operational shell and reusable responsive surfaces. */
:root {
  --app-bg: #f5f6f8;
  --nav-bg: #090d35;
  --nav-hover: #202550;
  --surface-raised: #ffffff;
  --surface-subtle: #f8f9fb;
  --line-strong: #c7cad5;
  --text-soft: #767b88;
  --shadow-sm: 0 1px 2px rgba(20, 20, 26, 0.06);
  --shadow-md: 0 10px 30px rgba(20, 20, 26, 0.09);
  --header-height: 72px;
  --sidebar-width: 240px;
}

html {
  background: var(--app-bg);
}

body {
  background: var(--app-bg);
  line-height: 1.45;
}

button,
input,
select {
  min-height: 40px;
}

input[type="color"] {
  width: 52px;
  min-width: 52px;
  padding: 3px;
}

button {
  padding-inline: 14px;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

button:hover {
  filter: none;
  box-shadow: var(--shadow-sm);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(235, 0, 60, 0.28);
  outline-offset: 2px;
}

h1 {
  max-width: none;
  font-size: 2rem;
  line-height: 1.15;
}

h2 {
  font-size: 1.14rem;
  line-height: 1.25;
}

h3 {
  font-size: .98rem;
}

.brandbar {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  width: 100%;
  height: var(--header-height);
  margin: 0;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-sm);
}

.brandmark {
  gap: 11px;
  min-width: 0;
}

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

.brandmark strong {
  overflow: hidden;
  color: var(--blue);
  font-size: .98rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brandmark div > span {
  color: var(--muted);
  font-size: .78rem;
}

.identity {
  gap: 12px;
  width: auto;
}

.identity-user {
  min-width: 210px;
}

.identity-area {
  margin-top: 2px;
}

.identity-area select {
  min-height: 30px;
  border-color: transparent;
  background: var(--surface-subtle);
}

#logoutButton {
  min-height: 36px;
  border-color: var(--line);
}

.tabs {
  position: fixed;
  z-index: 60;
  inset: var(--header-height) auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--sidebar-width);
  margin: 0;
  overflow: visible;
  padding: 20px 14px;
  border: 0;
  background: var(--nav-bg);
}

.tabs::before {
  content: "Arbeitsbereiche";
  display: block;
  padding: 0 10px 8px;
  color: #aeb3cc;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tabs button {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border-color: transparent;
  background: transparent;
  color: #f5f6ff;
  text-align: left;
  font-size: .88rem;
}

.tabs button:hover {
  border-color: transparent;
  background: var(--nav-hover);
  box-shadow: none;
}

.tabs button.active {
  border-color: rgba(255, 255, 255, .12);
  background: var(--surface-raised);
  color: var(--blue);
}

.tabs button.active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px -1px;
  width: 4px;
  border-radius: 0 3px 3px 0;
  background: var(--red);
}

main:not(.auth-shell):not(.configurator-shell) {
  width: auto;
  max-width: 1500px;
  margin: 0 0 0 var(--sidebar-width);
  padding: calc(var(--header-height) + 24px) 26px 40px;
}

.hero {
  min-height: 0;
  margin-bottom: 18px;
  padding: 0 0 18px;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.hero::after {
  display: none;
}

.hero h1 {
  margin-top: 3px;
}

.hero p:not(.eyebrow) {
  max-width: 720px;
  margin-top: 5px;
  color: var(--text-soft);
  font-size: .9rem;
  font-weight: 500;
}

.eyebrow {
  font-size: .69rem;
}

.panel,
.metric-card,
.shift-card,
.year-card,
.toolbar,
.notice-board,
.metric-details {
  border-color: var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.panel {
  padding: 18px;
}

.panel-head {
  gap: 12px;
  margin-bottom: 14px;
}

.overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  padding: 16px 16px 14px 20px;
  border-top: 1px solid var(--line);
}

.metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--red);
}

.metric-card:hover,
.metric-card.active {
  border-color: var(--line-strong);
  border-top-color: var(--line-strong);
  background: var(--surface-subtle);
}

.metric-card.active {
  box-shadow: 0 0 0 2px rgba(0, 5, 72, .12);
}

.overview span {
  font-size: 1.8rem;
}

.overview p {
  margin-top: 8px;
  font-size: .78rem;
  line-height: 1.3;
}

.overview-dashboard.has-message-dock {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 16px;
}

.message-dock {
  padding: 16px;
}

.toolbar {
  position: sticky;
  z-index: 20;
  top: calc(var(--header-height) + 10px);
  gap: 10px;
  margin-bottom: 18px;
  padding: 12px;
  background: rgba(255, 255, 255, .97);
}

.segmented {
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-subtle);
}

.segmented button {
  min-height: 34px;
  border: 0;
  background: transparent;
}

.segmented button.active {
  border: 0;
  background: var(--surface-raised);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.admin-subnav {
  position: sticky;
  z-index: 18;
  top: calc(var(--header-height) + 82px);
  flex-wrap: wrap;
  overflow: visible;
  margin-bottom: 16px;
  padding: 6px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.admin-subnav button {
  min-height: 36px;
  padding-inline: 12px;
}

.admin-shell .panel {
  padding: 18px;
}

.admin-grid {
  gap: 16px;
}

.edit-list,
.service-type-list,
.member-directory {
  gap: 8px;
}

.edit-row,
.service-type-editor,
.member-directory-row {
  border-color: var(--line);
  background: var(--surface-raised);
}

.member-directory-row:hover {
  border-color: var(--line-strong);
  background: var(--surface-subtle);
}

.flash {
  position: fixed;
  z-index: 320;
  top: calc(var(--header-height) + 12px);
  left: 50%;
  width: min(720px, calc(100% - 32px));
  max-height: calc(100dvh - var(--header-height) - 24px);
  margin: 0;
  padding: 14px 18px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--green);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--blue);
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  box-shadow: var(--shadow-md);
  animation: workspace-toast 7s ease forwards;
}

@keyframes workspace-toast {
  0% { opacity: 0; transform: translateX(-50%); }
  10%, 78% { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(-50%); visibility: hidden; }
}

.deployment-import-save-error {
  align-items: flex-start;
  margin-top: 16px;
}

.deployment-import-save-error small {
  color: inherit;
  font-size: .9rem;
  line-height: 1.5;
}

.item-modal {
  border-top-width: 5px;
  border-radius: 8px;
}

.auth-shell {
  min-height: 100vh;
  padding: 28px;
  background: var(--app-bg);
}

.auth-brand,
.auth-panel {
  box-shadow: var(--shadow-md);
}

@media (max-width: 1180px) and (min-width: 901px) {
  :root {
    --sidebar-width: 208px;
  }

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

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

@media (max-width: 900px) {
  :root {
    --header-height: 66px;
  }

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

  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 10px;
    border-color: var(--line);
    background: var(--surface-raised);
  }

  .mobile-menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-navy);
  }

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

  .brandmark strong {
    font-size: .86rem;
  }

  .brandmark div > span {
    font-size: .7rem;
  }

  .identity {
    min-width: 0;
  }

  .identity-user {
    min-width: 0;
  }

  .identity-user > strong,
  .identity-user > span:not(.identity-area-name),
  #logoutButton {
    display: none;
  }

  .identity-area {
    display: block;
    margin: 0;
  }

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

  .identity-area select {
    width: min(38vw, 210px);
    min-height: 38px;
    border-color: var(--line);
  }

  .tabs {
    z-index: 110;
    inset: 0 auto 0 0;
    width: min(320px, 86vw);
    padding: 14px;
    transform: translateX(-105%);
    transition: transform 180ms ease;
  }

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

  .tabs::before {
    display: none;
  }

  .tabs .mobile-nav-head {
    display: flex;
    margin-bottom: 8px;
    color: white;
  }

  .navigation-backdrop.open {
    display: block;
    z-index: 100;
    position: fixed;
    inset: 0;
    border: 0;
    border-radius: 0;
    background: rgba(9, 13, 53, .52);
  }

  main:not(.auth-shell):not(.configurator-shell) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: calc(var(--header-height) + 18px) 16px 30px;
  }

  .hero {
    margin-bottom: 14px;
    padding-bottom: 14px;
  }

  .hero h1 {
    font-size: 1.55rem;
  }

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

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

  .message-dock {
    grid-column: 1 / -1;
  }

  .toolbar {
    position: static;
  }

  .admin-subnav {
    position: static;
  }
}

@media (max-width: 600px) {
  .brandmark img {
    width: 38px;
    height: 38px;
  }

  .brandmark strong {
    max-width: 34vw;
  }

  .overview {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .metric-card {
    min-height: 92px;
    padding: 13px 12px 12px 16px;
  }

  .overview span {
    font-size: 1.5rem;
  }

  .panel {
    padding: 14px;
  }

  .overview-priority-grid,
  .overview-tools-grid {
    gap: 12px;
    margin-bottom: 12px;
  }

  .toolbar {
    padding: 10px;
  }

  .segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .segmented button {
    min-width: 0;
  }

  .page-planning .toolbar .segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .member-modal {
    width: calc(100vw - 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Product UI 3.0: team-focused shell, calendar cockpit and personal themes. */
:root {
  --app-bg: #f5f6f8;
  --nav-bg: #ffffff;
  --nav-hover: #f3f4f7;
  --surface-raised: #ffffff;
  --surface-subtle: #f7f8fa;
  --ink: #171922;
  --muted: #666c79;
  --line: #d9dce5;
  --line-strong: #c3c7d2;
  --text-soft: #707583;
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, .06);
  --shadow-md: 0 14px 38px rgba(20, 20, 30, .11);
  --sidebar-width: 218px;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: #151722;
  --nav-bg: #20232f;
  --nav-hover: #2b2f3d;
  --surface: #20232f;
  --surface-raised: #20232f;
  --surface-subtle: #292d3a;
  --grey: #191c27;
  --ink: #f4f5fa;
  --muted: #b4b8c7;
  --line: #3a3e4d;
  --line-strong: #505568;
  --text-soft: #b4b8c7;
  --blue: #f4f5fa;
  --blue-soft: #303547;
  --red-soft: #512234;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
  --shadow-md: 0 16px 42px rgba(0, 0, 0, .34);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --app-bg: #151722;
    --nav-bg: #20232f;
    --nav-hover: #2b2f3d;
    --surface: #20232f;
    --surface-raised: #20232f;
    --surface-subtle: #292d3a;
    --grey: #191c27;
    --ink: #f4f5fa;
    --muted: #b4b8c7;
    --line: #3a3e4d;
    --line-strong: #505568;
    --text-soft: #b4b8c7;
    --blue: #f4f5fa;
    --blue-soft: #303547;
    --red-soft: #512234;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .22);
    --shadow-md: 0 16px 42px rgba(0, 0, 0, .34);
  }
}

.brandbar {
  background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
}

.identity {
  align-items: center;
}

.identity-user {
  display: grid;
  grid-template-columns: auto minmax(150px, 240px);
  align-items: center;
  gap: 4px 10px;
}

.identity-profile {
  display: flex;
  grid-row: 1 / span 2;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 3px 6px;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.identity-profile:hover {
  border-color: var(--line);
  background: var(--surface-subtle);
}

.identity-profile > span:last-child {
  display: grid;
}

.identity-profile small {
  color: var(--muted);
  font-size: .7rem;
}

.identity-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.identity-area,
.identity-area-name {
  grid-column: 2;
}

.identity-area select {
  background: var(--surface-subtle);
  color: var(--ink);
}

.tabs {
  gap: 5px;
  border-right: 1px solid var(--line);
  background: var(--nav-bg);
}

.tabs::before {
  color: var(--muted);
}

.tabs button {
  gap: 10px;
  color: var(--muted);
}

.tabs button:hover {
  background: var(--nav-hover);
  color: var(--ink);
}

.tabs button.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--red) 9%, var(--surface-raised));
  color: var(--red);
}

.tabs button.active::before {
  inset: 7px auto 7px -14px;
  border-radius: 0 4px 4px 0;
}

.nav-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  flex: 0 0 auto;
  font-size: 1.05rem;
}

main:not(.auth-shell):not(.configurator-shell) {
  max-width: 1540px;
}

.page-overview .hero {
  min-height: 132px;
  display: flex;
  align-items: end;
  padding: 22px;
  border: 0;
  border-radius: 8px;
  background: #090d35;
  color: white;
  box-shadow: var(--shadow-sm);
}

.page-overview .hero h1 {
  color: white;
}

.page-overview .hero p:not(.eyebrow) {
  color: #cbd0e6;
}

.page-overview .hero .eyebrow {
  color: #ff7799;
}

.panel,
.metric-card,
.shift-card,
.year-card,
.toolbar,
.notice-board,
.metric-details,
.message-dock {
  background: var(--surface-raised);
}

.overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
  min-height: 96px;
  border-left: 4px solid var(--red);
  border-top-width: 1px;
}

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

.metric-card:hover,
.metric-card.active {
  background: var(--surface-subtle);
}

.overview-dashboard.has-message-dock {
  align-items: start;
}

.message-dock {
  position: sticky;
  top: calc(var(--header-height) + 16px);
}

.page-calendar .toolbar {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
}

.page-calendar .calendar-shell,
.page-calendar .week-calendar,
.page-calendar .month-grid {
  border-radius: 8px;
}

.segmented,
.identity-area select {
  background: var(--surface-subtle);
}

.segmented button.active {
  background: var(--surface-raised);
  color: var(--ink);
}

.admin-subnav {
  background: var(--surface-raised);
}

.admin-subnav button.active {
  background: var(--brand-navy);
  color: white;
}

.mobile-bottom-nav {
  display: none;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .personal-upcoming-item,
html[data-theme="dark"] .direct-message,
html[data-theme="dark"] .edit-row,
html[data-theme="dark"] .service-type-editor,
html[data-theme="dark"] .member-directory-row,
html[data-theme="dark"] .calendar-entry,
html[data-theme="dark"] .day,
html[data-theme="dark"] .item-modal,
html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .auth-brand {
  border-color: var(--line);
  background: var(--surface-raised);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] input,
  html[data-theme="system"] select,
  html[data-theme="system"] textarea,
  html[data-theme="system"] button.secondary,
  html[data-theme="system"] .personal-upcoming-item,
  html[data-theme="system"] .direct-message,
  html[data-theme="system"] .edit-row,
  html[data-theme="system"] .service-type-editor,
  html[data-theme="system"] .member-directory-row,
  html[data-theme="system"] .calendar-entry,
  html[data-theme="system"] .day,
  html[data-theme="system"] .item-modal,
  html[data-theme="system"] .auth-panel,
  html[data-theme="system"] .auth-brand {
    border-color: var(--line);
    background: var(--surface-raised);
    color: var(--ink);
  }
}

@media (max-width: 1180px) and (min-width: 901px) {
  :root {
    --sidebar-width: 76px;
  }

  .tabs {
    padding-inline: 9px;
  }

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

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

  .tabs button.active::before {
    left: -9px;
  }

  .nav-icon {
    font-size: 1.2rem;
  }

  .overview-dashboard.has-message-dock {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  }
}

@media (max-width: 900px) {
  .identity-user {
    display: flex;
    min-width: 0;
  }

  .identity-profile {
    min-width: 42px;
  }

  .identity-profile > span:last-child {
    display: none;
  }

  .identity-area,
  .identity-area-name {
    grid-column: auto;
  }

  .tabs {
    border-right: 0;
    box-shadow: var(--shadow-md);
  }

  .tabs .mobile-nav-head {
    color: var(--ink);
  }

  .navigation-backdrop.open {
    background: rgba(9, 13, 53, .58);
  }

  .message-dock {
    position: static;
  }

  .page-overview .hero {
    min-height: 116px;
    padding: 18px;
  }
}

@media (max-width: 600px) {
  body {
    padding-bottom: 62px;
  }

  main:not(.auth-shell):not(.configurator-shell) {
    padding-bottom: 26px;
  }

  .brandbar {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .brandmark {
    width: 38px;
  }

  .brandmark div {
    display: none;
  }

  .identity {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .identity-area select {
    width: min(46vw, 190px);
  }

  .install-app-button {
    display: none;
  }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 75;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 58px;
    padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
    box-shadow: 0 -5px 20px rgba(20, 20, 30, .08);
  }

  .mobile-bottom-nav button {
    display: grid;
    place-items: center;
    gap: 1px;
    min-width: 0;
    min-height: 48px;
    padding: 3px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: .64rem;
    text-overflow: ellipsis;
  }

  .mobile-bottom-nav button span {
    font-size: 1.08rem;
  }

  .mobile-bottom-nav button.active {
    color: var(--red);
  }

  .page-overview .hero {
    min-height: 106px;
    margin-bottom: 12px;
    padding: 15px;
  }

  .page-overview .hero h1 {
    font-size: 1.35rem;
  }

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

  .overview-dashboard.has-message-dock {
    display: flex;
    flex-direction: column;
  }

  .overview-dashboard .overview,
  .overview-dashboard .message-dock {
    width: 100%;
  }

}

/* Hotfix 1.9.1 final responsive overrides */
.overview-dashboard.has-message-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.overview-dashboard.has-message-dock .overview {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.metric-card,
.mailbox-card {
  display: grid;
  min-height: 104px;
  height: 100%;
  align-content: center;
  justify-items: start;
  padding-block: 14px;
}

.service-code-preview {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  line-height: 1;
}

input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="number"] {
  min-height: 42px;
  line-height: 42px;
  text-align: center;
}

input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value {
  min-height: 40px;
  line-height: 40px;
  text-align: center;
}

@media (max-width: 1100px) {
  .overview-dashboard.has-message-dock .overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .overview-dashboard.has-message-dock {
    display: grid;
  }

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

/* 1.10.3: shared open-service list and compact calendar legend */
.planning-open-services {
  margin-bottom: 14px;
}

.calendar-view-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  align-items: start;
  gap: 12px;
  min-width: 0;
}

.calendar-view-main {
  min-width: 0;
}

.service-legend {
  position: sticky;
  top: 78px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  width: 54px;
  margin: 0;
  padding: 8px 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-raised);
  overflow: visible;
}

.service-legend-label {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.service-legend .service-legend-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  cursor: help;
}

.service-legend .service-legend-chip::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 30;
  right: calc(100% + 9px);
  top: 50%;
  width: max-content;
  max-width: min(320px, calc(100vw - 90px));
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--brand-navy);
  color: #ffffff;
  box-shadow: var(--shadow);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.service-legend .service-legend-chip:hover::after,
.service-legend .service-legend-chip:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.service-code-preview,
.service-type-editor .service-code-preview,
.admin-shell .service-code-preview {
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  text-align: center;
}

@media (max-width: 820px) {
  .calendar-view-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .calendar-view-main {
    width: 100%;
  }

  .service-legend {
    position: static;
    order: -1;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .service-legend-label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .service-legend .service-legend-chip::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .service-legend .service-legend-chip {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 0.65rem;
  }
}

/* 1.11.0: unified mobile navigation, authentication and compact user editor. */
.password-field {
  position: relative;
}

.password-field input {
  padding-inline-end: 16px;
}

.password-field input::-webkit-caps-lock-indicator {
  display: none;
  opacity: 0;
}

.caps-lock-notice {
  margin-top: 4px;
  color: var(--red);
  font-size: .78rem;
  font-weight: 750;
}

.auth-text-button {
  width: auto;
  min-height: 36px;
  margin: 10px auto 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--red);
  font-size: .9rem;
}

.forgot-password-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.auth-form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.open-service-panel-head {
  align-items: end;
}

.open-service-panel-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.open-service-period-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 2px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.open-service-period-filter label {
  display: grid;
  gap: 5px;
  min-width: min(100%, 260px);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

.open-service-period-filter select,
.open-service-period-filter input {
  width: 100%;
  min-height: 42px;
  margin: 0;
  background: var(--surface-raised);
  color: var(--ink);
}

.member-modal {
  width: min(920px, calc(100vw - 28px));
  max-height: min(86vh, 820px);
}

.member-modal .member-master-form {
  gap: 10px;
}

.member-modal .member-data-group {
  gap: 8px;
  padding: 12px;
}

.member-modal input,
.member-modal select,
.member-modal textarea {
  min-height: 40px;
  padding: 8px 10px;
}

.member-modal label {
  gap: 4px;
  font-size: .82rem;
}

@media (max-width: 600px) {
  body {
    padding-bottom: 0;
  }

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

  .open-service-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .open-service-panel-head .count-badge {
    grid-column: 2;
    grid-row: 1;
  }

  .open-service-period-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .open-service-period-filter label {
    min-width: 0;
  }

  .auth-form-actions {
    grid-template-columns: 1fr;
  }

  .member-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .member-modal .member-data-group {
    grid-template-columns: 1fr;
  }

  .member-master-form .technical-security-data {
    grid-template-columns: minmax(0, 1fr);
  }

  .technical-security-action {
    width: 100%;
  }

  .two-factor-setup-content {
    grid-template-columns: 1fr;
  }

  .two-factor-qr {
    width: min(220px, 100%);
    margin: 0 auto;
  }

  .two-factor-secret,
  .two-factor-setup-modal .modal-actions {
    grid-template-columns: 1fr;
  }
}

/* Version 1.10.1 final dialog overrides */
.service-code-preview {
  display: grid;
  place-items: center;
  text-align: center;
}

.item-modal,
.admin-detail-modal,
.area-modal,
.notice-modal,
.calendar-link-modal {
  width: min(820px, calc(100vw - 24px));
  max-height: min(860px, calc(100dvh - 24px));
  padding: clamp(14px, 2vw, 20px);
  overflow: auto;
}

.service-type-editor {
  display: grid;
  grid-template-columns: 52px repeat(3, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.service-type-editor .service-default-requirements,
.service-type-editor .area-multi-select,
.service-type-editor .service-type-actions {
  grid-column: 1 / -1;
}

.service-type-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.service-type-actions button {
  width: auto;
  min-width: 150px;
}

.message-focus .panel-head {
  align-items: center;
  margin-bottom: 14px;
}

.message-focus .panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-focus .modal-close {
  flex: 0 0 42px;
  margin-left: 8px;
}

.message-focus .dock-composer {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 6px;
}

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

  .service-type-editor,
  .admin-detail-form,
  .modal-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-type-editor > *,
  .service-type-editor .service-default-requirements,
  .service-type-editor .area-multi-select,
  .service-type-editor .service-type-actions {
    grid-column: 1;
  }

  .service-type-actions {
    flex-direction: column;
  }

  .service-type-actions button {
    width: 100%;
  }
}
.assigned-staff-list,
.qualification-choice-list {
  display: grid;
  gap: 8px;
  width: 100%;
}

.assigned-staff-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 220px) auto;
  align-items: end;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.assigned-staff-row > span {
  display: grid;
  align-self: center;
}

.assigned-staff-row small {
  color: var(--muted);
}

.assigned-staff-row label,
.qualification-choice-list label {
  margin: 0;
}

.qualification-choice-list label {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
}

.compact-button {
  min-height: 42px;
  padding: 8px 12px;
}

.assignment-qualification-backdrop {
  z-index: 1300;
}

@media (max-width: 680px) {
  .assigned-staff-row,
  .qualification-choice-list label {
    grid-template-columns: 1fr;
  }

  .assigned-staff-row .compact-button {
    width: 100%;
  }
}

/* Keep the 1.29 dialog density authoritative after legacy release overrides. */
.item-modal.compact-dialog {
  padding: clamp(12px, 1.6vw, 16px);
}

.item-modal.compact-dialog .modal-form {
  gap: 8px 10px;
}

.item-modal.compact-dialog .assigned-staff-row {
  min-height: 48px;
  padding: 6px 8px;
}

.item-modal.compact-dialog :where(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 40px;
  padding-block: 8px;
}

@media (max-width: 680px) {
  .item-modal.compact-dialog :where(input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: 44px;
  }
}
/* Mobile app onboarding */
.profile-mobile-access {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}

.profile-mobile-access h3,
.profile-mobile-access p {
  margin: 0;
}

.profile-mobile-access .eyebrow {
  margin-bottom: .2rem;
}

.mobile-test-modal {
  width: min(760px, calc(100vw - 2rem));
  max-height: min(860px, calc(100dvh - 2rem));
  overflow: auto;
}

.mobile-test-welcome {
  display: grid;
  gap: .25rem;
  margin: .75rem 0 1rem;
  padding: .9rem 1rem;
  border-left: 4px solid var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.mobile-test-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin: 1rem 0;
}

.mobile-test-progress span {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.mobile-test-progress b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-subtle);
}

.mobile-test-progress .active {
  border-color: var(--red);
  color: var(--text);
}

.mobile-test-progress .active b {
  color: #fff;
  background: var(--red);
}

.mobile-test-form {
  display: grid;
  gap: 1rem;
}

.mobile-test-form fieldset {
  margin: 0;
}

.mobile-platform-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.mobile-platform-options label {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: .7rem;
  align-items: center;
  min-width: 0;
  min-height: 76px;
  padding: .75rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.mobile-platform-options label.selected {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 6%, var(--surface));
}

.mobile-platform-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mobile-platform-options .platform-symbol {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  font-size: .85rem;
  font-weight: 900;
}

.mobile-platform-options label:last-child .platform-symbol {
  background: #16855b;
}

.mobile-platform-options strong,
.mobile-platform-options small {
  min-width: 0;
}

.mobile-platform-options small,
.mobile-test-email small {
  color: var(--muted);
}

.mobile-test-email {
  display: grid;
  gap: .35rem;
}

.mobile-test-email input {
  width: 100%;
}

.mobile-test-consent {
  align-items: flex-start;
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle);
}

.mobile-test-guides {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.mobile-test-guides a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .55rem .8rem;
  text-decoration: none;
}

.mobile-test-status {
  display: grid;
  gap: .2rem;
  margin: 0;
  padding: .8rem 1rem;
  border-radius: 6px;
}

.mobile-test-status.requested {
  border: 1px solid #e2b93b;
  background: color-mix(in srgb, #e2b93b 12%, var(--surface));
}

.mobile-test-status.activated {
  border: 1px solid #00a68b;
  background: color-mix(in srgb, #00a68b 12%, var(--surface));
}

@media (max-width: 640px) {
  .profile-mobile-access,
  .mobile-test-modal .modal-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-mobile-access button,
  .mobile-test-modal .modal-actions button {
    width: 100%;
  }

  .mobile-test-progress {
    grid-template-columns: 1fr;
  }

  .mobile-platform-options {
    grid-template-columns: 1fr;
  }

  .mobile-test-guides {
    display: grid;
  }
}
.member-mobile-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  margin-left: 0.35rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: #e7f7f2;
  color: #006b5c;
  font-style: normal;
  font-weight: 700;
}

.member-mobile-usage {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
  background: var(--surface-soft, #f6f7f9);
}

.member-mobile-usage > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.member-mobile-usage span {
  display: grid;
  gap: 0.1rem;
  min-width: min(100%, 12rem);
  padding: 0.45rem 0.6rem;
  border-radius: 5px;
  background: var(--surface, #fff);
}

.member-mobile-usage small {
  color: var(--muted, #626979);
}

/* Einsatzstatistik 1.65 */
.report-workspace-switch {
  display: inline-flex;
  gap: .25rem;
  width: fit-content;
  padding: .25rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
  background: var(--surface, #fff);
}

.report-workspace-switch button,
.deployment-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.65rem;
  padding: .6rem .85rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted, #626979);
  font-weight: 750;
}

.report-workspace-switch button.active,
.deployment-tabs button.active {
  background: var(--navy, #000548);
  color: #fff;
}

.report-workspace-switch .app-icon,
.deployment-tabs .app-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.deployment-statistics-workspace {
  display: grid;
  gap: 1rem;
}

.deployment-statistics-head {
  display: grid;
  gap: 1rem;
  padding: 1.05rem;
}

.deployment-statistics-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.deployment-statistics-title h2,
.deployment-statistics-title p {
  margin: 0;
}

.deployment-statistics-title h2 {
  margin-top: .12rem;
}

.deployment-statistics-title > button,
.deployment-template-form > button,
.deployment-import-file > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 0 0 auto;
}

.deployment-tabs {
  display: flex;
  gap: .25rem;
  overflow-x: auto;
  padding-bottom: .1rem;
  border-bottom: 1px solid var(--border, #d8dce6);
  scrollbar-width: thin;
}

.deployment-tabs button {
  white-space: nowrap;
  border-radius: 4px 4px 0 0;
}

.deployment-filter-bar {
  display: grid;
  grid-template-columns: repeat(2, minmax(9.5rem, .7fr)) minmax(11rem, 1fr) minmax(12rem, 1.25fr) auto;
  align-items: end;
  gap: .7rem;
  padding: .8rem;
  background: var(--surface-soft, #f6f7f9);
  border-radius: 6px;
}

.deployment-period-filter {
  display: grid;
  grid-template-columns: minmax(12rem, .8fr) minmax(28rem, 2fr);
  gap: 1rem;
  align-items: center;
  padding: .9rem;
  border: 1px solid color-mix(in srgb, var(--navy, #000548) 14%, var(--border, #d8dce6));
  border-radius: 6px;
  background: color-mix(in srgb, var(--navy, #000548) 3%, var(--surface, #fff));
}

.deployment-period-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.deployment-period-heading > div {
  display: grid;
  gap: .15rem;
}

.deployment-period-heading p {
  margin: 0;
}

.deployment-period-heading strong {
  color: var(--ink, #171922);
  font-size: 1.05rem;
}

.deployment-period-heading > span {
  padding: .3rem .5rem;
  border-radius: 4px;
  background: var(--surface, #fff);
  color: var(--muted, #626979);
  font-size: .76rem;
  font-weight: 750;
  white-space: nowrap;
}

.deployment-period-controls {
  display: grid;
  grid-template-columns: auto minmax(15rem, 1fr);
  align-items: end;
  gap: .55rem .8rem;
}

.deployment-period-controls > small {
  grid-column: 1 / -1;
  color: var(--muted, #626979);
}

.deployment-period-modes {
  display: inline-flex;
  gap: .2rem;
  padding: .2rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 5px;
  background: var(--surface, #fff);
}

.deployment-period-modes button {
  min-height: 2.3rem;
  padding: .45rem .7rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--muted, #626979);
  font-weight: 750;
}

.deployment-period-modes button.active {
  background: var(--navy, #000548);
  color: #fff;
}

.deployment-period-stepper,
.deployment-period-range {
  display: grid;
  grid-template-columns: 2.55rem minmax(9rem, 1fr) 2.55rem;
  align-items: end;
  gap: .35rem;
}

.deployment-period-range {
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
}

.deployment-period-stepper label,
.deployment-period-range label {
  display: grid;
  gap: .25rem;
}

.deployment-period-stepper label > span,
.deployment-period-range label > span {
  color: var(--muted, #626979);
  font-size: .76rem;
  font-weight: 750;
}

.deployment-period-stepper .icon-button {
  width: 2.55rem;
  min-width: 2.55rem;
  height: 2.55rem;
}

.deployment-facet-filter {
  grid-template-columns: minmax(11rem, 1fr) minmax(13rem, 1.2fr) auto;
}

.deployment-filter-bar label,
.deployment-entry-form-grid label,
.deployment-template-form label,
.deployment-import-file label,
.deployment-import-actions > label,
.deployment-mapping-grid label {
  display: grid;
  gap: .28rem;
  min-width: 0;
}

.deployment-filter-bar label > span,
.deployment-entry-form-grid label > span,
.deployment-template-form label > span,
.deployment-import-file label > span,
.deployment-import-actions label > span,
.deployment-mapping-grid label > span {
  color: var(--muted, #626979);
  font-size: .78rem;
  font-weight: 750;
}

.deployment-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}

.deployment-kpis article {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 5.2rem;
  padding: .9rem;
  border: 1px solid var(--border, #d8dce6);
  border-left: 4px solid var(--accent, #eb003c);
  border-radius: 6px;
  background: var(--surface, #fff);
}

.deployment-kpis article:nth-child(2) { border-left-color: #1877b7; }
.deployment-kpis article:nth-child(3) { border-left-color: #007d68; }
.deployment-kpis article:nth-child(4) { border-left-color: #714b8f; }

.deployment-kpis .app-icon {
  width: 1.55rem;
  height: 1.55rem;
  color: var(--navy, #000548);
}

.deployment-kpis span {
  display: grid;
  gap: .1rem;
}

.deployment-kpis strong {
  color: var(--navy, #000548);
  font-size: 1.45rem;
}

.deployment-kpis small {
  color: var(--muted, #626979);
}

.deployment-overview-grid,
.deployment-map-layout,
.deployment-import-grid,
.deployment-template-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
  gap: 1rem;
}

.deployment-import-grid > .report-module:first-child,
.deployment-import-grid > .report-module:last-child {
  grid-column: 1 / -1;
}

.deployment-template-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.deployment-template-layout > :last-child,
.deployment-import-grid > .deployment-import-result,
.deployment-import-grid > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.deployment-bars,
.deployment-recent,
.deployment-location-list,
.deployment-profile-list,
.deployment-template-list {
  display: grid;
  gap: .15rem;
}

.deployment-bars > div {
  display: grid;
  grid-template-columns: minmax(9rem, .9fr) minmax(8rem, 1.4fr) 4.5rem;
  align-items: center;
  gap: .65rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border, #d8dce6);
}

.deployment-bars span {
  display: grid;
}

.deployment-bars small,
.deployment-entry-row small,
.deployment-template-list small,
.deployment-profile-list small {
  color: var(--muted, #626979);
}

.deployment-bars > div > div,
.deployment-people-list article > div {
  height: .5rem;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--navy, #000548) 8%, var(--surface, #fff));
}

.deployment-bars i,
.deployment-people-list i {
  display: block;
  width: var(--value);
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #eb003c);
}

.deployment-entry-row {
  display: grid;
  grid-template-columns: 8.2rem minmax(12rem, 1fr) minmax(10rem, .75fr) 2.6rem;
  align-items: center;
  gap: .75rem;
  min-height: 4.35rem;
  padding: .65rem .15rem;
  border-bottom: 1px solid var(--border, #d8dce6);
}

.deployment-entry-row > time,
.deployment-entry-row > span {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.deployment-entry-row strong,
.deployment-entry-row small {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 1081px) {
  .deployment-recent .deployment-entry-row {
    grid-template-columns: minmax(6.5rem, .8fr) minmax(0, 1.4fr) 2.6rem;
  }

  .deployment-recent .deployment-entry-row > span:nth-child(3) {
    display: none;
  }
}

.deployment-map-panel {
  min-width: 0;
}

.deployment-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 520;
  min-height: 26rem;
  overflow: hidden;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
  background: #eef2f5;
}

.deployment-map .leaflet-control-zoom a {
  color: var(--navy, #000548);
}

.deployment-map .leaflet-control-attribution {
  padding: .15rem .35rem;
  background: rgb(255 255 255 / .9);
  color: #273046;
  font-size: .65rem;
}

.deployment-leaflet-marker-shell {
  border: 0;
  background: transparent;
}

.deployment-leaflet-marker {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--accent, #eb003c);
  color: #fff;
  box-shadow: 0 3px 10px rgb(0 5 72 / .22);
}

.deployment-leaflet-marker .app-icon {
  width: 1.15rem;
  height: 1.15rem;
  transform: rotate(45deg);
}

.deployment-leaflet-marker b {
  position: absolute;
  top: -.55rem;
  right: -.55rem;
  display: grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .25rem;
  border: 2px solid #fff;
  border-radius: 999px;
  transform: rotate(45deg);
  background: var(--navy, #000548);
  color: #fff;
  font-size: .67rem;
}

.deployment-map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .5rem;
  color: var(--muted, #626979);
}

.deployment-map-loading .app-icon {
  width: 2rem;
  height: 2rem;
}

.deployment-map-popup > strong {
  display: block;
  margin-bottom: .4rem;
  color: var(--navy, #000548);
}

.deployment-map-popup ul {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deployment-map-popup li {
  display: grid;
  gap: .08rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid #e2e6ed;
}

.deployment-map-popup li span,
.deployment-map-popup p {
  color: #626979;
  font-size: .78rem;
}

.deployment-map-empty {
  display: grid;
  place-items: center;
  min-height: 18rem;
  padding: 2rem;
  border: 1px dashed var(--border, #d8dce6);
  border-radius: 6px;
  text-align: center;
}

.deployment-map-empty .app-icon {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: .7rem;
  color: #1877b7;
}

.deployment-location-list > div,
.deployment-profile-list article,
.deployment-template-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border, #d8dce6);
}

.deployment-location-list span,
.deployment-profile-list span,
.deployment-template-list span {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .2rem .5rem;
  min-width: 0;
}

.deployment-profile-list small,
.deployment-template-list small {
  grid-column: 2;
}

.deployment-people-list {
  display: grid;
}

.deployment-people-list article {
  display: grid;
  grid-template-columns: 2.2rem minmax(12rem, .8fr) minmax(10rem, 1.5fr) auto;
  align-items: center;
  gap: .7rem;
  min-height: 4rem;
  border-bottom: 1px solid var(--border, #d8dce6);
}

.deployment-people-list article > span:nth-child(2) {
  display: grid;
}

.deployment-import-file {
  display: grid;
  grid-template-columns: minmax(14rem, 1.2fr) minmax(12rem, .8fr) minmax(8rem, .45fr) minmax(10rem, .55fr) auto;
  align-items: end;
  gap: .7rem;
}

.deployment-import-source {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .8rem;
  padding: .7rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
  background: var(--surface-soft, #f6f7f9);
}

.deployment-import-source span {
  display: grid;
}

.deployment-mapping-panel {
  grid-column: 1 / -1;
}

.deployment-mapping-grid {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
}

.deployment-mapping-row {
  display: grid;
  grid-template-columns: minmax(12rem, .7fr) minmax(15rem, 1fr) minmax(12rem, .8fr);
  gap: .75rem;
  align-items: start;
  padding: .75rem;
  border-bottom: 1px solid var(--border, #d8dce6);
}

.deployment-mapping-row:last-child {
  border-bottom: 0;
}

.deployment-mapping-row > div,
.deployment-mapping-row > label {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.deployment-mapping-row > div small {
  color: var(--muted, #687083);
}

.deployment-mapping-row select[multiple] {
  min-height: 7.2rem;
  padding: .3rem;
}

.deployment-import-format {
  display: grid;
  grid-template-columns: repeat(2, minmax(14rem, 1fr));
  gap: .75rem;
  margin-bottom: .85rem;
  padding: .75rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
  background: var(--surface-soft, #f6f7f9);
}

.deployment-profile-toolbar,
.deployment-template-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
}

.deployment-profile-editor {
  grid-column: 1 / -1;
}

.deployment-profile-mapping-row > label.full {
  grid-column: 2 / -1;
}

.deployment-profile-person-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .55rem;
}

.deployment-profile-person-columns label {
  display: grid;
  gap: .25rem;
  min-width: 0;
}

.deployment-profile-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
}

.deployment-profile-actions .danger {
  color: #b80030;
}

.deployment-import-actions {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) auto auto;
  align-items: end;
  gap: .8rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--border, #d8dce6);
}

.deployment-import-preview-table {
  display: grid;
  max-height: 28rem;
  overflow: auto;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
}

.deployment-import-preview-table > div {
  display: grid;
  grid-template-columns: 2.2rem minmax(14rem, .8fr) minmax(16rem, 1.2fr);
  gap: .7rem;
  align-items: center;
  padding: .65rem;
  border-bottom: 1px solid var(--border, #d8dce6);
}

.deployment-import-preview-table > div.has-error {
  background: color-mix(in srgb, var(--accent, #eb003c) 7%, var(--surface, #fff));
}

.deployment-import-preview-table span {
  display: grid;
}

.deployment-import-counts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.deployment-import-counts span {
  padding: .25rem .5rem;
  border-radius: 4px;
  background: var(--surface-soft, #f6f7f9);
  font-size: .75rem;
  font-weight: 750;
}

.deployment-import-counts .success { color: #007d68; }
.deployment-import-counts .danger { color: #b80030; }

.deployment-template-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  margin: .8rem 0;
}

.deployment-template-facts div {
  display: grid;
  gap: .15rem;
  padding: .7rem;
  background: var(--surface-soft, #f6f7f9);
  border-radius: 6px;
}

.deployment-template-form {
  display: grid;
  gap: .75rem;
}

.deployment-entry-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(76rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  background: var(--surface-raised, #fff);
  color: var(--text, #171923);
}

.deployment-entry-card > .modal-close {
  position: absolute;
  z-index: 3;
  top: 1rem;
  right: 1rem;
}

.deployment-entry-card > .modal-heading {
  padding-right: 3.5rem;
}

.deployment-entry-card > form {
  min-height: 0;
  overflow: auto;
  padding: .25rem .25rem 0 0;
  scrollbar-gutter: stable;
}

.deployment-entry-card .modal-actions {
  bottom: 0;
  margin-top: 1rem;
  padding: .8rem 0 0;
  border-top: 1px solid var(--border, #d8dce6);
  background: var(--surface-raised, #fff);
}

.deployment-entry-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.deployment-entry-form-grid .full {
  grid-column: 1 / -1;
}

.deployment-member-picker {
  min-width: 0;
  margin-top: 1rem;
  padding: .75rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
}

.deployment-member-search {
  display: flex;
  align-items: center;
  gap: .45rem;
  max-width: 24rem;
  margin-bottom: .6rem;
}

.deployment-member-search input {
  flex: 1;
}

.deployment-member-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  max-height: 16rem;
  overflow: auto;
}

.deployment-member-picker > div > label {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  padding: .45rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 5px;
}

.deployment-member-picker > div > label > span {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.deployment-member-picker .member-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--navy, #000548);
  color: #fff;
  font-size: .72rem;
}

.deployment-member-picker .member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1080px) {
  .deployment-period-filter {
    grid-template-columns: 1fr;
  }

  .deployment-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deployment-filter-bar > button {
    width: 100%;
  }

  .deployment-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deployment-overview-grid,
  .deployment-map-layout,
  .deployment-import-grid,
  .deployment-template-layout {
    grid-template-columns: 1fr;
  }

  .deployment-template-layout > *,
  .deployment-import-grid > * {
    grid-column: 1;
  }

  .deployment-entry-form-grid,
  .deployment-member-picker > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .deployment-mapping-row {
    grid-template-columns: minmax(11rem, .65fr) minmax(13rem, 1fr);
  }

  .deployment-mapping-row > label:last-child { grid-column: 2; }
}

@media (max-width: 700px) {
  .report-workspace-switch,
  .report-workspace-switch button,
  .deployment-statistics-title,
  .deployment-import-file,
  .deployment-import-actions {
    width: 100%;
  }

  .report-workspace-switch,
  .deployment-statistics-title {
    align-items: stretch;
    flex-direction: column;
  }

  .report-workspace-switch button {
    justify-content: flex-start;
  }

  .deployment-filter-bar,
  .deployment-kpis,
  .deployment-import-file,
  .deployment-import-actions,
  .deployment-entry-form-grid,
  .deployment-member-picker > div,
  .deployment-template-facts {
    grid-template-columns: 1fr;
  }

  .deployment-period-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .deployment-period-controls {
    grid-template-columns: 1fr;
  }

  .deployment-period-controls > small {
    grid-column: 1;
  }

  .deployment-period-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .deployment-period-modes button {
    min-width: 0;
    padding-inline: .35rem;
  }

  .deployment-period-stepper,
  .deployment-period-range {
    width: 100%;
  }

  .deployment-import-format,
  .deployment-mapping-row {
    grid-template-columns: 1fr;
  }

  .deployment-mapping-row > label:last-child {
    grid-column: 1;
  }

  .deployment-mapping-row select[multiple] { min-height: 9rem; }

  .deployment-entry-form-grid .full {
    grid-column: 1;
  }

  .deployment-entry-card .modal-actions {
    position: static;
    margin: 1rem 0 0;
    padding: .8rem 0 0;
  }

  .deployment-entry-row {
    grid-template-columns: 6.5rem minmax(0, 1fr) 2.5rem;
  }

  .deployment-entry-row > span:nth-child(3) {
    grid-column: 2;
  }

  .deployment-entry-row > button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .deployment-bars > div {
    grid-template-columns: minmax(8rem, 1fr) 4rem;
  }

  .deployment-bars > div > div {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .deployment-people-list article {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    padding: .6rem 0;
  }

  .deployment-people-list article > div {
    grid-column: 2 / -1;
  }

  .deployment-import-preview-table > div {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .deployment-import-preview-table > div > span:last-child {
    grid-column: 2;
  }

  .deployment-map {
    min-height: 20rem;
    aspect-ratio: auto;
  }
}


/* Einsatzstatistik: nachvollziehbare Vorlagen- und Importkonfiguration */
.deployment-import-command-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
}

.deployment-import-command-bar button,
.deployment-category-editor > button,
.deployment-custom-field-editor > button,
.deployment-custom-field-footer button,
.deployment-import-correction-form button,
.deployment-template-version button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.deployment-import-file-picker input[type="file"] {
  min-height: 2.65rem;
  padding: .35rem;
  background: var(--surface, #fff);
}

.deployment-template-builder {
  min-width: 0;
}

.deployment-template-form fieldset {
  min-width: 0;
  margin: 0;
  padding: .85rem;
  border: 1px solid var(--border, #d8dce6);
  border-radius: 6px;
}

.deployment-template-form fieldset legend {
  padding: 0 .3rem;
  color: var(--navy, #000548);
  font-size: .86rem;
  font-weight: 800;
}

.deployment-category-editor > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-bottom: .65rem;
}

.deployment-category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.65rem;
  gap: .4rem;
  align-items: center;
}

.deployment-custom-field-editor > div {
  display: grid;
  gap: .65rem;
  margin-bottom: .65rem;
}

.deployment-custom-field-row {
  display: grid;
  gap: .65rem;
  padding: .75rem;
  border: 1px solid var(--border, #d8dce6);
  border-left: 4px solid #1877b7;
  border-radius: 6px;
  background: var(--surface-soft, #f6f7f9);
}

.deployment-custom-field-main {
  display: grid;
  grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, .8fr) minmax(9rem, .7fr) minmax(10rem, .8fr);
  gap: .6rem;
}

.deployment-custom-field-main label,
.deployment-custom-field-options label,
.deployment-import-correction-grid label {
  display: grid;
  gap: .28rem;
  min-width: 0;
}

.deployment-custom-field-main label > span,
.deployment-custom-field-options label > span,
.deployment-import-correction-grid label > span {
  color: var(--muted, #626979);
  font-size: .76rem;
  font-weight: 750;
}

.deployment-custom-field-options.hidden {
  display: none;
}

.deployment-custom-field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.deployment-core-fields {
  margin: .75rem 0;
  border-top: 1px solid var(--border, #d8dce6);
  border-bottom: 1px solid var(--border, #d8dce6);
}

.deployment-core-fields summary {
  padding: .7rem 0;
  color: var(--navy, #000548);
  font-weight: 750;
  cursor: pointer;
}

.deployment-core-fields > div {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0 0 .75rem;
}

.deployment-core-fields > div span {
  padding: .28rem .48rem;
  border-radius: 4px;
  background: var(--surface-soft, #f6f7f9);
  color: var(--muted, #626979);
  font-size: .74rem;
  font-weight: 700;
}

.deployment-template-version > span {
  display: grid;
  min-width: 0;
}

.deployment-template-protected {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: .3rem !important;
  padding: .3rem .45rem;
  border-radius: 4px;
  background: var(--surface-soft, #f6f7f9);
  color: var(--muted, #626979);
  font-size: .72rem;
  font-weight: 750;
}

.deployment-template-protected .app-icon {
  width: .9rem;
  height: .9rem;
}

.deployment-import-review {
  display: grid;
  gap: .55rem;
}

.deployment-import-review-row {
  overflow: hidden;
  border: 1px solid var(--border, #d8dce6);
  border-left: 4px solid #d58b00;
  border-radius: 6px;
  background: var(--surface, #fff);
}

.deployment-import-review-row.has-error {
  border-left-color: var(--accent, #eb003c);
}

.deployment-import-review-row > summary {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  padding: .75rem;
  cursor: pointer;
  list-style-position: inside;
}

.deployment-import-review-row > summary > span:nth-of-type(1) {
  display: grid;
  gap: .1rem;
  min-width: 0;
}

.deployment-import-review-row > summary small {
  color: var(--muted, #626979);
}

.deployment-import-correction-form {
  padding: .85rem;
  border-top: 1px solid var(--border, #d8dce6);
  background: var(--surface-soft, #f6f7f9);
}

.deployment-import-correction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}

.deployment-import-correction-grid .wide {
  grid-column: span 2;
}

.deployment-import-correction-form .panel-actions {
  margin-top: .75rem;
}

.deployment-import-all-clear {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem;
  border-left: 4px solid #007d68;
  background: color-mix(in srgb, #007d68 8%, var(--surface, #fff));
  color: #006c5b;
}

.deployment-import-all-clear > span {
  display: grid;
}

.deployment-import-all-clear .app-icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 1080px) {
  .deployment-custom-field-main,
  .deployment-import-correction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .deployment-import-command-bar,
  .deployment-import-command-bar button,
  .deployment-custom-field-footer,
  .deployment-custom-field-footer button {
    width: 100%;
  }

  .deployment-import-command-bar,
  .deployment-custom-field-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .deployment-category-editor > div,
  .deployment-custom-field-main,
  .deployment-import-correction-grid {
    grid-template-columns: 1fr;
  }

  .deployment-import-correction-grid .wide {
    grid-column: 1;
  }

  .deployment-import-review-row > summary {
    grid-template-columns: 1fr;
  }

  .deployment-import-review-row > summary .status-badge {
    justify-self: start;
  }

  .deployment-template-actions {
    justify-content: flex-start;
  }
}

/* Manual service reminders */
.item-modal.service-reminder-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 32px));
  height: min(820px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
}

.item-modal.service-reminder-modal > .panel-head {
  margin: 0;
  padding: 16px 20px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-raised);
}

.item-modal.service-reminder-modal > .panel-head p:last-child {
  margin: 3px 0 0;
  color: var(--muted);
}

.service-reminder-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 14px 20px 16px;
  overflow-y: auto;
  background: var(--surface);
}

.service-reminder-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}

.service-reminder-step > strong,
.service-reminder-step > i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-style: normal;
}

.service-reminder-step > i {
  background: var(--surface-subtle, #f6f7f9);
  color: var(--muted);
}

.service-reminder-step.complete > i {
  background: var(--ok);
  color: #fff;
}

.service-reminder-step.complete > strong {
  background: var(--red);
}

.service-reminder-step > span {
  display: grid;
  gap: 2px;
}

.service-reminder-step small,
.service-reminder-audience small,
.service-reminder-item small,
.service-reminder-channel-note small,
.service-reminder-notice small,
.service-reminder-summary small {
  color: var(--muted);
  font-weight: 600;
}

.service-reminder-selection {
  grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
  grid-template-rows: auto auto auto auto minmax(220px, 1fr) auto;
  gap: 12px 18px;
  overflow: hidden;
}

.service-reminder-selection .service-reminder-step {
  grid-column: 1 / -1;
  grid-row: 1;
}

.service-reminder-audience {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.service-reminder-audience legend {
  margin-bottom: 7px;
  color: var(--ink);
  font-weight: 800;
}

.service-reminder-audience .segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.service-reminder-audience button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 58px;
  color: var(--muted);
  text-align: left;
}

.service-reminder-audience button > span {
  display: grid;
  gap: 2px;
}

.service-reminder-audience button.active {
  border-color: color-mix(in srgb, var(--red) 48%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface-raised));
  color: var(--red);
}

.service-reminder-filters {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(132px, .42fr) minmax(132px, .42fr) minmax(210px, 1.16fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-subtle, #f6f7f9);
}

.service-reminder-filters label,
.service-reminder-note {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.service-reminder-filters input[type="date"] {
  text-align: center;
}

.service-reminder-selection-head {
  grid-column: 1;
  grid-row: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding-inline: 2px;
}

.service-reminder-selection-head .check {
  margin: 0;
}

.service-reminder-selection-head > strong {
  color: var(--red);
  font-size: .82rem;
}

.service-reminder-list {
  grid-column: 1;
  grid-row: 5;
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 2px 6px 2px 2px;
  scrollbar-gutter: stable;
}

.service-reminder-item {
  display: grid;
  grid-template-columns: 24px minmax(116px, .58fr) minmax(170px, 1.25fr) minmax(110px, .65fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 4px solid transparent;
  border-radius: 6px;
  background: var(--surface-raised);
  cursor: pointer;
}

.service-reminder-item:hover {
  border-color: var(--line-strong);
}

.service-reminder-item.selected {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 5%, var(--surface-raised));
}

.service-reminder-item input {
  margin: 0;
}

.service-reminder-item time,
.service-reminder-item > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.service-reminder-item > span strong,
.service-reminder-item > span small,
.service-reminder-item > em {
  overflow-wrap: anywhere;
}

.service-reminder-item > em {
  color: var(--muted);
  font-size: .76rem;
  font-style: normal;
  font-weight: 750;
  text-align: right;
}

.service-reminder-hidden-selection {
  grid-column: 1;
  grid-row: 6;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: .78rem;
}

.service-reminder-note {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: start;
  position: relative;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.service-reminder-note textarea {
  min-height: 118px;
  resize: vertical;
}

.service-reminder-note > small {
  justify-self: end;
  color: var(--muted);
}

.service-reminder-channel-note,
.service-reminder-notice {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border-left: 4px solid var(--blue);
  background: var(--surface-subtle, #f6f7f9);
}

.service-reminder-selection .service-reminder-channel-note {
  grid-column: 2;
  grid-row: 5;
  align-self: start;
}

.service-reminder-channel-note > span,
.service-reminder-notice > span {
  display: grid;
  gap: 2px;
}

.service-reminder-notice {
  border-left-color: var(--ok);
}

.service-reminder-notice.warning {
  border-left-color: #d58b00;
}

.service-reminder-error {
  margin: 0;
  padding: 11px 12px;
  border-left: 4px solid var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface-raised));
  color: var(--ink);
  font-weight: 700;
}

.service-reminder-selection .service-reminder-error {
  grid-column: 2;
  grid-row: 6;
  align-self: start;
}

.service-reminder-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.service-reminder-counts article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 9px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--surface-raised);
}

.service-reminder-counts article > span {
  grid-row: 1 / 3;
  color: var(--red);
}

.service-reminder-counts strong {
  color: var(--blue);
  font-size: 1.35rem;
}

.service-reminder-counts small {
  color: var(--muted);
}

.service-reminder-message {
  padding: 12px;
  border-left: 4px solid var(--blue);
  background: var(--surface-subtle, #f6f7f9);
}

.service-reminder-message p {
  margin: 5px 0 0;
  white-space: pre-wrap;
}

.service-reminder-summary {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.service-reminder-summary > summary {
  padding: 12px;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}

.service-reminder-summary > div {
  border-top: 1px solid var(--line);
}

.service-reminder-summary article {
  display: grid;
  grid-template-columns: minmax(125px, .55fr) minmax(170px, 1.2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.service-reminder-summary article:last-child {
  border-bottom: 0;
}

.service-reminder-summary article > time,
.service-reminder-summary article > span {
  display: grid;
  gap: 2px;
}

.service-reminder-success {
  place-items: center;
  align-content: center;
  min-height: 360px;
  text-align: center;
}

.service-reminder-success > p {
  max-width: 560px;
  margin: 0;
}

.service-reminder-success-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ok);
  color: #fff;
}

.service-reminder-success-icon .app-icon {
  width: 28px;
  height: 28px;
}

.service-reminder-success .service-reminder-counts {
  width: min(560px, 100%);
}

.item-modal.service-reminder-modal .service-reminder-actions {
  margin: 0;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-raised);
}

.item-modal.service-reminder-modal .service-reminder-actions:has([data-preview-service-reminder])::before,
.item-modal.service-reminder-modal .service-reminder-actions:has([data-send-service-reminder])::before {
  margin-right: auto;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 750;
}

.item-modal.service-reminder-modal .service-reminder-actions:has([data-preview-service-reminder])::before {
  content: "Wähle mindestens einen Dienst aus.";
}

.item-modal.service-reminder-modal .service-reminder-actions:has([data-preview-service-reminder]:not(:disabled))::before {
  content: "Auswahl bereit. Prüfe jetzt Empfänger und Versandwege.";
}

.item-modal.service-reminder-modal .service-reminder-actions:has([data-send-service-reminder])::before {
  content: "Kontrolliere die Vorschau vor dem Versand.";
}

.item-modal.service-reminder-modal .service-reminder-actions button {
  min-width: 150px;
}

.item-modal.service-reminder-modal .service-reminder-actions [data-preview-service-reminder],
.item-modal.service-reminder-modal .service-reminder-actions [data-send-service-reminder] {
  min-width: 220px;
}

.item-modal.service-reminder-modal .service-reminder-actions button .app-icon,
.service-reminder-entry .app-icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .item-modal.service-reminder-modal {
    width: min(780px, calc(100vw - 24px));
    height: min(900px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }

  .service-reminder-selection {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(280px, 1fr) auto auto auto auto;
    overflow-y: auto;
  }

  .service-reminder-selection .service-reminder-step,
  .service-reminder-audience,
  .service-reminder-filters,
  .service-reminder-selection-head,
  .service-reminder-list,
  .service-reminder-hidden-selection,
  .service-reminder-note,
  .service-reminder-selection .service-reminder-channel-note,
  .service-reminder-selection .service-reminder-error {
    grid-column: 1;
  }

  .service-reminder-selection .service-reminder-step { grid-row: 1; }
  .service-reminder-audience { grid-row: 2; }
  .service-reminder-filters { grid-row: 3; }
  .service-reminder-selection-head { grid-row: 4; }
  .service-reminder-list {
    grid-row: 5;
    min-height: 280px;
    max-height: 390px;
  }
  .service-reminder-hidden-selection { grid-row: 6; }
  .service-reminder-note { grid-row: 7; }
  .service-reminder-selection .service-reminder-channel-note { grid-row: 8; }
  .service-reminder-selection .service-reminder-error { grid-row: 9; }
  .service-reminder-note textarea { min-height: 86px; }
}

@media (max-width: 720px) {
  .modal-backdrop.service-reminder-backdrop {
    align-items: stretch;
    padding: 0;
  }

  .item-modal.service-reminder-modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .item-modal.service-reminder-modal > .panel-head,
  .service-reminder-body,
  .item-modal.service-reminder-modal .service-reminder-actions {
    padding-inline: 14px;
  }

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

  .service-reminder-search {
    grid-column: 1 / -1;
  }

  .service-reminder-item {
    grid-template-columns: 24px minmax(90px, .7fr) minmax(0, 1.3fr);
  }

  .service-reminder-item > em {
    grid-column: 2 / -1;
    text-align: left;
  }

  .service-reminder-summary article {
    grid-template-columns: minmax(100px, .6fr) minmax(0, 1.4fr);
  }

  .service-reminder-summary article > b {
    grid-column: 1 / -1;
  }

  .item-modal.service-reminder-modal .service-reminder-actions:has([data-preview-service-reminder])::before,
  .item-modal.service-reminder-modal .service-reminder-actions:has([data-send-service-reminder])::before {
    width: 100%;
    margin-bottom: 2px;
    text-align: center;
  }
}

@media (max-width: 460px) {
  .service-reminder-audience .segmented,
  .service-reminder-counts {
    grid-template-columns: 1fr;
  }

  .service-reminder-selection-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-reminder-item {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .service-reminder-item time,
  .service-reminder-item > span,
  .service-reminder-item > em {
    grid-column: 2;
  }

  .item-modal.service-reminder-modal .service-reminder-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .item-modal.service-reminder-modal .service-reminder-actions button {
    width: 100%;
  }
}


/* Version 1.66: clear manual reminder targeting and delivery status */
.item-modal.service-reminder-modal .service-reminder-audience .segmented {
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  height: auto;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: none;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button > .app-icon {
  color: var(--muted);
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button b,
.item-modal.service-reminder-modal .service-reminder-audience .segmented > button small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button b {
  color: var(--ink);
  font-size: .94rem;
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button small {
  color: var(--muted);
  line-height: 1.3;
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button.active {
  border-color: color-mix(in srgb, var(--red) 58%, var(--line));
  background: color-mix(in srgb, var(--red) 6%, var(--surface-raised));
  color: var(--ink);
  box-shadow: inset 4px 0 var(--red);
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button.active > .app-icon {
  color: var(--red);
}

.item-modal.service-reminder-modal .service-reminder-audience .segmented > button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--red) 28%, transparent);
  outline-offset: 2px;
}

.service-reminder-preview {
  align-content: start;
}

.service-reminder-recipient-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-raised);
}

.service-reminder-recipient-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.service-reminder-recipient-head > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.service-reminder-recipient-head small {
  color: var(--muted);
  font-weight: 600;
}

.service-reminder-recipient-head .check {
  flex: 0 0 auto;
  margin: 0;
}

.service-reminder-recipient-search {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(420px, 100%);
  color: var(--muted);
}

.service-reminder-recipient-search input {
  width: 100%;
}

.service-reminder-recipient-list {
  display: grid;
  align-content: start;
  max-height: 310px;
  overflow-y: auto;
  border-block: 1px solid var(--line);
  scrollbar-gutter: stable;
}

.service-reminder-recipient {
  display: grid;
  grid-template-columns: 24px minmax(150px, .8fr) minmax(290px, 1.35fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 9px 10px 6px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: var(--surface-raised);
  cursor: pointer;
}

.service-reminder-recipient:last-of-type {
  border-bottom: 0;
}

.service-reminder-recipient:hover {
  background: var(--surface-subtle, #f6f7f9);
}

.service-reminder-recipient.selected {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 4%, var(--surface-raised));
}

.service-reminder-recipient > input {
  margin: 0;
}

.service-reminder-recipient-person {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.service-reminder-recipient-person strong {
  overflow-wrap: anywhere;
}

.service-reminder-recipient-person small,
.service-reminder-channel small {
  color: var(--muted);
  font-weight: 600;
}

.service-reminder-recipient-channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.service-reminder-channel {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
  padding-left: 8px;
  border-left: 3px solid var(--line);
}

.service-reminder-channel > span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.service-reminder-channel b,
.service-reminder-channel small {
  overflow-wrap: anywhere;
}

.service-reminder-channel.available {
  border-left-color: var(--ok);
}

.service-reminder-channel.available > .app-icon {
  color: var(--ok);
}

.service-reminder-channel.unavailable {
  border-left-color: #b56a00;
}

.service-reminder-channel.unavailable > .app-icon {
  color: #b56a00;
}

.service-reminder-no-results {
  margin: 0;
  padding: 20px 12px;
  color: var(--muted);
  text-align: center;
}

.service-reminder-unreachable {
  border-top: 1px solid var(--line);
}

.service-reminder-unreachable > summary {
  padding-top: 10px;
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.service-reminder-unreachable > div {
  display: grid;
  margin-top: 8px;
  border: 1px solid var(--line);
}

.service-reminder-unreachable article {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr);
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-subtle, #f6f7f9);
}

.service-reminder-unreachable article:last-child {
  border-bottom: 0;
}

.service-reminder-unreachable article > span {
  display: grid;
  gap: 2px;
}

.service-reminder-unreachable article small,
.service-reminder-unreachable article p {
  color: var(--muted);
}

.service-reminder-unreachable article p {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .service-reminder-recipient-head {
    display: grid;
    justify-items: start;
  }

  .service-reminder-recipient {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .service-reminder-recipient-channels {
    grid-column: 2;
  }

  .service-reminder-unreachable article {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .item-modal.service-reminder-modal .service-reminder-audience .segmented > button {
    min-height: 66px;
  }

  .service-reminder-recipient-channels {
    grid-template-columns: 1fr;
  }
}