.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: #184c3a;
  font-weight: 800;
  box-shadow: 0 4px 20px #0003;
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid #2f6f9f;
  outline-offset: 3px;
}
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] summary:focus-visible {
  outline-color: #9cc9e6;
}
/* Long unbroken words (an e-mail subject, a report title) must not push the page wider than the screen. */
h1, .eyebrow { overflow-wrap: anywhere; }
button:disabled { cursor: not-allowed; opacity: .55; }
.dashboard-notice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid #cddce4;
  border-radius: 12px;
  background: #f2f7fa;
  color: #2f4f60;
}
.dashboard-notice-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #416783;
  color: #fff;
  font-weight: 900;
}
.dashboard-notice b { display: block; }
.dashboard-notice p { margin: 3px 0 0; color: #5d707a; font-size: 13px; }
.dashboard-notice a { color: #345b70; font-size: 12px; font-weight: 800; text-decoration: none; }
.review-visibility-note {
  margin: -12px 0 20px;
  padding: 11px 14px;
  border-left: 3px solid #6b91a8;
  border-radius: 0 9px 9px 0;
  background: #f1f6f8;
  color: #526c79;
  font-size: 12px;
}
.report-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  margin: 22px 0 8px;
  padding: 13px;
  border: 1px solid #dce3e0;
  border-radius: 12px;
  background: #fff;
}
.report-search input { margin: 0; }
.report-search button { background: #416783; }
.report-search a { padding: 8px; color: #526b79; font-size: 12px; font-weight: 800; text-decoration: none; }
.search-result-note { margin: 8px 2px 18px; color: #65766e; font-size: 12px; }
.readonly-field {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  margin: 13px 0;
  padding: 11px 12px;
  border: 1px solid #d8dfdb;
  border-radius: 8px;
  background: #f4f6f4;
}
.readonly-field span { color: #65746d; font-size: 12px; font-weight: 700; }
.readonly-field strong { margin-top: 4px; color: #24342d; }
.readonly-field small { margin-top: 3px; color: #75817b; font-size: 11px; }
@media (max-width: 760px) {
  .dashboard-notice { grid-template-columns: auto 1fr; }
  .dashboard-notice a { grid-column: 2; }
  .report-search { grid-template-columns: 1fr; }
  .report-search button, .report-search a { text-align: center; }
  .reports-table { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .reports-table table, .reports-table tbody, .reports-table tr, .reports-table td { display: block; width: 100%; }
  .reports-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .reports-table tbody { display: grid; gap: 10px; }
  .reports-table tr { overflow: hidden; border: 1px solid #e0e5e2; border-radius: 12px; background: #fff; box-shadow: 0 4px 16px #25372f0a; }
  .reports-table td { display: grid; grid-template-columns: minmax(90px, 34%) 1fr; gap: 10px; padding: 10px 13px; border-bottom: 1px solid #edf0ee; }
  .reports-table td::before { content: attr(data-label); color: #728079; font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .reports-table td:first-child { padding-top: 14px; }
  .reports-table td:last-child { border-bottom: 0; }
  .reports-table .report-row-actions { display: block; }
  .reports-table .report-row-actions::before, .reports-table .empty::before { display: none; }
  .reports-table .table-actions { justify-content: flex-end; white-space: normal; }
  .reports-table .empty { display: block; text-align: center; }
  .stale-report td { background: #fff7f7; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

.credentials { position: relative; overflow: hidden; }
.credentials::after { content: ""; position: absolute; right: -30px; bottom: -48px; width: 150px; height: 150px; border-radius: 50%; background: #ffffff0b; }
.credentials-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.credentials-head h2 { margin: 2px 0 8px; }
.credentials-head .badge { background: #e8f2ec; color: #245e45; }
.credentials dl { margin: 5px 0 14px; }
.credentials dl div { display: flex; gap: 10px; }
.credentials dt { color: #bcd0c7; font-size: 11px; font-weight: 750; }
.credentials dd { margin: 0; font-size: 12px; font-weight: 750; }
.temporary-password-row { display: flex; align-items: stretch; gap: 8px; margin: 12px 0; }
.temporary-password-row code { display: flex; min-width: 0; flex: 1; align-items: center; margin: 0; overflow-x: auto; }
.temporary-password-row button { flex: 0 0 auto; background: #fff; color: #173f32; }
.credentials-login-note { margin: 10px 0 0; color: #d1dfd9; font-size: 12px; }
.account-creation-note, .password-policy { padding: 11px 13px; border: 1px solid #d7e1e5; border-radius: 9px; background: #f2f7f9; color: #506873; font-size: 12px; line-height: 1.45; }
.users-table .row-actions { justify-content: flex-end; }
.users-table .row-actions form { margin: 0; }
.users-table .row-actions button { white-space: nowrap; }
@media (max-width: 820px) {
  .temporary-password-row { align-items: stretch; flex-direction: column; }
  .temporary-password-row button { width: 100%; }
  .users-table { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  .users-table table, .users-table tbody, .users-table tr, .users-table td { display: block; width: 100%; }
  .users-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .users-table tbody { display: grid; gap: 11px; }
  .users-table tr { overflow: hidden; border: 1px solid #e0e5e2; border-radius: 12px; background: #fff; }
  .users-table td { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 9px; padding: 10px 13px; border-bottom: 1px solid #edf0ee; }
  .users-table td::before { content: attr(data-label); color: #728079; font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .users-table .user-actions, .users-table .report-row-actions { display: block; border-bottom: 0; }
  .users-table .user-actions::before, .users-table .report-row-actions::before { display: none; }
  .users-table .row-actions { align-items: stretch; flex-direction: column; }
  .users-table .row-actions button { width: 100%; }
}
/* The home-airport landing time belongs to the complete return journey. */
#new-report .arrival-time-field{grid-column:1/-1}
.time-picker-fieldset {
  min-width: 0;
  margin: 13px 0;
  padding: 0;
  border: 0;
}
.time-picker-fieldset legend {
  margin-bottom: 7px;
  padding: 0;
  color: var(--ink);
  font-weight: 650;
}
.time-picker {
  display: grid;
  grid-template-columns: 44px minmax(92px, 1fr) 14px minmax(92px, 1fr);
  align-items: end;
  gap: 8px;
  max-width: 390px;
}
.time-picker-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  align-self: end;
  border-radius: 10px;
  background: #e8f0f4;
  color: #416783;
  font-size: 25px;
  font-weight: 800;
}
.time-picker label {
  min-width: 0;
  margin: 0;
}
.time-picker label > span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.time-picker select {
  height: 44px;
  margin: 0;
  padding: 7px 34px 7px 12px;
  border-color: #bfcac4;
  background-color: #fff;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}
.time-picker-separator {
  height: 44px;
  color: #416783;
  font-size: 25px;
  font-weight: 900;
  line-height: 42px;
  text-align: center;
}
.time-picker-fieldset > small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.arrival-time-required .time-picker-fieldset {
  flex: 1;
  margin: 0;
}
@media (max-width: 520px) {
  .time-picker { grid-template-columns: 38px minmax(76px, 1fr) 10px minmax(76px, 1fr); gap: 6px; }
  .time-picker-icon { width: 38px; }
}

.case-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  align-items: start;
  gap: 16px;
}
.case-create-card { padding: 22px; }
.case-card-heading, .case-list-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.case-card-heading h2, .case-list-heading h2 { margin-bottom: 0; }
.case-file-mark {
  border-radius: 7px;
  background: #e8f2ec;
  color: #2d684d;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.case-create-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
.case-create-form .actions { grid-column: 1 / -1; }
.case-backup-note {
  display: flex;
  gap: 12px;
  padding: 18px;
  border: 1px solid #d7e1e5;
  border-radius: 14px;
  background: #f2f7f9;
  color: #506873;
  font-size: 12px;
  line-height: 1.55;
}
.case-backup-note span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border-radius: 50%;
  background: #416783;
  color: #fff;
  font-weight: 900;
}
.case-backup-note p { margin: 2px 0 0; }
.case-search { margin-top: 24px; }
.case-list { margin-top: 24px; }
.case-list-heading { align-items: center; margin-bottom: 12px; }
.case-count {
  display: grid;
  min-width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: #e8ecea;
  color: #3d554c;
  font-size: 12px;
  font-weight: 850;
}
.case-cards { display: grid; gap: 8px; }
.case-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border: 1px solid #e0e5e2;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 13px #25372f08;
}
.case-entry-main {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.case-entry-main code {
  overflow-wrap: anywhere;
  color: #234c3d;
  font-size: 13px;
  font-weight: 850;
}
.case-entry-main strong { overflow-wrap: anywhere; }
.case-entry form { margin: 0; }
.case-remove-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: #8a4545;
  padding: 7px 9px;
  font-size: 11px;
}
.case-remove-button:hover { border-color: #efd1d1; background: #fff7f7; }
.case-remove-button span { font-size: 17px; line-height: 1; }
@media (max-width: 760px) {
  .case-management-grid, .case-create-form { grid-template-columns: 1fr; }
  .case-create-form .actions { grid-column: auto; }
  .case-create-form .actions button { width: 100%; }
  .case-entry { align-items: stretch; flex-direction: column; gap: 10px; }
  .case-entry-main { grid-template-columns: 1fr; gap: 2px; }
  .case-remove-button { width: 100%; justify-content: center; }
}

.receipt-picker {
  margin: 15px 0 10px;
  padding: 0;
  border: 0;
}
.receipt-picker legend {
  margin-bottom: 7px;
  font-weight: 700;
}
.receipt-source-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.receipt-source {
  position: relative;
  display: grid;
  min-height: 102px;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid #ccd9d2;
  border-radius: 11px;
  background: #f8faf9;
  cursor: pointer;
}
.receipt-source:hover { border-color: #7ca08f; background: #f2f7f4; }
.receipt-source:focus-within { outline: 3px solid #6b9bc766; outline-offset: 2px; }
.receipt-camera { border-color: #9ebeb0; background: #edf6f1; }
.receipt-source-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #184c3a;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}
.receipt-file .receipt-source-icon { background: #416783; }
.receipt-source b { display: block; color: #203b31; font-size: 13px; }
.receipt-source small { display: block; margin-top: 3px; color: #65766e; font-size: 10px; font-weight: 500; line-height: 1.35; }
.receipt-source input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.receipt-limit { display: block; margin-top: 7px; color: #58645f; font-size: 11px; }

@media (max-width: 600px) {
  .receipt-source-grid { grid-template-columns: 1fr; }
  .receipt-source { min-height: 84px; }
}

.approved-items-panel {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #cfe0d7;
  border-radius: 13px;
  background: #f6faf8;
}
.approved-items-panel>summary {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
}
.approved-items-panel>summary::-webkit-details-marker { display: none; }
.approved-items-panel>summary:hover { background: #edf6f1; }
.approved-items-panel>summary>span { display: flex; align-items: center; gap: 12px; }
.approved-items-panel>summary b { display: block; color: #245e45; }
.approved-items-panel>summary small { display: block; margin-top: 2px; color: #66776f; font-size: 11px; }
.approved-items-panel>summary>i {
  width: 9px;
  height: 9px;
  border-right: 2px solid #397257;
  border-bottom: 2px solid #397257;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.approved-items-panel[open]>summary>i { transform: rotate(225deg); }
.approved-items-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 10px;
  background: #dcefe4;
  color: #176139;
  font-size: 18px;
  font-weight: 900;
}
.approved-items-content { padding: 0 10px 10px; border-top: 1px solid #dce9e2; }
.approved-items-content .expense { margin-top: 10px; margin-bottom: 0; box-shadow: none; }

.easter-egg-trigger {
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  cursor: default;
}
.easter-egg-toast[hidden] { display: none; }
.easter-egg-toast {
  position: fixed;
  z-index: 20;
  right: 22px;
  bottom: 22px;
  width: min(390px, calc(100vw - 30px));
  border: 1px solid #c9d9d1;
  border-radius: 16px;
  background: #fff;
  color: #24342d;
  padding: 22px;
  text-align: left;
  box-shadow: 0 18px 55px #1a302755;
}
.easter-egg-toast h2 { margin: 4px 34px 7px 0; font-family: Georgia, serif; }
.easter-egg-toast p { margin: 7px 0; line-height: 1.5; }
.easter-egg-toast a { color: #184c3a; font-weight: 850; overflow-wrap: anywhere; }
.easter-egg-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #e8f0ec;
  color: #184c3a;
  font-size: 17px;
}
.easter-egg-close {
  position: absolute;
  top: 11px;
  right: 11px;
  border: 0;
  background: transparent;
  color: #65746d;
  padding: 5px 9px;
  font-size: 22px;
}
.easter-egg-plane {
  position: fixed;
  z-index: 19;
  left: -35px;
  bottom: 80px;
  color: #416783;
  font-size: 18px;
  pointer-events: none;
  animation: easter-egg-flight 1.8s ease-in-out forwards;
}
@keyframes easter-egg-flight {
  0% { transform: translate(0, 18px) rotate(-8deg); opacity: 0; }
  15% { opacity: .9; }
  80% { opacity: .9; }
  100% { transform: translate(calc(100vw + 70px), -70px) rotate(-18deg); opacity: 0; }
}
@media (max-width: 520px) {
  .easter-egg-toast { right: 15px; bottom: 15px; }
}

#departure-board-trigger {
  position: relative;
  -webkit-touch-callout: none;
  user-select: none;
}
#departure-board-trigger .app-logo {
  transition: filter .18s ease, transform .18s ease;
}
#departure-board-trigger.departure-holding .app-logo {
  animation: departure-logo-charge 3s linear forwards;
}
@keyframes departure-logo-charge {
  0%, 45% { filter: none; transform: scale(1); }
  70% { filter: drop-shadow(0 0 4px #41678366); transform: scale(1.025); }
  100% { filter: drop-shadow(0 0 10px #416783aa); transform: scale(1.055); }
}
body.departure-board-open { overflow: hidden; }
.departure-board[hidden] { display: none; }
/* The global `label{display:block}` rule otherwise defeats these toggleable fields' [hidden] attribute. */
.loyalty-program-other[hidden],.employee-name-other[hidden] { display: none; }
/* The global `input{display:block}` rule otherwise defeats this hidden file input's [hidden] attribute. */
#receipt-camera[hidden] { display: none; }
.departure-board {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  background: #030504e8;
  backdrop-filter: blur(9px);
  opacity: 0;
  transition: opacity .18s ease;
}
.departure-board.is-visible { opacity: 1; }
.departure-board-panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: calc(100vh - 28px);
  overflow: auto;
  border: 2px solid #4c534f;
  border-radius: 12px;
  background: linear-gradient(145deg, #242824, #101310 72%);
  color: #fff;
  padding: 27px 28px 25px;
  box-shadow: 0 32px 100px #000d, inset 0 1px #ffffff18, inset 0 -1px #000;
  transform: translateY(12px) scale(.985);
  transition: transform .2s ease;
}
.departure-board-panel::before,
.departure-board-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 10px;
  width: 7px;
  height: 7px;
  border: 1px solid #070907;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a7ada8, #343a36 58%, #0a0c0a 61%);
  box-shadow: 0 0 0 1px #ffffff0b;
}
.departure-board-panel::before { left: 10px; }
.departure-board-panel::after { right: 10px; }
.departure-board.is-visible .departure-board-panel { transform: translateY(0) scale(1); }
.departure-board-eyebrow {
  margin: 0 44px 5px 0;
  color: #949d97;
  font: 750 9px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.departure-board-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 44px 19px 0;
  color: #e8ede9;
  font: 900 30px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.departure-board-panel h2::before {
  content: "✈";
  color: #e1c76f;
  font-size: 24px;
  line-height: 1;
}
.departure-board-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #4a514d;
  border-radius: 7px;
  background: #161a17;
  color: #dce7e2;
  padding: 0;
  font-size: 23px;
}
.departure-board-close:hover { background: #292e2a; }
.departure-board-display {
  overflow: hidden;
  padding: 12px;
  border: 1px solid #3f4541;
  border-radius: 7px;
  background: #050705;
  box-shadow: inset 0 3px 20px #000, 0 1px #ffffff0b;
}
.departure-board-row {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 78px;
  padding: 6px 0;
  border-bottom: 1px solid #222622;
}
.departure-board-row:last-child { border-bottom: 0; }
.departure-board-row > span {
  display: grid;
  align-self: stretch;
  place-items: center start;
  padding: 0 10px;
  border: 1px solid #252925;
  border-radius: 4px;
  background: linear-gradient(#151815, #0b0d0b);
  color: #aeb8b1;
  font: 850 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.departure-board-row strong {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  padding: 8px 12px;
  border: 1px solid #2c302c;
  border-radius: 4px;
  background: #060806;
  box-shadow: inset 0 1px #ffffff0b, inset 0 -1px #000, 0 1px 2px #000;
  color: #ffe36a;
  font: 950 27px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
}
.departure-board-row .departure-board-ready { color: #8ff3b8; }
.split-flap-space {
  flex: 0 0 11px;
  width: 11px;
  height: 52px;
}
.split-flap-card {
  --flap-height: 52px;
  --flap-width: 36px;
  position: relative;
  flex: 0 0 var(--flap-width);
  width: var(--flap-width);
  height: var(--flap-height);
  color: inherit;
  border-radius: 4px;
  perspective: 220px;
  filter: drop-shadow(0 3px 2px #000c);
  transform-style: preserve-3d;
}
.split-flap-card::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 1px;
  right: 1px;
  height: 1px;
  background: #03040399;
  box-shadow: 0 1px #ffffff0d;
  pointer-events: none;
}
.split-flap-half {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 50%;
  overflow: hidden;
  border: 1px solid #59605a;
  background: linear-gradient(100deg, #202420, #353b35 48%, #1d211d);
  color: inherit;
  backface-visibility: hidden;
}
.split-flap-half::before {
  content: attr(data-char);
  position: absolute;
  left: 0;
  display: grid;
  width: 100%;
  height: var(--flap-height);
  place-items: center;
  color: inherit;
  font: 950 27px/var(--flap-height) ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: -.035em;
  text-align: center;
  text-shadow: 0 1px 1px #000, 0 0 4px currentColor;
}
.split-flap-top,
.split-flap-old {
  top: 0;
  border-bottom: 0;
  border-radius: 3px 3px 1px 1px;
  box-shadow: inset 0 -1px #000;
}
.split-flap-bottom,
.split-flap-new {
  bottom: 0;
  border-top: 0;
  border-radius: 1px 1px 3px 3px;
  box-shadow: inset 0 1px #000;
}
.split-flap-top::before,
.split-flap-old::before { top: 0; }
.split-flap-bottom::before,
.split-flap-new::before { bottom: 0; }
.split-flap-old {
  z-index: 3;
  transform-origin: center bottom;
  will-change: transform, filter;
}
.split-flap-new {
  z-index: 4;
  transform: rotateX(90deg);
  transform-origin: center top;
  will-change: transform, filter;
}
.split-flap-card.is-flipping {
  animation: split-flap-rattle .225s linear both;
}
.split-flap-card.is-flipping .split-flap-old {
  animation: split-flap-old .115s cubic-bezier(.55,.06,.68,.19) both;
}
.split-flap-card.is-flipping .split-flap-new {
  animation: split-flap-new .135s cubic-bezier(.22,.61,.36,1) .095s both;
}
@keyframes split-flap-old {
  0% { transform: rotateX(0); filter: brightness(1.35); }
  100% { transform: rotateX(-92deg); filter: brightness(.55); }
}
@keyframes split-flap-new {
  0% { transform: rotateX(92deg); filter: brightness(.55); }
  72% { transform: rotateX(-7deg); filter: brightness(1.28); }
  100% { transform: rotateX(0); filter: none; }
}
@keyframes split-flap-rattle {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(1px); }
  70% { transform: translateY(-.5px); }
}
.departure-board-hint {
  margin: 16px 0 0;
  padding: 11px 13px;
  border: 1px dashed #68756e;
  border-radius: 5px;
  background: #0b0f0c;
  color: #b9c4bd;
  font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.5;
}
.departure-board-plane {
  position: absolute;
  top: 74px;
  left: -42px;
  color: #d5e7df;
  font-size: 20px;
  opacity: 0;
  pointer-events: none;
}
.departure-board.is-visible .departure-board-plane {
  animation: departure-board-flight 2.15s .45s ease-in-out both;
}
@keyframes departure-board-flight {
  0% { opacity: 0; transform: translate(0, 20px) rotate(-8deg); }
  18%, 76% { opacity: .82; }
  100% { opacity: 0; transform: translate(770px, -38px) rotate(-17deg); }
}
@media (max-width: 600px) {
  .departure-board { padding: 14px; }
  .departure-board-panel { padding: 23px 13px 14px; border-radius: 9px; }
  .departure-board-panel h2 { margin-bottom: 13px; font-size: 22px; }
  .departure-board-display { padding: 6px; }
  .departure-board-row { grid-template-columns: 72px minmax(0, 1fr); gap: 6px; min-height: 57px; padding: 4px 0; }
  .departure-board-row > span { padding: 0 7px; font-size: 8px; letter-spacing: .09em; }
  .departure-board-row strong {
    gap: 2px;
    min-height: 47px;
    padding: 5px;
  }
  .split-flap-card { --flap-height: 42px; --flap-width: 27px; }
  .split-flap-half::before { font-size: 20px; }
  .split-flap-space { flex-basis: 7px; width: 7px; height: 42px; }
  .departure-board-hint { margin-top: 11px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .split-flap-old,
  .split-flap-new { display: none; }
  .split-flap-card { animation: none !important; }
}

/* Receipt names must never be able to widen or cover an expense card. */
.expense { grid-template-columns: 42px minmax(0, 1fr) auto auto; }
.expense-main { min-width: 0; overflow: hidden; }
/* QA-Runde 15 (Fund 606): Kommentar und Prüfer-Hinweis sind nur hier vollständig zu lesen - eine lange URL/Buchungsnummer bricht um statt abgeschnitten zu werden. */
.expense-main p, .expense-main .reject-note { overflow-wrap: anywhere; }
.expense-main > div { min-width: 0; }
.expense-main > div > span,
.expense-main > div > b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Same bug pattern as .expense-main span (fixed 2ff1e02) and .receipt-pagenav
   (fixed this round): .reject-note is also a direct <div> child of
   .expense-main, so its own <b> label ("Hinweis der Prüfung:") was caught by
   the rule above too and forced onto its own truncated line on narrow
   viewports, instead of staying inline with the review comment that follows
   it. This restores plain inline bold text for that one label. */
.expense-main > div.reject-note > b {
  display: inline;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.receipt-selection {
  display: block;
  min-height: 19px;
  margin-top: 8px;
  overflow: hidden;
  color: #315b49;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-source[type="button"], button.receipt-source {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
}
.camera-dialog { width: min(760px, calc(100% - 24px)); }
.camera-panel { padding: 22px; }
.camera-preview {
  display: grid;
  min-height: 280px;
  margin-top: 14px;
  overflow: hidden;
  place-items: center;
  border-radius: 12px;
  background: #0a0f0c;
}
.camera-preview video { display: block; width: 100%; max-height: 64vh; object-fit: contain; }
.camera-status { min-height: 22px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.camera-status.error { color: #9b3d3d; }
@media (max-width: 760px) {
  .expense { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .camera-panel { padding: 16px; }
  .camera-preview { min-height: 220px; }
}

/* Global light/dark theme control. */
.header-toggle {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #cbd7d1;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  color: #355347;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.header-toggle:hover { background: #f0f5f2; }
.theme-toggle-icon { font-size: 16px; line-height: 1; }
.login-tools { align-items: center; gap: 12px; }

/* Betreiberauftrag 01.10.2026: Kompaktmodus - blendet erklärende Fließtexte (nicht Formularfelder, Warnungen oder Bestätigungsdialoge) für erfahrene Nutzer aus. */
html[data-compact="1"] .explain { display: none; }
/* Entscheidung Betreiber 06.10.2026: Hinweis unter einem aus der Anfrage-PDF vorausgefüllten Feld - dezent, aber nicht .explain (bleibt im Kompaktmodus sichtbar). */
.prefill-hint { display: block; margin-top: 4px; font-size: 12px; font-style: italic; }
.prefill-hint[hidden] { display: none; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e5ede8;
  --green: #79bd9b;
  --mint: #263b32;
  --cream: #101713;
  --line: #324139;
  --muted: #a0ada7;
  --red: #ee9999;
  --white: #18211d;
}
html[data-theme="dark"] body { background: #101713; color: #e5ede8; }
html[data-theme="dark"] header {
  background: #151e1af2;
  border-color: #2d3a34;
  box-shadow: 0 3px 18px #0007;
}
html[data-theme="dark"] .logo,
html[data-theme="dark"] .header-nav > a,
html[data-theme="dark"] .link,
html[data-theme="dark"] .arrow,
html[data-theme="dark"] .back { color: #91cfb0; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .expense,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .case-entry,
html[data-theme="dark"] .approved-group > summary,
html[data-theme="dark"] .approved-items-panel,
html[data-theme="dark"] .statistics-panel,
html[data-theme="dark"] .statistics-card {
  border-color: #304038;
  background: #18211d;
  box-shadow: 0 6px 24px #0004;
  color: #e5ede8;
}
html[data-theme="dark"] dialog .actions {
  background: #18211d;
  border-top-color: #304038;
}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: #425149;
  background: #111914;
  color: #e5ede8;
}
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] .readonly-field { background: #202c26; color: #b6c2bc; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7f8e87; }
html[data-theme="dark"] th,
html[data-theme="dark"] td { border-color: #3c4d45; }
/* Rückmeldung vom Live-Server: Zeilen in Tabellen (z. B. Auftragswarteliste) waren im Dunkelmodus kaum
   voneinander getrennt - die Trennlinie (#2b3832 auf #18211d Kartenhintergrund) war zu kontrastarm, dazu
   sorgt eine dezente wechselnde Zeilenfarbe für zusätzliche Orientierung bei vielen Zeilen untereinander. */
html[data-theme="dark"] tbody tr:nth-child(even):not(.stale-report) td { background: #1c2622; }
html[data-theme="dark"] tbody tr:nth-child(even):not(.stale-report):hover td { background: #1d2923; }
html[data-theme="dark"] th,
html[data-theme="dark"] td small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] dt,
html[data-theme="dark"] .history span { color: #9eaba5; }
html[data-theme="dark"] tbody tr:hover td { background: #1d2923; }
html[data-theme="dark"] .secondary { background: #28352f; color: #e1eae5; }
html[data-theme="dark"] .secondary:hover { background: #324139; }
html[data-theme="dark"] .danger,
html[data-theme="dark"] .delete-control,
html[data-theme="dark"] .table-delete { border-color: #714949; background: #251b1b; color: #f1a5a5; }
html[data-theme="dark"] .approve { background: #244334; color: #9be0bb; }
html[data-theme="dark"] .alert { border-color: #3b6551; background: #1c382b; color: #cce5d7; }
html[data-theme="dark"] .alert.error,
html[data-theme="dark"] .reject-note { border-color: #704747; background: #351f1f; color: #f0b2b2; }
/* QA-Runde 15 (Fund 607): Kamera-Fehler und markierte Felder im Bearbeiten-Dialog hatten nur helle Farben (rund 2:1 im dunklen Dialog). */
html[data-theme="dark"] .camera-status.error { color: #f0b2b2; }
html[data-theme="dark"] #expense-edit-form label.field-flagged,
html[data-theme="dark"] #expense-edit-form .edit-expense-receipt.field-flagged { border-color: #704747; background: #351f1f; color: #f0b2b2; }
html[data-theme="dark"] .badge { background: #303a35; color: #cfd8d3; }
html[data-theme="dark"] .badge.submitted,
html[data-theme="dark"] .badge.resubmitted { background: #463b1d; color: #f2d47c; }
html[data-theme="dark"] .badge.approved { background: #224535; color: #9de0bd; }
html[data-theme="dark"] .badge.correction_required { background: #4a2929; color: #f2acac; }
html[data-theme="dark"] .badge.unread { background: #233842; color: #acd5e8; }
html[data-theme="dark"] .expense-icon { background: #263b44; color: #92c4dd; }
html[data-theme="dark"] .receipt-link,
html[data-theme="dark"] .viewer-download { border-color: #416555; background: #20352b; color: #9ed5b9; }
html[data-theme="dark"] .submitbar { background: #22312a; }
html[data-theme="dark"] .total-card { background: #203d31 !important; }
html[data-theme="dark"] .site-footer { background: #121a16; color: #8f9d96; }
html[data-theme="dark"] .language-switch { background: #222d27 !important; }
html[data-theme="dark"] .language-switch button { color: #aab7b0; }
html[data-theme="dark"] .language-switch button.active { background: #365c4b; color: #fff; }
html[data-theme="dark"] .header-toggle { border-color: #405048; background: #1b2721; color: #c4d2cb; }
html[data-theme="dark"] .header-toggle:hover { background: #26362e; }
html[data-theme="dark"] .login { background: radial-gradient(circle at top, #20382c, #0f1612 58%); }
html[data-theme="dark"] .login-card { background: #18211d; }
html[data-theme="dark"] .dashboard-notice,
html[data-theme="dark"] .review-visibility-note,
html[data-theme="dark"] .case-backup-note,
html[data-theme="dark"] .account-creation-note,
html[data-theme="dark"] .password-policy { border-color: #35463e; background: #1b2923; color: #b4c5bc; }
html[data-theme="dark"] .country-required,
html[data-theme="dark"] .meal-hint { background: #17211c; }
html[data-theme="dark"] .meal-summary:hover,
html[data-theme="dark"] .statistics-panel > summary:hover { background: #1e2b25; }
html[data-theme="dark"] .meal-content,
html[data-theme="dark"] .approved-items-content,
html[data-theme="dark"] .statistics-content,
html[data-theme="dark"] .archive-content { border-color: #304038; background: #141d18; }
html[data-theme="dark"] .meal-row,
html[data-theme="dark"] .meal-conditions,
html[data-theme="dark"] .category-bar i { border-color: #34443c; background: #202d27; }
html[data-theme="dark"] .receipt-source { border-color: #3b5046; background: #18241e; }
html[data-theme="dark"] .receipt-source:hover { border-color: #5c8d75; background: #203128; }
html[data-theme="dark"] .receipt-camera { background: #1d3027; }
html[data-theme="dark"] .receipt-source b { color: #dfe9e3; }
html[data-theme="dark"] .receipt-source small,
html[data-theme="dark"] .receipt-limit { color: #9fada6; }
html[data-theme="dark"] .receipt-selection { color: #9fd1b8; }
html[data-theme="dark"] .receipt-validation { background: #3b2323; color: #efaaaa; }
html[data-theme="dark"] .withdraw-submission { border-color: #35473e; background: #18231e; }
html[data-theme="dark"] .withdraw-submission-icon { background: #23382e; color: #9fd1b8; }
html[data-theme="dark"] .withdraw-submission p { color: #a5b3ac; }
html[data-theme="dark"] .receipt-toolbar { border-color: #304038; background: #17211c; color: #e5ede8; }
html[data-theme="dark"] .receipt-frame,
html[data-theme="dark"] .pdf-fallback { background: #0b100d; color: #b8c4be; }
html[data-theme="dark"] .receipt-zoom button { background: #28352f; color: #e5ede8; }
html[data-theme="dark"] .receipt-stage { background: #17211c; }
/* QA-Runde 15 (Fund 596): ein Beleg-Bild mit transparentem Hintergrund liegt wie im Abschluss-PDF auf Weiß (sonst dunkle Schrift auf dunkler Bühne) */
.receipt-image { background: #fff; }
html[data-theme="dark"] .stale-report td { background: #3a2222; }
html[data-theme="dark"] .stale-report:hover td { background: #472828; }
html[data-theme="dark"] .time-picker-icon { background: #263a43; color: #9ec9df; }
html[data-theme="dark"] .time-picker select { border-color: #425149; background-color: #111914; color: #e5ede8; }
html[data-theme="dark"] .case-file-mark,
html[data-theme="dark"] .case-count { background: #27362f; color: #acd4bf; }
html[data-theme="dark"] .case-entry-main code { color: #a4d7bd; }
html[data-theme="dark"] .statistics-card-head span,
html[data-theme="dark"] .statistics-empty { color: #9fada6; }

/* Entscheidung Betreiber 05.10.2026 (Variante B): am Handy war der Hell/Dunkel-Schalter hier nur ein Symbol (Platz in der Schalterreihe) - im
   Einstellungsmenü steht er jetzt in einer eigenen Zeile und zeigt wie am Desktop auch die Beschriftung (siehe .settings-menu am Dateiende). */
@media (max-width: 760px) {
  html[data-theme="dark"] .users-table { background: transparent; box-shadow: none; }
  html[data-theme="dark"] .users-table tr { border-color: #304038; background: #18211d; }
  html[data-theme="dark"] .users-table td { border-color: #2b3832; }
}
.history .history-timezone{margin:-8px 0 16px;color:var(--muted);font-size:11px}

/* Multiple participants per case */
.participant-login h2 { margin: 8px 0; }
.participant-login-list { display: grid; gap: 10px; margin: 22px 0 14px; }
.participant-login-list form { margin: 0; }
.participant-login-choice { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; text-align: left; border: 1px solid #c7d5ce; border-radius: 12px; background: #fff; color: var(--ink); box-shadow: none; }
.participant-login-choice:hover { border-color: var(--green); background: #f2f7f4; transform: translateY(-1px); }
.participant-login-choice span:first-child { display: grid; gap: 3px; }
.participant-login-choice strong { font-size: 16px; }
.participant-login-choice small { color: var(--muted); font-weight: 700; }
.participant-login-choice > span:last-child { color: var(--green); font-size: 22px; }
/* Runde 10 (Fund u01-04): eine noch waehrend der Gnadenfrist waehlbare, aber bereits entfernte Person bleibt
   erreichbar (ihre eigene Sitzung soll weiterlaufen) - wird aber sichtbar abgesetzt, damit eine neu angelegte
   Person mit demselben Fall nicht aus Versehen fremde, entfernte Unterlagen oeffnet. */
.participant-login-choice.removed { background: #f7f5f0; border-style: dashed; }
.participant-login-choice.removed strong { color: var(--muted); }
.participant-login-notice { padding: 10px 12px; border-radius: 9px; background: #edf4f7; color: #36596b; font-size: 13px; }
.participant-login-cancel button { width: 100%; }

.case-group-entry { display: block; padding: 0; overflow: hidden; }
.case-group-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid #e2e8e4; background: #f8faf8; }
.case-group-heading .case-entry-main { display: grid; gap: 5px; }
.case-group-heading .case-entry-main strong { color: var(--muted); font-size: 13px; }
.case-participant-list { padding: 4px 20px; }
.case-participant-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #edf0ee; }
.case-participant-row:last-child { border-bottom: 0; }
.case-person-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #e6eff2; color: #35607a; font-weight: 900; }
.case-person-data { min-width: 0; display: grid; gap: 2px; }
.case-person-data strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-person-data small { color: var(--muted); font-weight: 700; }
.participant-remove-button { border: 1px solid #e3c7c7; background: #fffafa; color: #9b4949; padding: 7px 10px; box-shadow: none; font-size: 12px; }
.case-add-participant { border-top: 1px solid #e2e8e4; background: #fbfcfb; }
.case-add-participant summary { cursor: pointer; padding: 14px 20px; color: var(--green); font-weight: 850; list-style: none; }
.case-add-participant summary::-webkit-details-marker { display: none; }
.case-add-participant summary::before { content: '+'; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; border-radius: 7px; background: #e2efe8; }
.case-add-participant[open] summary::before { content: '−'; }
.case-add-participant form { display: grid; grid-template-columns: minmax(180px,1.4fr) minmax(160px,1fr) auto; align-items: end; gap: 12px; padding: 0 20px 18px; }
.case-add-participant label { margin: 0; }

.report-owner-cell { display: grid; gap: 3px; }
.report-owner-cell small { color: #567067; font-size: 11px; font-weight: 800; }
.report-owner-banner { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 8px; margin: 10px 0 5px; padding: 9px 12px; border-left: 4px solid #477593; border-radius: 8px; background: #edf4f7; }
.report-owner-banner span { grid-column: 1/-1; color: #54717f; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.report-owner-banner strong { color: var(--ink); }
.report-owner-banner small { color: #55706a; font-weight: 800; }

html[data-theme="dark"] .participant-login-choice,
html[data-theme="dark"] .case-group-heading,
html[data-theme="dark"] .case-add-participant { border-color: #35463e; background: #1b2923; color: #e5ede8; }
html[data-theme="dark"] .participant-login-choice.removed { background: #17211c; }
html[data-theme="dark"] .participant-login-choice:hover { border-color: #5c8d75; background: #203128; }
html[data-theme="dark"] .participant-login-notice,
html[data-theme="dark"] .report-owner-banner { background: #1c3039; color: #b0cbd8; }
html[data-theme="dark"] .case-participant-row { border-color: #2d3b34; }
html[data-theme="dark"] .case-person-avatar { background: #233842; color: #acd5e8; }
html[data-theme="dark"] .participant-remove-button { border-color: #714949; background: #251b1b; color: #f1a5a5; }
html[data-theme="dark"] .case-add-participant summary::before { background: #274235; }

@media (max-width: 700px) {
  .case-group-heading { align-items: flex-start; }
  .case-group-heading .case-remove-button { font-size: 0; padding: 7px; }
  .case-group-heading .case-remove-button span { margin: 0; font-size: 18px; }
  .case-add-participant form { grid-template-columns: 1fr; }
  .case-participant-row { grid-template-columns: 38px minmax(0,1fr); }
  .case-participant-row form { grid-column: 2; }
  .participant-remove-button { width: 100%; }
}

/* Complete component audit for the dark theme. Keep this block last so that
   page-specific light-theme refinements cannot accidentally win the cascade. */
html[data-theme="dark"] .stats article {
  border: 1px solid #3b5549;
  background: #29483b;
  color: #f3f8f5;
  box-shadow: 0 7px 24px #0003;
}
html[data-theme="dark"] .stats article:nth-child(2) {
  border-color: #49616d;
  background: #334a55;
}
html[data-theme="dark"] .stats article:nth-child(3) {
  border-color: #3b4a43;
  background: #26342e;
  color: #f3f8f5;
}
html[data-theme="dark"] .stats span,
html[data-theme="dark"] .stats strong { color: inherit; }

html[data-theme="dark"] .dashboard-notice {
  border-color: #365044;
  background: #192820;
  color: #e4eee9;
}
html[data-theme="dark"] .dashboard-notice-icon { background: #416f88; }
html[data-theme="dark"] .dashboard-notice b { color: #edf5f1; }
html[data-theme="dark"] .dashboard-notice p { color: #afc0b8; }
html[data-theme="dark"] .dashboard-notice a { color: #9bcbb4; }
html[data-theme="dark"] .review-visibility-note {
  border-left-color: #5f8da5;
  background: #18272e;
  color: #b8ced9;
}

html[data-theme="dark"] .report-search {
  border-color: #34473d;
  background: #18211d;
  box-shadow: 0 6px 22px #0003;
}
html[data-theme="dark"] .report-search:focus-within {
  border-color: #638f79;
  box-shadow: 0 0 0 3px #638f7929, 0 6px 22px #0003;
}
html[data-theme="dark"] .report-search input {
  border-color: #3e5147;
  background: #111914;
  color: #edf4f0;
  box-shadow: inset 0 1px 2px #0005;
}
html[data-theme="dark"] .report-search input:focus-visible {
  border-color: #79aa92;
  outline: 2px solid #79aa9238;
  outline-offset: 1px;
}
html[data-theme="dark"] .report-search button { background: #47728b; color: #fff; }
html[data-theme="dark"] .report-search button:hover { background: #56839c; }
html[data-theme="dark"] .report-search a,
html[data-theme="dark"] .search-result-note { color: #a8bbb2; }

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: #edf4f0;
  box-shadow: 0 0 0 1000px #111914 inset;
  caret-color: #edf4f0;
}
html[data-theme="dark"] label small,
html[data-theme="dark"] .readonly-field span,
html[data-theme="dark"] .readonly-field small { color: #a1b0a8; }
html[data-theme="dark"] .readonly-field strong { color: #edf4f0; }

html[data-theme="dark"] .approved-group {
  border-color: #304038;
  background: #141d18;
  box-shadow: 0 7px 24px #0004;
}
html[data-theme="dark"] .approved-group > summary {
  border-color: #304038 !important;
  background: #18211d !important;
  color: #e5ede8;
}
html[data-theme="dark"] .approved-group > summary:hover { background: #1e2b25 !important; }
html[data-theme="dark"] .approved-group[open] > summary { border-bottom-color: #304038 !important; }
html[data-theme="dark"] .archive-summary-main small { color: #a5b3ac; }
html[data-theme="dark"] .archive-icon { background: #244233; color: #9fdbba; }
html[data-theme="dark"] .archive-count { background: #365c4b; color: #fff; }
html[data-theme="dark"] .archive-toggle { color: #9bcbb4; }

html[data-theme="dark"] .statistics-panel { border-color: #304038; background: #141d18; }
html[data-theme="dark"] .statistics-panel > summary {
  border-color: #304038;
  background: #18211d;
  color: #e5ede8;
}
html[data-theme="dark"] .statistics-panel > summary:hover { background: #1e2b25; }
html[data-theme="dark"] .statistics-panel[open] > summary { border-bottom-color: #304038; }
html[data-theme="dark"] .statistics-summary-main b { color: #edf4f0; }
html[data-theme="dark"] .statistics-summary-main small { color: #a5b3ac; }
html[data-theme="dark"] .statistics-icon { background: #263a43; color: #a9d2e5; }
html[data-theme="dark"] .statistics-toggle { color: #9bcbb4; }
html[data-theme="dark"] .metric-grid article {
  border-color: #34453d;
  background: #1b2721;
  color: #e5ede8;
}
html[data-theme="dark"] .metric-grid article > span { color: #a8b7af; }
html[data-theme="dark"] .metric-grid article > strong { color: #edf4f0; }
html[data-theme="dark"] .metric-grid article > strong small { color: #a8b7af; }
html[data-theme="dark"] .metric-grid .metric-warning { border-color: #744d4d; background: #342222; }
html[data-theme="dark"] .metric-grid .metric-warning strong { color: #f0aaaa; }
html[data-theme="dark"] .statistics-card-head h3,
html[data-theme="dark"] .category-bar > div strong,
html[data-theme="dark"] .currency-totals strong { color: #edf4f0; }
html[data-theme="dark"] .category-bar > div span,
html[data-theme="dark"] .currency-totals span { color: #a8b7af; }
html[data-theme="dark"] .category-bar > i { background: #26342e; }
html[data-theme="dark"] .currency-totals > div { background: #202d27; }

html[data-theme="dark"] .meal-summary {
  border-color: #304038;
  background: #18211d;
  color: #dfe9e3;
}
html[data-theme="dark"] .meal-hint[open] > .meal-summary { border-bottom-color: #304038; }
html[data-theme="dark"] .meal-summary-copy b { color: #edf4f0; }
html[data-theme="dark"] .meal-summary-copy small,
html[data-theme="dark"] .meal-content > p,
html[data-theme="dark"] .meal-conditions p { color: #a7b6ae; }
html[data-theme="dark"] .meal-private,
html[data-theme="dark"] .meal-toggle,
html[data-theme="dark"] .meal-conditions > summary,
html[data-theme="dark"] .meal-links a { color: #9fc9dc; }
html[data-theme="dark"] .meal-info-icon,
html[data-theme="dark"] .meal-year { background: #263a43; color: #a9d2e5; }
html[data-theme="dark"] .meal-table { border-color: #34443c; background: #18211d; }
html[data-theme="dark"] .meal-row { border-bottom-color: #304038; }
html[data-theme="dark"] .meal-labels { background: #202f35; color: #b7cbd4; }
html[data-theme="dark"] .meal-notice { background: #39331f; color: #ead99f !important; }
html[data-theme="dark"] .currency-conversion,
html[data-theme="dark"] .legacy-currency { border-color: #725f39; background: #382f1d; color: #ead49a; }

html[data-theme="dark"] .approved-items-panel { border-color: #365044; background: #17231d; }
html[data-theme="dark"] .approved-items-panel > summary:hover { background: #203128; }
html[data-theme="dark"] .approved-items-panel > summary b { color: #a4d8bd; }
html[data-theme="dark"] .approved-items-panel > summary small { color: #a5b3ac; }
html[data-theme="dark"] .approved-items-panel > summary > i { border-color: #8fc4a9; }
html[data-theme="dark"] .approved-items-icon { background: #244233; color: #9fdbba; }
html[data-theme="dark"] .approved-items-content { border-top-color: #30483c; }

html[data-theme="dark"] .case-backup-note p,
html[data-theme="dark"] .account-creation-note,
html[data-theme="dark"] .password-policy { color: #b6c6be; }
html[data-theme="dark"] .case-group-heading,
html[data-theme="dark"] .case-add-participant { border-color: #35463e; background: #1b2923; }
html[data-theme="dark"] .case-participant-row { border-color: #2d3b34; }
html[data-theme="dark"] .report-owner-cell small,
html[data-theme="dark"] .report-owner-banner span,
html[data-theme="dark"] .report-owner-banner small { color: #afc6ba; }

html[data-theme="dark"] .flat-rate-box { border-color: #3c4e45; background: #1b2923; }
html[data-theme="dark"] .flat-rate-box p,
html[data-theme="dark"] .no-receipt { color: #a6b5ad; }
html[data-theme="dark"] .easter-egg-toast {
  border-color: #3c5147;
  background: #1b2721;
  color: #e7efeb;
  box-shadow: 0 18px 55px #0008;
}
html[data-theme="dark"] .easter-egg-toast a { color: #9fd1b8; }
html[data-theme="dark"] .easter-egg-icon { background: #294438; color: #a6d9c0; }
html[data-theme="dark"] .easter-egg-close { color: #a9b7b0; }

@media (max-width: 820px) {
  html[data-theme="dark"] .reports-table { background: transparent; box-shadow: none; }
  html[data-theme="dark"] .reports-table tr { border-color: #304038; background: #18211d; }
  html[data-theme="dark"] .reports-table td { border-color: #2b3832; }
  html[data-theme="dark"] .reports-table td::before,
  html[data-theme="dark"] .users-table td::before { color: #98aaa1; }
}

.detail-grid { display: flex; flex-direction: column; gap: 14px; }
.detail-row { display: flex; gap: 12px; align-items: flex-start; }
.detail-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--mint);
  color: var(--green);
  display: grid;
  place-items: center;
}
.detail-icon svg { width: 16px; height: 16px; }
.expense-icon svg { width: 20px; height: 20px; }
.status-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 22px; }
.overview-card { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: inherit; padding: 22px; transition: box-shadow .15s; }
.overview-card:hover { box-shadow: 0 6px 22px #183c2c14; }
.overview-card-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--mint); color: var(--green); display: grid; place-items: center; margin-bottom: 16px; }
.overview-card-icon svg { width: 20px; height: 20px; }
.overview-card h3 { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.overview-card-count { font-family: Georgia, serif; font-size: 34px; color: var(--ink); line-height: 1; }
.overview-card-sub { margin-top: 6px; font-size: 12px; color: var(--muted); }
.detail-text { display: flex; flex-direction: column; min-width: 0; }
.detail-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.detail-value { margin-top: 2px; }
.detail-sub { color: var(--muted); font-size: 12px; margin-top: 1px; }
.field-flagged { background: #f8dede; color: #8b2c2c; border-radius: 5px; padding: 1px 6px; margin: -1px -6px; }
.expense-main span span { display: inline; }
strong.amount.field-flagged { padding: 2px 8px; margin: 0; }
a.receipt-link.field-flagged { background: #f8dede; border-color: #e8bcbc; color: #8b2c2c; }
.reject-fields { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; padding: 0; border: 0; }
.reject-fields legend { width: 100%; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.reject-fields label { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 500; font-size: 13px; }
.reject-fields input[type="checkbox"] { width: auto; margin: 0; }
#expense-edit-form label.field-flagged, #expense-edit-form .edit-expense-receipt.field-flagged { background: #fff2f2; border: 1px solid #f3caca; border-radius: 8px; padding: 10px 10px 6px; margin-left: -10px; margin-right: -10px; }
.edit-expense-receipt { margin: 13px 0; }
.edit-expense-receipt .current-receipt { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.edit-expense-receipt .current-receipt a { color: var(--green); font-weight: 700; }

/* 3.18: the extra menu tab (Übersicht) must not push the header off tablet-sized screens - the name stays available as tooltip
   (Entscheidung Betreiber 05.10.2026: dort steht jetzt das Benutzermenü, nur seine Rolle wird ausgeblendet - siehe .user-menu-role am Dateiende) */
@media (min-width: 761px) and (max-width: 1100px) {
  .header-nav { gap: 12px !important; }
}

/* 3.18: header menu - three groups (Aufträge, Abrechnung, Personal) with drop-down entries */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav .nav-link,
.main-nav .nav-group > summary { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; color: #184c3a; font-weight: 750; text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.main-nav .nav-group > summary::-webkit-details-marker { display: none; }
.main-nav .nav-link:hover,
.main-nav .nav-group > summary:hover,
.main-nav .nav-group[open] > summary { background: #e6f0ea; }
.main-nav .nav-link.current,
.main-nav .nav-group.current > summary { box-shadow: inset 0 -2px 0 #184c3a; }
.main-nav .nav-link:focus-visible,
.main-nav .nav-group > summary:focus-visible,
.nav-menu a:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; }
.nav-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.nav-group[open] > summary .nav-caret { transform: rotate(225deg) translate(-1px, -1px); }
.nav-group { position: relative; }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 2px; min-width: 250px; padding: 6px; background: #fff; border: 1px solid #dce2de; border-radius: 12px; box-shadow: 0 14px 34px #183c2c26; }
.nav-menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: 8px; color: #17251f; text-decoration: none; font-weight: 650; }
.nav-menu a:hover { background: #e6f0ea; }
.nav-menu a.current { background: #dcebe3; color: #184c3a; }
/* QA 4.15 (Nacht 06.10.2026): zwei Zähler (rot + blau/Warnung) stehen zusammen rechts, nicht einer mitten in der Zeile */
.nav-menu a > span:first-child { margin-right: auto; }
.nav-count { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: #ff3b30; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.nav-count.warn { background: #b3261e; }
/* Betreiberauftrag 30.09.2026: ein neuer Auftrag (rot, Ausrufezeichen) und ungelesene Mail/Antworten (blau, Briefsymbol)
   sind zwei getrennte Anzeigen - Farbe UND Symbol, damit der Unterschied auch ohne Farbwahrnehmung sofort klar ist. */
.nav-count.mail { background: #0a66c2; }
.nav-count > span { font-size: 11px; line-height: 1; }
.nav-count.mail > span { font-size: 16px; }
/* Entscheidung Betreiber 06.10.2026: der blaue Zähler zählt nur noch ungelesene Nachrichten in Anfragen; Mails ohne Anfrage (Kasten
   "E-Mails, die nicht als Anfrage übernommen wurden") bekommen einen eigenen orangen Zähler mit Ablage-Symbol - eigene Farbe UND
   eigenes Symbol. Weiße Schrift: 5,0:1 (hell) bzw. 4,6:1 (dunkel, dort zugleich 3,6:1 gegen den dunklen Kopfbereich). */
:root { --nav-count-inbox: #b45309; }
html[data-theme="dark"] { --nav-count-inbox: #c05600; }
.nav-count.inbox { background: var(--nav-count-inbox); }
.nav-inbox-icon { display: inline-block; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M1.8 9.2 4 3h8l2.2 6.2'/%3E%3Cpath d='M1.8 9.2h3.6l1 2h3.2l1-2h3.6V13H1.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M1.8 9.2 4 3h8l2.2 6.2'/%3E%3Cpath d='M1.8 9.2h3.6l1 2h3.2l1-2h3.6V13H1.8z'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Betreiberwunsch 03.10.2026: ein Zähler mit genau einem Auftrag ist ein Link direkt dorthin (nav-count-link); im
   Aufklappmenü steht er neben dem Eintrag (nav-entry), weil ein Link nicht in einem Link stehen darf. */
.nav-count-link { display: inline-flex; text-decoration: none; border-radius: 999px; }
.nav-count-link:hover .nav-count { filter: brightness(1.15); }
.nav-menu .nav-entry { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.nav-menu .nav-entry > a:first-child { flex: 1; }
.nav-menu .nav-entry a.nav-count-link, .nav-menu .nav-entry a.nav-count-link:hover { min-height: 0; padding: 0; background: transparent; }
/* Prüfung 03.10.2026: am Handy sind die Zähler der Gruppen-Überschrift ausgeblendet - der Link drumherum wäre sonst ein
   leerer, unsichtbarer Tab-/VoiceOver-Halt ohne Namen; im Menü bekommt der Zähler-Link eine fingergroße Tippfläche. */
@media (max-width: 760px) {
  .main-nav .nav-group > summary .nav-count-link { display: none; }
  .nav-menu .nav-entry a.nav-count-link, .nav-menu .nav-entry a.nav-count-link:hover { min-height: 44px; padding: 0 4px; }
}
.assignment-reply { scroll-margin-top: 90px; }
/* Prüfbefund 06.10.2026: der Sprung des orangen Zählers (#open-mails) landet nicht unter dem festen Kopfbereich */
#open-mails, #open-mails-title { scroll-margin-top: 90px; }
/* Prüfbefund 06.10.2026: der vierte (orange) Zähler kostet Breite. Im Handy-Menü dürfen die Zähler unter den Eintrag rutschen statt
   die Seite seitlich zu verschieben; der Menü-Knopf rückt bis 480 px enger, damit er neben dem Logo bleibt; 761-1000 px etwas engere
   Gruppen, damit der Kopf (Lead-Admin) einzeilig bleibt. */
.nav-menu .nav-entry { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) {
  header .nav-toggle { gap: 4px; padding: 0 10px; }
  .nav-toggle .nav-count { padding: 0 4px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .main-nav .nav-group > summary { gap: 5px; padding: 8px 8px; }
}
html[data-theme="dark"] .main-nav .nav-link,
html[data-theme="dark"] .main-nav .nav-group > summary { color: #91cfb0; }
html[data-theme="dark"] .main-nav .nav-link:hover,
html[data-theme="dark"] .main-nav .nav-group > summary:hover,
html[data-theme="dark"] .main-nav .nav-group[open] > summary { background: #24342d; }
html[data-theme="dark"] .main-nav .nav-link.current,
html[data-theme="dark"] .main-nav .nav-group.current > summary { box-shadow: inset 0 -2px 0 #91cfb0; }
html[data-theme="dark"] .main-nav .nav-link:focus-visible,
html[data-theme="dark"] .main-nav .nav-group > summary:focus-visible,
html[data-theme="dark"] .nav-menu a:focus-visible { outline-color: #91cfb0; }
html[data-theme="dark"] .nav-menu { background: #18211d; border-color: #2b3832; box-shadow: 0 14px 34px #000a; }
html[data-theme="dark"] .nav-menu a { color: #e5ede8; }
html[data-theme="dark"] .nav-menu a:hover { background: #24342d; }
html[data-theme="dark"] .nav-menu a.current { background: #203a2d; color: #91cfb0; }
@media (max-width: 760px) {
  .header-nav .main-nav { width: 100%; flex-wrap: wrap; gap: 2px 6px; }
  .main-nav .nav-group[open] { flex: 1 1 100%; }
  .nav-menu { position: static; min-width: 0; margin: 2px 0 6px; padding: 0 0 0 10px; background: transparent; border: 0; box-shadow: none; }
  html[data-theme="dark"] .nav-menu { background: transparent; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .nav-caret { transition: none; } }


/* QA round 8: staff table keeps name and phone readable on wide screens; small texts reach 4.5:1.
   Fund 400: scoped to the wide layout (>820px) - unscoped it also hit the ≤820px mobile card
   view, where it cancelled the wrap needed for long unbroken values (name/case number),
   which then overflowed silently past the card's overflow:hidden with no wrap/ellipsis/scrollbar. */
@media (min-width: 821px) {
  .users-table td:first-child { min-width: 11rem; overflow-wrap: normal; }
}
/* Version 4.30 (Paket P5): Telefon und E-Mail sind antippbar - in Textfarbe unterstrichen (auch im dunklen Design lesbar) und sie brechen um wie der Text (Fund 425), statt über den Zellenrand zu laufen */
.users-table td[data-label] a[href^="tel:"], .users-table td[data-label] a[href^="mailto:"], .staff-readonly a, .handover-phone a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
/* Version 4.30 (Paket P5): Status und „Erstanmeldung offen“ stehen zusammen (in der Handy-Karte nicht in der Beschriftungsspalte); die eigene Zeile ohne Knöpfe bekommt keine leere Fläche */
.user-status-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 820px) { .users-table td.user-actions:has(> .row-actions:empty) { display: none; } }
/* Fund 425: eine Telefonnummer darf nie abgeschnitten werden - bricht bei Bedarf um statt Zeichen zu verlieren. */
.users-table td:nth-child(4) b { overflow-wrap: anywhere; }
html[data-theme="dark"] .eyebrow { color: #8fcfae; }
.site-footer { color: #56635d; }

/* QA round 9: readable primary buttons in the dark theme (white text on the light dark-theme green was 2.2:1), badge/version contrast,
   the header of the lead admin fits at tablet width, bigger touch targets in lists on phones */
html[data-theme="dark"] { --button: #2f7d5b; }
html[data-theme="dark"] .decision.approved { color: #7fd1a3; }
html[data-theme="dark"] .case-remove-button { color: #ee9999; }
.nav-count, .nav-badge { background: #d70015; }
.nav-count.warn { background: #b3261e; }
.app-version { opacity: 1; color: #5b6a62; }
html[data-theme="dark"] .app-version { color: #a9b6af; }
@media (min-width: 761px) and (max-width: 900px) {
  header { height: auto; min-height: 68px; padding-top: 8px; padding-bottom: 8px; }
  .header-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}
@media (max-width: 760px) {
  a.arrow, button.delete-control, button.secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
}

/* QA round 9 (visual check at tablet width): the dark card layout of the staff/user lists applies from 820px like the light one (it started at 760px:
   white cards with pale text between 761 and 820px); long page titles wrap at the word instead of in the middle of it */
@media (max-width: 820px) {
  html[data-theme="dark"] .users-table { background: transparent; box-shadow: none; }
  html[data-theme="dark"] .users-table tr { border-color: #304038; background: #18211d; }
  html[data-theme="dark"] .users-table td { border-color: #2b3832; }
}
@media (max-width: 900px) {
  .heading { flex-wrap: wrap; }
  h1 { font-size: clamp(28px, 6vw, 40px); hyphens: auto; overflow-wrap: break-word; }
}

/* QA round 9 (feedback): the staff/user table fits into the page instead of being wider than the window - narrower cell padding, long names
   and addresses break, the buttons stay compact - and "Löschen" is filled red so it stands out from "Deaktivieren" */
@media (min-width: 821px) {
  .users-table table { width: 100%; }
  .users-table th, .users-table td { padding: 12px 9px; }
  .users-table td:first-child { min-width: 7rem; max-width: 13rem; overflow-wrap: anywhere; }
  .users-table td:nth-child(3) { overflow-wrap: anywhere; }
  .users-table td small { overflow-wrap: anywhere; }
  .users-table td:nth-child(4) b { display: block; max-width: 100%; overflow-wrap: anywhere; }
  .staff-table td .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; padding: 4px 9px; font-size: 11.5px; }
  .users-table .row-actions { flex-wrap: wrap; gap: 5px; }
  .users-table .row-actions button { font-size: 12px; padding: 7px 9px; }
  .users-table th { padding-left: 9px; padding-right: 9px; letter-spacing: .05em; }
}
@media (min-width: 821px) and (max-width: 1240px) {
  .users-table td { font-size: 13.5px; }
  .users-table th, .users-table td { padding-left: 7px; padding-right: 7px; }
  .users-table td:first-child { max-width: 10.5rem; }
  .users-table .row-actions button { font-size: 11px; padding: 6px 7px; }
  .users-table .row-actions { gap: 4px; }
}
/* The staff list has fixed column shares so the buttons keep their room (the automatic layout gave them only the leftover width) */
@media (min-width: 821px) {
  .staff-table table { table-layout: fixed; }
  /* Runde 10 (Fund u11-02): bei 7% war "Deaktiviert" bei 1024-1920px immer abgeschnitten ("Deakt..."), und bei
     10% brach "Notfallsanitäter/in" (häufigste Qualifikation) mitten im Wort um - Status und Qualifikation
     bekommen mehr Platz, zu Lasten von Name/Telefon/Aktionen (bei DE und EN gemessen). */
  .staff-table th:nth-child(1) { width: 11%; }
  .staff-table th:nth-child(2) { width: 7%; }
  .staff-table th:nth-child(3) { width: 13%; }
  .staff-table th:nth-child(4) { width: 11%; }
  .staff-table th:nth-child(5) { width: 8%; }
  .staff-table th:nth-child(6) { width: 14%; }
  .staff-table th:nth-child(7) { width: 13%; }
  .staff-table th:nth-child(8) { width: 23%; }
  .staff-table th { font-size: 9.5px; letter-spacing: .02em; }
  .staff-table th .sort-button { font: inherit; letter-spacing: inherit; padding: 0; text-align: left; }
  .staff-table td:first-child { max-width: none; }
  .staff-table .row-actions { justify-content: flex-end; }
}
/* Between tablet and desktop width (821-980px) personnel number and home base move under the name, so the buttons keep one row */
.staff-meta { display: none; }
@media (min-width: 821px) and (max-width: 980px) {
  .staff-table th:nth-child(2), .staff-table td:nth-child(2), .staff-table th:nth-child(5), .staff-table td:nth-child(5) { display: none; }
  .staff-table th:nth-child(1) { width: 17%; }
  .staff-table th:nth-child(3) { width: 16%; }
  .staff-table th:nth-child(4) { width: 15%; }
  .staff-table th:nth-child(6) { width: 14%; }
  .staff-table th:nth-child(7) { width: 15%; }
  .staff-table th:nth-child(8) { width: 23%; }
  .staff-table .staff-meta { display: block; color: var(--muted); font-weight: 500; }
}
.danger.solid { background: #b3261e; color: #fff; border-color: #b3261e; }
.danger.solid:hover { background: #8f1d17; border-color: #8f1d17; }
html[data-theme="dark"] .danger.solid { background: #b3261e; color: #fff; border-color: #d0534b; }
html[data-theme="dark"] .danger.solid:hover { background: #cf3b32; }

/* QA round 9 (feedback): the current menu entry was marked with an inset line that followed the rounded corners of the entry (a curved bracket).
   Now: a straight accent bar on the bottom edge of the header (wide screens; the header is 68px high and the entries are centred in it),
   and a soft filled pill where the header wraps (tablets and phones). */
.main-nav .nav-link.current, .main-nav .nav-group.current > summary { box-shadow: none; }
@media (min-width: 901px) {
  .main-nav .nav-link, .main-nav .nav-group > summary { position: relative; }
  .main-nav .nav-link.current::after, .main-nav .nav-group.current > summary::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: calc((100% - 68px) / 2);
    height: 3px; border-radius: 3px 3px 0 0; background: #184c3a;
  }
  html[data-theme="dark"] .main-nav .nav-link.current::after,
  html[data-theme="dark"] .main-nav .nav-group.current > summary::after { background: #91cfb0; }
}
@media (max-width: 900px) {
  .main-nav .nav-link.current, .main-nav .nav-group.current > summary { background: #dcebe3; }
  html[data-theme="dark"] .main-nav .nav-link.current, html[data-theme="dark"] .main-nav .nav-group.current > summary { background: #2a4438; box-shadow: none; }
}
html[data-theme="dark"] .main-nav .nav-link.current, html[data-theme="dark"] .main-nav .nav-group.current > summary { box-shadow: none; }

/* QA round 9 (feedback): the list of mails that were not taken over can be collapsed, and each mail can be looked at first */
.open-mails > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.open-mails > summary::-webkit-details-marker { display: none; }
.open-mails > summary h2 { margin: 0; }
.open-mails > summary::after { content: "\25BE"; font-size: 18px; color: var(--muted); transition: transform .15s; }
.open-mails:not([open]) > summary::after { transform: rotate(-90deg); }
.open-mails[open] > summary { margin-bottom: 8px; }
.button-link { display: inline-block; padding: 11px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.open-mail-actions .button-link { padding: 9px 13px; font-size: 13px; }
.mail-view-actions .button-link { font-size: 13px; }
.mail-view .card { padding: 18px 20px; margin-bottom: 16px; }
.mail-view h2 { margin: 0 0 10px; font-size: 17px; }
.mail-view-facts { display: grid; gap: 10px; margin: 0; }
.mail-view-facts > div { display: grid; grid-template-columns: minmax(90px, 160px) 1fr; gap: 12px; }
.mail-view-facts dt { margin: 0; }
.mail-view-facts dd { margin: 0; overflow-wrap: anywhere; }
.mail-view-body { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 30rem; overflow: auto; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink); font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mail-attachment { margin: 0 0 18px; }
.mail-attachment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.mail-attachment img { display: block; max-width: min(100%, 640px); height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.mail-view-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 40px; }
@media (max-width: 560px) { .mail-view-facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* Merging orders that belong together (same order number): hint under the subject, selection bar, checkbox in the first column */
.merge-pick { display: inline-flex; align-items: center; margin: 0 8px 0 0; vertical-align: middle; }
.merge-pick input { width: 18px; height: 18px; margin: 0; }
.merge-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: #fff7dc; color: #6b5110; font-size: 13px; }
.merge-hint button { padding: 6px 10px; font-size: 12px; }
html[data-theme="dark"] .merge-hint { background: #3a3417; color: #efdca0; }
.merge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; margin: 0 0 14px; }
.merge-bar[hidden] { display: none; }
.merge-bar label { display: flex; align-items: center; gap: 8px; margin: 0; }
.merge-bar select { max-width: min(46ch, 100%); margin: 0; }


/* Case number list: one line per case (number, person, created, report state) that opens for the actions; filter chips, sortable headers, paging */
.case-create { margin: 0 0 4px; }
.case-create > summary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 8px; background: var(--button, var(--green)); color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.case-create > summary::-webkit-details-marker { display: none; }
.case-create > summary span { font-size: 20px; line-height: 1; }
.case-create[open] > summary { margin-bottom: 14px; }
.case-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 0 0 16px; }
.case-list-heading { justify-content: flex-start; }
.case-list-heading .case-count { flex: none; height: auto; min-height: 34px; padding: 6px 12px; white-space: nowrap; }
.case-filter-group { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: 6px; }
.case-filter-title { min-width: 92px; margin-right: 4px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.case-chip span { color: var(--muted); font-size: 12px; font-weight: 800; }
.case-chip:hover { border-color: var(--green); }
.case-chip.zero { color: var(--muted); }
.case-chip.on { border-color: var(--green); background: var(--green); color: var(--white); }
.case-chip.on span { color: var(--white); }
.case-table { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 3px 15px #183c2c0a; }
.case-thead, .case-summary { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 2fr) 150px 170px 100px; align-items: center; gap: 12px; padding-inline: 18px; }
.case-thead { padding-block: 10px; border-bottom: 1px solid var(--line); background: #f8faf8; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-thead a { color: var(--muted); text-decoration: none; }
.case-thead a:hover, .case-thead a.active { color: var(--green); }
.case-row { border-bottom: 1px solid var(--line); }
.case-row:last-child { border-bottom: 0; }
.case-summary { min-height: 58px; padding-block: 9px; cursor: pointer; list-style: none; }
.case-summary::-webkit-details-marker { display: none; }
.case-summary:hover { background: #f5f9f6; }
.case-row[open] > .case-summary { border-bottom: 1px solid var(--line); background: #f1f7f3; }
.case-c-num { display: flex; min-width: 0; align-items: center; gap: 10px; }
.case-c-num-body { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.case-pick { display: flex; flex: none; align-items: center; margin: -8px; padding: 8px; cursor: pointer; }
.case-pick input, .case-bulk-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); cursor: pointer; }
.case-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; padding: 0 4px; color: var(--muted); font-size: 13px; }
.case-bulk-all { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink); font-weight: 700; cursor: pointer; }
.case-bulk-count { flex: 1; min-width: 0; }
.case-bulk-bar .case-remove-button:disabled { opacity: .45; cursor: not-allowed; }
.case-c-num code { overflow-wrap: anywhere; color: #234c3d; font-size: 13px; font-weight: 850; }
.case-order-link { color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; }
.case-order-link:hover { text-decoration: underline; }
.case-c-people { display: flex; min-width: 0; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.case-c-people strong { overflow-wrap: anywhere; }
.case-c-people small { flex-basis: 100%; color: var(--muted); font-weight: 700; }
.case-more { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--mint); color: var(--green); font-size: 12px; font-weight: 850; }
.case-c-date { color: var(--muted); font-size: 13px; }
.case-c-state a.badge, .case-participant-row a.badge { text-decoration: none; }
.case-c-state a.badge:hover, .case-participant-row a.badge:hover { filter: brightness(.94); }
/* QA-Runde 15 (Fund 558/560): "Storniert" als neutrales Kennzeichen neben der (bewusst grünen) Storno-Ampel */
.badge.case-none, .badge.storno { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.badge.case-mixed { background: #e6eef2; color: #35607a; }
.case-c-toggle { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--green); font-size: 13px; font-weight: 800; }
.case-chevron { font-size: 16px; line-height: 1; transition: transform .15s; }
.case-chevron::before { content: "\25BE"; }
.case-row[open] .case-chevron { transform: rotate(180deg); }
.case-panel { padding: 8px 18px 16px; background: #fbfcfb; }
.case-panel .case-participant-list { padding: 0; }
.case-panel .case-participant-row { grid-template-columns: 38px minmax(0, 1fr) auto auto; }
.case-panel .case-add-participant { margin-top: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.case-panel-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.case-panel-foot form { margin: 0; }
.case-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.case-pager a, .case-pager .off { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); font-weight: 800; text-decoration: none; }
.case-pager a { color: var(--green); }
.case-pager .off { color: var(--muted); opacity: .5; }
.case-list > .case-backup-note { margin-top: 18px; }
html[data-theme="dark"] .case-table { border-color: #2d3b34; background: #18211d; box-shadow: none; }
html[data-theme="dark"] .case-thead { border-color: #2d3b34; background: #1b2923; }
html[data-theme="dark"] .case-row { border-color: #2d3b34; }
html[data-theme="dark"] .case-summary:hover { background: #1d2c25; }
html[data-theme="dark"] .case-row[open] > .case-summary { border-color: #2d3b34; background: #1f3029; }
html[data-theme="dark"] .case-panel { background: #1b2923; }
html[data-theme="dark"] .case-panel .case-add-participant { border-color: #35463e; }
html[data-theme="dark"] .case-c-num code { color: #a4d7bd; }
html[data-theme="dark"] .case-more { background: #274235; color: #a4d7bd; }
html[data-theme="dark"] .badge.case-none, html[data-theme="dark"] .badge.storno { border-color: #3b4a42; color: #a0ada7; }
html[data-theme="dark"] .badge.case-mixed { background: #233842; color: #acd5e8; }
html[data-theme="dark"] .case-chip { border-color: #35463e; background: #18211d; }
html[data-theme="dark"] .case-chip.on { border-color: #79bd9b; background: #79bd9b; color: #10231a; }
html[data-theme="dark"] .case-chip.on span { color: #10231a; }
html[data-theme="dark"] .case-pager a, html[data-theme="dark"] .case-pager .off { border-color: #35463e; background: #18211d; }
@media (max-width: 900px) {
  .case-thead, .case-summary { grid-template-columns: minmax(120px, 1fr) minmax(0, 1.6fr) 96px 150px 28px; gap: 10px; padding-inline: 14px; }
  .case-manage-text { display: none; }
}
@media (max-width: 700px) {
  .case-filter-title { min-width: 0; flex-basis: 100%; }
  .case-thead { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-inline: 14px; }
  .case-thead span { display: none; }
  .case-summary { grid-template-columns: minmax(0, 1fr) auto 28px; grid-template-areas: "num state toggle" "people people people" "date date date"; row-gap: 4px; }
  .case-c-num { grid-area: num; }
  .case-c-state { grid-area: state; }
  .case-c-toggle { grid-area: toggle; }
  .case-c-people { grid-area: people; }
  .case-c-date { grid-area: date; }
  .case-panel { padding-inline: 14px; }
  .case-panel .case-participant-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .case-panel .case-participant-row form { grid-column: 1 / -1; }
  .case-panel .participant-remove-button { width: 100%; }
  .case-panel-foot .case-remove-button { width: 100%; justify-content: center; }
  .case-pager { justify-content: center; }
}

/* case list: review fixes - visible keyboard focus inside the clipped table, readable muted text, names that wrap, dark hover, touch targets */
.case-table summary:focus-visible, .case-table a:focus-visible { outline-offset: -3px; }
.case-table, .case-filters, .case-pager, .case-list-heading { --muted: #5a6661; }
html[data-theme="dark"] .case-table, html[data-theme="dark"] .case-filters, html[data-theme="dark"] .case-pager, html[data-theme="dark"] .case-list-heading { --muted: #a0ada7; }
.case-panel .case-person-data strong { white-space: normal; overflow-wrap: anywhere; }
html[data-theme="dark"] .case-remove-button:hover { border-color: #714949; background: #2a1c1c; color: #f1a5a5; }
@media (max-width: 700px) {
  .case-thead a { padding: 9px 2px; }
  .case-order-link { display: inline-block; padding: 6px 0; }
}
html[data-theme="dark"] .case-chip:hover { border-color: #79bd9b; }
html[data-theme="dark"] .badge.case-none, html[data-theme="dark"] .badge.storno { background: transparent; }

/* Punkt 6 nach der Demo: die Fallnummernliste nennt unter dem Anlegezeitpunkt auch, von wem die Fallnummer angelegt wurde. */
.case-c-date .case-created-by { display: block; font-size: 12px; overflow-wrap: anywhere; }

html[data-theme="dark"] .pdf-doc-switch { border-color: #304038; background: #1b2923; }
html[data-theme="dark"] .pdf-doc-chip { border-color: #35473e; background: #18231e; color: #e5ede8; }
html[data-theme="dark"] .pdf-doc-chip small { color: #9fada6; }
html[data-theme="dark"] .pdf-doc-chip.active { border-color: #79bd9b; background: #274235; box-shadow: inset 0 0 0 1px #79bd9b; }

/* Übersicht: Hinweis zur Bestätigung der Versicherung darf umbrechen statt mit "…" abgeschnitten zu werden. */

/* Ampel eines Auftrags: rot = offen, gelb = von MB bestätigt, grün = vom Versicherer bestätigt (Punkt + Text, nicht nur Farbe). */
.ampel { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px 5px 10px; border: 1px solid transparent; border-radius: 12px; font-size: 12px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.ampel i { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.ampel small { display: block; font-size: 11px; font-weight: 600; }
.ampel-red { border-color: #efc4c4; background: #fbe4e4; color: #8b2c2c; }
.ampel-red i { background: #c94a4a; }
.ampel-yellow { border-color: #ecd68e; background: #fff3cd; color: #6b5110; }
.ampel-yellow i { background: #e0a800; }
.ampel-green { border-color: #b5d9c4; background: #dcefe4; color: #176139; }
.ampel-green i { background: #2f9e5e; }
.ampel-storno { border-color: #b5d9c4; background: #dcefe4; color: #176139; }
.ampel-storno i { background: #2f9e5e; }
html[data-theme="dark"] .ampel-red { border-color: #6b3a3a; background: #4a2929; color: #f2acac; }
html[data-theme="dark"] .ampel-red i { background: #e06666; }
html[data-theme="dark"] .ampel-yellow { border-color: #6b5a25; background: #443a1a; color: #f0d27a; }
html[data-theme="dark"] .ampel-yellow i { background: #e8b923; }
html[data-theme="dark"] .ampel-green { border-color: #35634b; background: #224535; color: #9de0bd; }
html[data-theme="dark"] .ampel-green i { background: #4cc98a; }
html[data-theme="dark"] .ampel-storno { border-color: #35634b; background: #224535; color: #9de0bd; }
html[data-theme="dark"] .ampel-storno i { background: #4cc98a; }
.escort-handover { margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.escort-handover .is-done { color: #176139; }
.escort-handover .is-open { color: #8a6a10; }
html[data-theme="dark"] .escort-handover .is-done { color: #9de0bd; }
html[data-theme="dark"] .escort-handover .is-open { color: #e8c46a; }

/* Ampel in der Auftragsübersicht: nur ein Punkt je Zeile, die Bedeutung steht einmal in der Legende über der Liste. */
.ampel-light { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0002; vertical-align: middle; text-decoration: none; }
a.ampel-light:hover, a.ampel-light:focus-visible { box-shadow: 0 0 0 3px #2f9e5e55; }
.ampel-light.ampel-red { background: #c94a4a; }
.ampel-light.ampel-yellow { background: #e0a800; }
.ampel-light.ampel-green { background: #2f9e5e; }
.ampel-light.ampel-storno { background: #2f9e5e; }
html[data-theme="dark"] .ampel-light { border-color: #ffffff30; }
html[data-theme="dark"] .ampel-light.ampel-red { background: #e06666; }
html[data-theme="dark"] .ampel-light.ampel-yellow { background: #e8b923; }
html[data-theme="dark"] .ampel-light.ampel-green { background: #4cc98a; }
html[data-theme="dark"] .ampel-light.ampel-storno { background: #4cc98a; }
/* Legende über der Liste: zwei Zeilen (Ampel, Weitergabe), je drei gleich breite Spalten. Betreiberauftrag 30.09.2026:
   einklappbar (Standard: aufgeklappt), merkt sich den Zustand wie schon der "nicht übernommene Mails"-Block unten. */
.ampel-legend { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; font-size: 13px; }
.ampel-legend > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ampel-legend > summary::-webkit-details-marker { display: none; }
.ampel-legend > summary::after { content: "\25BE"; font-size: 14px; color: var(--muted); transition: transform .15s; }
.ampel-legend:not([open]) > summary::after { transform: rotate(-90deg); }
.ampel-legend[open] > summary { margin-bottom: 10px; }
/* Version 4.24: vier Plätze neben der Überschrift - die Ampel hat mit "Zurückgestellt" vier Farben (die Weitergabe-Zeile lässt den vierten Platz frei) */
.legend-grid { display: grid; grid-template-columns: max-content repeat(4, minmax(0, 1fr)); gap: 8px 24px; align-items: start; }
.legend-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 1px; }
.legend-label small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.legend-item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; line-height: 1.3; }
.legend-item small { display: block; color: var(--muted); font-size: 11px; }
.legend-item .ampel-light { width: 14px; height: 14px; margin-top: 2px; }
.legend-mark { display: inline-block; flex: none; width: 14px; margin-top: 0; text-align: center; font-weight: 800; color: #8a6a10; }
.legend-mark.is-done { color: #176139; }
html[data-theme="dark"] .legend-mark { color: #e8c46a; }
html[data-theme="dark"] .legend-mark.is-done { color: #9de0bd; }
@media (max-width: 760px) { .legend-grid { grid-template-columns: 1fr; gap: 6px; } .legend-label { margin-top: 6px; } }
html[data-theme="dark"] .ampel-legend { background: #18231e; border-color: #35473e; }

.escort-handover { display: flex; flex-wrap: wrap; gap: 0 12px; }
.escort-handover span { white-space: nowrap; }

/* Auftrag aus dem E-Mail-Text (Allianz "Fluganfrage"): die Angaben der Anfrage als Liste */
.text-order-card { margin: 14px 0; min-width: 0; max-width: 100%; padding: 22px; }
.text-order-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); min-width: 0; gap: 8px 18px; margin: 10px 0 0; }
.text-order-facts > div { min-width: 0; }
.text-order-facts dt { color: var(--muted, #58645f); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.text-order-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.text-order-raw { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 10px 0 0; }
/* Version 4.21.1: die Karte ist einklappbar - die Überschrift steht neben dem Pfeil */
.text-order-card > summary { cursor: pointer; }
.text-order-card > summary h3 { display: inline; margin: 0; }
/* Version 4.21 (Wunsch Betreiber 06.10.2026): der Text der Anfrage-Mail neben der PDF; ein langer Verlauf scrollt in der Karte */
.mail-text-card { margin: 14px 0; min-width: 0; max-width: 100%; padding: 16px 22px; }
.mail-text-card > summary { cursor: pointer; font-weight: 700; }
/* QA 09.10.2026 (Version 4.25): Hinweis auf nicht übernommene Anhänge (B11) und Konflikt-Hinweis der Textanfrage (B10) - lange Dateinamen brechen um, auch bei 390 px; Farben kommen von .alert (hell und dunkel) */
.mail-note, .text-order-conflict { margin: 14px 0; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.mail-text-card .mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 10px 0 0; max-height: 22em; overflow-y: auto; }

/* Handy: der Kopfbereich (Menü, Sprache, Schalter) ist dort mehrzeilig und klebte bisher oben - er belegte so rund ein Fünftel des Bildschirms und verdeckte die Liste. Er läuft jetzt mit dem Inhalt weg. */
@media (max-width: 760px) { header { position: static; } }

/* Betreiberauftrag 02.10.2026 ("der Header am Handy schaut nicht wirklich gut aus"): bis 760 px besteht die Kopfzeile nur noch aus
   Logo und einem "Menü"-Knopf, der die Zähler (neue Anfragen, ungelesene Mail, offene Abrechnungen) weiter sichtbar trägt. Dahinter
   liegt eine aufgeräumte Liste: jede Gruppe als Überschrift mit ihren Einträgen darunter, dann Sprache, Dunkel, Kompakt, Passwort,
   Abmelden. Breitere Bildschirme bleiben unverändert. */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  header { height: auto; min-height: 60px; padding: 8px 16px; flex-wrap: wrap; gap: 8px 12px; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-left: auto; padding: 0 14px; border: 1px solid #cfd9d3; border-radius: 10px; background: #fff; color: #184c3a; font: inherit; font-size: 15px; font-weight: 750; cursor: pointer; }
  .nav-toggle-bars { width: 16px; height: 2px; margin: 0 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  header.nav-open .nav-toggle { background: #e6f0ea; }
  header .header-nav { display: none; flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 6px !important; padding: 4px 0 10px; border-top: 1px solid #e7e7e2; }
  header.nav-open .header-nav { display: flex; }
  .header-nav .main-nav { width: 100%; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 4px; }
  .main-nav .nav-group[open] { flex: none; }
  .main-nav .nav-group > summary, .main-nav .nav-group[open] > summary, .main-nav .nav-group.current > summary, .main-nav .nav-group > summary:hover { display: flex; padding: 12px 12px 4px; background: none; box-shadow: none; color: #728079; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: default; }
  .main-nav .nav-group > summary .nav-caret, .main-nav .nav-group > summary .nav-count, .main-nav .nav-group > summary::after { display: none; }
  .header-nav .nav-menu { margin: 0; padding: 0; gap: 2px; }
  .nav-menu a, .main-nav .nav-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 9px; font-size: 16px; }
  .header-nav .user { flex-wrap: wrap; align-items: center; gap: 10px !important; margin-top: 6px; padding: 12px 0 0; border-top: 1px solid #e7e7e2; }
  /* QA 4.15 (Nacht 06.10.2026): Mitarbeiterzugang ohne Menügruppen - keine doppelte Trennlinie am Handy */
  .header-nav > .user:first-child { margin-top: 0; padding-top: 4px; border-top: 0; }
  html[data-theme="dark"] .nav-toggle { background: #1b2721; border-color: #405048; color: #c4d2cb; }
  html[data-theme="dark"] header.nav-open .nav-toggle { background: #24342d; }
  html[data-theme="dark"] header .header-nav, html[data-theme="dark"] .header-nav .user { border-color: #2b3832; }
  html[data-theme="dark"] .main-nav .nav-group > summary, html[data-theme="dark"] .main-nav .nav-group[open] > summary, html[data-theme="dark"] .main-nav .nav-group.current > summary, html[data-theme="dark"] .main-nav .nav-group > summary:hover { color: #98aaa1; background: none; }
}

/* Entscheidung Betreiber 05.10.2026: "Passwort" und "Abmelden" standen frei in der Kopfzeile - jetzt öffnet ein Klick auf Name/Rolle ein kleines
   Menü mit "Passwort ändern" und "Abmelden". Aussehen wie die Gruppen der Hauptnavigation (Pfeil, grüner Hover, weiße Liste darunter), nur
   rechtsbündig und in der gedämpften Farbe des früheren Namens; ein sehr langer Name endet mit "…" (ganz im Tooltip). Bis 1100 px entfällt die
   Rolle (vorher fehlte dort der ganze Name). Am Handy (bis 760 px) ein eigener Bereich im aufgeklappten Menü: Name als Überschrift wie bei den
   Gruppen, darunter beide Einträge mit fingergroßer Tippfläche. */
.user-menu > summary { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px; color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; white-space: nowrap; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.user-menu > summary:hover, .user-menu[open] > summary { background: #e6f0ea; color: #184c3a; }
.user-menu > summary:focus-visible, .user-menu .nav-menu button:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; }
.user-menu .nav-menu { left: auto; right: 0; min-width: 210px; font-size: 15px; }
.user .user-menu form { display: block; margin: 0; }
.user-menu .nav-menu button { display: flex; align-items: center; width: 100%; min-height: 0; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: #17251f; font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.user-menu .nav-menu button:hover { background: #e6f0ea; }
html[data-theme="dark"] .user-menu > summary { color: var(--muted); }
html[data-theme="dark"] .user-menu > summary:hover, html[data-theme="dark"] .user-menu[open] > summary { background: #24342d; color: #91cfb0; }
html[data-theme="dark"] .user-menu > summary:focus-visible, html[data-theme="dark"] .user-menu .nav-menu button:focus-visible { outline-color: #91cfb0; }
html[data-theme="dark"] .user-menu .nav-menu button { color: #e5ede8; }
html[data-theme="dark"] .user-menu .nav-menu button:hover { background: #24342d; }
/* ein langer Name schiebt die Kopfzeile nicht über den Rand: nur das Benutzermenü gibt Platz ab ("…"), Menügruppen und Schalter bleiben ganz */
@media (min-width: 761px) {
  .header-nav, .header-nav .user { min-width: 0; }
  .user-menu { min-width: 0; max-width: 20rem; }
  .user-menu > summary { max-width: 100%; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .user-menu-role { display: none; }
}
@media (max-width: 760px) {
  .header-nav .user-menu { flex: 1 1 100%; }
  .user-menu > summary, .user-menu[open] > summary, .user-menu > summary:hover { display: flex; padding: 12px 12px 4px; background: none; color: #728079; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: normal; cursor: default; }
  .user-menu-label { overflow: visible; overflow-wrap: anywhere; }
  .user-menu > summary .nav-caret { display: none; }
  .user-menu .nav-menu { min-width: 0; }
  .user-menu .nav-menu button { min-height: 44px; padding: 0 12px; border-radius: 9px; font-size: 16px; }
  html[data-theme="dark"] .user-menu > summary, html[data-theme="dark"] .user-menu[open] > summary, html[data-theme="dark"] .user-menu > summary:hover { color: #98aaa1; background: none; }
}

/* Entscheidung Betreiber 05.10.2026 (Variante B): der Kopfbereich war zu voll - Sprache (DE | EN), Hell/Dunkel und Kompakt/Ausführlich liegen jetzt in
   einem eigenen kleinen Einstellungsmenü hinter einem Zahnrad, rechts vor dem Benutzermenü. Aussehen und Verhalten wie das Benutzermenü (gedämpftes
   Symbol mit Pfeil, grüner Hover, weiße Liste rechtsbündig darunter); darin drei schlichte Zeilen: Beschriftung links, Schalter rechts. Das Wort
   "Einstellungen" ist am Desktop nur für Bildschirmleser da (Tooltip am Zahnrad). Am Handy (bis 760 px) ein eigener Bereich "Einstellungen" im
   aufgeklappten Menü wie beim Benutzermenü, die Schalter mit fingergroßer Tippfläche (44 px). */
.settings-menu > summary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 9px; color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; white-space: nowrap; }
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-icon { display: block; flex: none; }
.settings-menu > summary:hover, .settings-menu[open] > summary { background: #e6f0ea; color: #184c3a; }
.settings-menu > summary:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; }
.settings-menu .nav-menu { left: auto; right: 0; min-width: 260px; gap: 4px; font-size: 14px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 4px 6px 4px 12px; }
.settings-row > :last-child { flex: none; }
.settings-row-label { color: #17251f; font-weight: 650; }
.settings-menu .language-switch form { display: inline; margin: 0; }
html[data-theme="dark"] .settings-menu > summary { color: var(--muted); }
html[data-theme="dark"] .settings-menu > summary:hover, html[data-theme="dark"] .settings-menu[open] > summary { background: #24342d; color: #91cfb0; }
html[data-theme="dark"] .settings-menu > summary:focus-visible { outline-color: #91cfb0; }
html[data-theme="dark"] .settings-row-label { color: #e5ede8; }
@media (min-width: 761px) {
  .settings-menu { flex: none; }
  .settings-menu-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
@media (max-width: 760px) {
  .header-nav .settings-menu { flex: 1 1 100%; }
  .settings-menu > summary, .settings-menu[open] > summary, .settings-menu > summary:hover { display: flex; padding: 12px 12px 4px; background: none; color: #728079; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: default; }
  .settings-menu > summary .settings-icon, .settings-menu > summary .nav-caret { display: none; }
  .settings-menu .nav-menu { min-width: 0; font-size: 16px; }
  .settings-row { min-height: 44px; padding: 0 0 0 12px; }
  .settings-menu .language-switch button { min-width: 44px; min-height: 44px; font-size: 14px; }
  .settings-menu .header-toggle { min-height: 44px; padding: 0 14px; font-size: 14px; }
  html[data-theme="dark"] .settings-menu > summary, html[data-theme="dark"] .settings-menu[open] > summary, html[data-theme="dark"] .settings-menu > summary:hover { color: #98aaa1; background: none; }
}

/* Entscheidung Betreiber 05.10.2026 (Version 4.15): das kleine Menü "⋯" für selten gebrauchte Aktionen (Weitergabe-Karte und Mails der Anfrageseite).
   <details class="more-menu"> mit einem Symbol-Knopf; das Feld liegt rechtsbündig über dem Inhalt, nie breiter als das Fenster (nav-menu.js rückt es
   bei Bedarf ins Fenster), Einträge (Links, Knöpfe, aufklappbare Zeilen) sehen gleich aus, am Handy mit fingergroßer Tippfläche (44 px).
   Nur eines offen, Klick daneben und Esc schließen (nav-menu.js); ohne JavaScript klappt es wie jedes <details> auf und zu. */
.more-menu { position: relative; display: inline-block; flex: none; }
.more-menu > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 34px; padding: 0 8px; border-radius: 8px; background: #edf0ee; color: #17251f; cursor: pointer; list-style: none; }
.more-menu > summary::-webkit-details-marker, .more-menu summary.more-item::-webkit-details-marker { display: none; }
.more-menu > summary svg { display: block; }
.more-menu > summary:hover, .more-menu[open] > summary { background: #e1e7e3; }
.more-menu-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 25; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; width: max-content; min-width: 220px; max-width: min(360px, calc(100vw - 32px)); padding: 6px; background: #fff; border: 1px solid #dce2de; border-radius: 12px; box-shadow: 0 14px 34px #183c2c26; text-align: left; }
.more-menu-panel form, .more-menu-panel details { margin: 0; padding: 0; }
.more-menu .more-item { display: flex; align-items: center; width: 100%; min-height: 38px; margin: 0; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: #17251f; font: inherit; font-size: 14px; font-weight: 650; line-height: 1.3; text-align: left; text-decoration: none; white-space: normal; cursor: pointer; list-style: none; }
.more-menu .more-item:hover, .more-menu details[open] > summary.more-item { background: #e6f0ea; }
html[data-theme="dark"] .more-menu > summary { background: #28352f; color: #e1eae5; }
html[data-theme="dark"] .more-menu > summary:hover, html[data-theme="dark"] .more-menu[open] > summary { background: #324139; }
html[data-theme="dark"] .more-menu-panel { background: #18211d; border-color: #2b3832; box-shadow: 0 14px 34px #000a; }
html[data-theme="dark"] .more-menu .more-item { color: #e5ede8; }
html[data-theme="dark"] .more-menu .more-item:hover, html[data-theme="dark"] .more-menu details[open] > summary.more-item { background: #24342d; }
@media (max-width: 760px) {
  .more-menu > summary { min-width: 44px; min-height: 44px; }
  .more-menu .more-item { min-height: 44px; }
}

/* QA 4.15 (Nacht 06.10.2026): iPhone-Safari vergrößert die Seite beim Tippen in ein Feld unter 16 px - am Handy alle Eingabefelder 16 px (Zoomen mit zwei Fingern bleibt erlaubt) */
@media (max-width: 760px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; } }

/* Entscheidung Betreiber 06.10.2026: Warnung zur nächtlichen Sicherung (nur System Admin) - schmale, ruhige, aber eindeutig rote Leiste direkt unter dem Kopf */
.backup-warning { background: #fbe4e4; color: #7d1f1f; border-bottom: 1px solid #e6b3b3; border-left: 4px solid #b42318; padding: 7px max(16px, calc((100% - 1180px) / 2)); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.backup-warning span { color: #8f3a3a; }
html[data-theme="dark"] .backup-warning { background: #3a1a1a; color: #ffc9c4; border-color: #6b2b2b; border-left-color: #e5534b; }
html[data-theme="dark"] .backup-warning span { color: #f0a8a2; }
@media print { .backup-warning { display: none; } }

/* Entscheidung Betreiber 06.10.2026: Anleitungen nicht mehr in der Fußzeile, sondern im Zahnrad-Menü unter den drei Einstellungen - ein kleiner Bereich
   "Hilfe" (Überschrift klein und gedämpft wie die Gruppenüberschriften am Handy, durch eine Linie abgesetzt), darin Links wie im Benutzermenü; ↗ = neuer Tab.
   Am Handy steht er im Bereich "Einstellungen" (Links mit 44 px Tippfläche über .nav-menu a). Dazu die Seite /guides: je Bereich eine Karte mit Knöpfen. */
.settings-help { display: grid; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px solid #e7e7e2; }
.settings-help-title { margin: 0; padding: 4px 12px 2px; color: #56635d; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.settings-help-ext { color: var(--muted); font-weight: 400; }
html[data-theme="dark"] .settings-help { border-top-color: #2b3832; }
html[data-theme="dark"] .settings-help-title { color: #98aaa1; }
@media (max-width: 760px) {
  .settings-help-title { padding: 10px 12px 2px; }
}
.guides-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.guides-topic { margin: 0; padding: 16px; }
.guides-topic h2 { margin: 0 0 12px; font-size: 18px; }
.guides-links { display: flex; flex-wrap: wrap; gap: 6px; }
.guides-links .button-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; }
/* QA 09.10.2026 (Version 4.25, U08): "German / Deutsch" hinter den Links im englischen Zugang - die Dokumente sind deutsch. Kleines gedämpftes Schild,
   bricht am Handy in die nächste Zeile statt die Breite zu sprengen; Dunkelmodus mit eigenen Farben. */
.guides-lang { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid #c9c9c2; border-radius: 999px; color: #56635d; font-size: 12px; font-weight: 700; white-space: nowrap; }
html[data-theme="dark"] .guides-lang { border-color: #3b4a43; color: #a9bbb2; }

/* Entscheidung Betreiber 06.10.2026: Schalter "Neue Nachrichten zuerst" neben der Suche der Warteliste (templates/assignments.php) und die
   zwei Blöcke der Liste ("Mit neuer Nachricht (N)" / "Alle weiteren Anfragen"). Am Handy unter der Suche in voller Breite, 44 px hoch. */
.queue-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; }
/* im Flex-Kasten fällt der Außenabstand nicht mehr mit dem der Überschrift zusammen - Abstand wie in 4.19 (28 px) */
.queue-tools > .report-search, .queue-tools > .unread-first { margin-top: 0; }
.queue-tools .report-search { flex: 1 1 420px; min-width: 0; }
.unread-first { margin: 22px 0 8px; }
.unread-first-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 14px; border: 1px solid #dce3e0; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 700; }
.unread-first-toggle:hover { border-color: #9fb3c0; }
.unread-first-switch { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #7d8c85; transition: background .15s ease; }
.unread-first-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; transition: transform .15s ease; }
.unread-first-toggle[aria-pressed="true"] .unread-first-switch { background: #0a66c2; }
.unread-first-toggle[aria-pressed="true"] .unread-first-switch::after { transform: translateX(14px); }
.unread-first-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e6eef2; color: #35607a; font-size: 12px; font-weight: 800; }
.unread-first-count.has-unread { background: #0a66c2; color: #fff; }
.queue-block-head th { padding: 10px 18px; background: #e8f0f6; color: #2f5873; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
html[data-theme="dark"] .unread-first-toggle { border-color: #34473d; background: #18211d; color: #e5ede8; }
html[data-theme="dark"] .unread-first-toggle:hover { border-color: #638f79; }
html[data-theme="dark"] .unread-first-switch { background: #6f8379; }
html[data-theme="dark"] .unread-first-toggle[aria-pressed="true"] .unread-first-switch { background: #3d8bd6; }
html[data-theme="dark"] .unread-first-count { background: #24343d; color: #b9d3e3; }
html[data-theme="dark"] .unread-first-count.has-unread { background: #0a66c2; color: #fff; }
html[data-theme="dark"] .queue-block-head th { background: #1d2a33; color: #b9d3e3; }
/* grauer Balken für den zweiten Block nur am Desktop - die Handy-Karten haben keine Balken */
@media (min-width: 821px) {
  tbody.queue-block + tbody.queue-block .queue-block-head th { background: #f1f3f2; color: #56635d; }
  html[data-theme="dark"] tbody.queue-block + tbody.queue-block .queue-block-head th { background: #1f2a25; color: #a8bbb2; }
}
@media (max-width: 760px) {
  .unread-first { width: 100%; margin: 0 0 8px; }
  .unread-first-toggle { width: 100%; justify-content: center; }
}
@media (max-width: 820px) {
  .users-table tr.queue-block-head, html[data-theme="dark"] .users-table tr.queue-block-head { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .users-table .queue-block-head th, html[data-theme="dark"] .users-table .queue-block-head th { display: block; padding: 2px 2px 0; background: transparent; }
  .users-table tbody.queue-block + tbody.queue-block { margin-top: 18px; }
}
/* Rückmeldung Betreiber 06.10.2026: am Laptop wirkte der Schalter neben der Suche zu klein - am Desktop so hoch wie die Suchkarte, größere Schrift und größerer Schalter (Handy unverändert) */
@media (min-width: 821px) {
  .queue-tools { align-items: stretch; }
  .queue-tools > .unread-first { display: flex; margin-bottom: 8px; }
  .unread-first-toggle { gap: 12px; padding: 13px 20px; font-size: 15px; }
  .unread-first-switch { width: 46px; height: 26px; }
  .unread-first-switch::after { width: 22px; height: 22px; }
  .unread-first-toggle[aria-pressed="true"] .unread-first-switch::after { transform: translateX(20px); }
  .unread-first-count { min-width: 28px; height: 28px; padding: 0 9px; font-size: 13px; }
  html[data-theme="dark"] .unread-first-toggle { box-shadow: 0 6px 22px #0003; }
}
@media (prefers-reduced-motion: reduce) { .unread-first-switch, .unread-first-switch::after { transition: none; } }

/* Wunsch Betreiber 07.10.2026 (Version 4.23): "Einem Fall zuordnen" in der Liste nicht übernommener Mails - aufgeklappt eine eigene Zeile mit Fallnummer und Knopf (auch bei 440px) */
.open-mail-assign > summary { list-style: none; cursor: pointer; }
.open-mail-assign > summary::-webkit-details-marker { display: none; }
.open-mail-assign[open] { flex-basis: 100%; }
.open-mail-assign form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 8px 0 0; }
.open-mail-assign label { flex: 1 1 180px; max-width: 280px; margin: 0; font-size: 13px; }
.open-mail-assign input { margin-top: 4px; }

/* Fehlermeldung 07.10.2026: "Wird hochgeladen …" im Dialog "Ausgabe hinzufügen" (nicht .explain - der Hinweis gilt auch in der Kompakt-Ansicht) */
.receipt-upload-status { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: #3f5249; }
html[data-theme="dark"] .receipt-upload-status { color: #c9d6cf; }

/* Wunsch Betreiber 09.10.2026 (Version 4.24): Ampel blau = zurückgestellt, Status-Kennzeichen, der eingeklappte Bereich "Zurückgestellt" ganz unten in der
   Warteliste, der Knopf an der Anfrageseite und die Ton-Schalter im Zahnrad-Menü. */
.ampel-blue { border-color: #b7cde8; background: #e3eefa; color: #1f4a7a; }
.ampel-blue i { background: #3b82c4; }
.ampel-light.ampel-blue { background: #3b82c4; }
.badge.deferred { background: #e3eefa; color: #1f4a7a; }
html[data-theme="dark"] .ampel-blue { border-color: #35516f; background: #223a52; color: #a9cdf0; }
html[data-theme="dark"] .ampel-blue i { background: #5aa0e0; }
html[data-theme="dark"] .ampel-light.ampel-blue { background: #5aa0e0; }
html[data-theme="dark"] .badge.deferred { background: #223a52; color: #a9cdf0; }
.queue-deferred.is-collapsed tr:not(.queue-block-head) { display: none !important; }
.queue-deferred-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.queue-deferred-toggle::after { content: "\25BE"; font-size: 14px; transition: transform .15s; }
.queue-deferred.is-collapsed .queue-deferred-toggle::after { transform: rotate(-90deg); }
.queue-deferred-toggle:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; }
tbody.queue-deferred .queue-block-head th { background: #e3eefa; color: #1f4a7a; }
html[data-theme="dark"] tbody.queue-deferred .queue-block-head th { background: #223a52; color: #a9cdf0; }
@media (min-width: 761px) { tbody.queue-deferred { border-top: 6px solid transparent; } }
.defer-form { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.defer-form .explain { flex: 1 1 260px; margin: 0; }
.settings-sounds { display: grid; gap: 0; padding: 4px 6px 4px 12px; }
.settings-sounds > .settings-row-label { padding: 6px 0 2px; }
.sound-form { margin: 0; }
.sound-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 40px; margin: 0; padding: 4px 6px 4px 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.sound-toggle:hover { background: #eef3f0; }
.sound-toggle:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; }
.sound-toggle:disabled { opacity: .6; cursor: progress; }
.sound-toggle[aria-checked="true"] .unread-first-switch { background: #0a66c2; }
.sound-toggle[aria-checked="true"] .unread-first-switch::after { transform: translateX(14px); }
html[data-theme="dark"] .sound-toggle:hover { background: #24342d; }
html[data-theme="dark"] .sound-toggle[aria-checked="true"] .unread-first-switch { background: #3d8bd6; }
@media (max-width: 760px) {
  .settings-sounds { padding: 0 0 4px 12px; }
  .sound-toggle { min-height: 44px; }
  .sound-toggle .unread-first-switch { width: 46px; height: 26px; }
  .sound-toggle .unread-first-switch::after { width: 22px; height: 22px; }
  .sound-toggle[aria-checked="true"] .unread-first-switch::after { transform: translateX(20px); }
}
@media (prefers-reduced-motion: reduce) { .queue-deferred-toggle::after { transition: none; } }

/* Prüfung 4.24: "Zurückgestellt" am Handy - der Balken wird zur fingergroßen Fläche (44 px), die blaue Kopfzeile gilt nur am Desktop */
@media (max-width: 820px) {
  .users-table tbody.queue-deferred .queue-block-head th, html[data-theme="dark"] .users-table tbody.queue-deferred .queue-block-head th { padding: 2px 0 0; background: transparent; color: inherit; }
  .queue-deferred-toggle { min-height: 44px; padding: 0 14px; border-radius: 10px; background: #e3eefa; color: #1f4a7a; font-weight: 800; }
  html[data-theme="dark"] .queue-deferred-toggle { background: #223a52; color: #a9cdf0; }
}
.defer-since { margin: 4px 0 0; }

/* QA 09.10.2026 (Version 4.25, U04): Trefferseite "Anfrage zum Zuordnen suchen" - eine Karte je Treffer, Knopf rechts (am Handy darunter) */
.reply-targets-page .report-search { grid-template-columns: minmax(180px, 1fr) auto auto; }
.target-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.target-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.target-item form { margin: 0; flex: none; }
.target-main { min-width: 0; display: grid; gap: 3px; }
.target-main strong { overflow-wrap: anywhere; }
.target-main span { font-size: 12.5px; overflow-wrap: anywhere; }
.target-item button { min-height: 40px; }
html[data-theme="dark"] .target-item button { background: #28352f; color: #e1eae5; }
html[data-theme="dark"] .target-item button:hover { background: #33453c; }
@media (max-width: 760px) {
  .reply-targets-page .report-search { grid-template-columns: 1fr; }
  .target-item { flex-direction: column; align-items: stretch; }
  .target-item button { width: 100%; min-height: 44px; }
}

/* QA 09.10.2026 (Version 4.25, U02): Entwurfsposition - "Bearbeiten" steht neben "Position löschen" in derselben Zeile (auch am Handy, bricht bei Platzmangel um) */
.expense-delete { gap: 8px; flex-wrap: wrap; }

/* QA 09.10.2026 (Version 4.25, U03): Prüfungsfortschritt ("3 von 8 entschieden · 5 offen") über der Positionsliste und der Grund, warum "Entscheidung finalisieren" noch gesperrt ist
   (der Grund ist KEIN .explain - er bleibt auch in der Kompakt-Ansicht sichtbar). Farben über die Theme-Variablen, damit der Dunkelmodus ohne eigene Regeln stimmt. */
.review-progress { padding: 14px 16px; margin-bottom: 12px; }
.review-progress-line { margin: 0 0 8px; }
.review-progress-bar { height: 8px; border-radius: 999px; background: var(--mint); overflow: hidden; }
.review-progress-bar span { display: block; height: 100%; background: var(--green); border-radius: 999px; }
.review-progress small { display: block; margin-top: 6px; color: var(--muted); }
.finalize-blocked { display: block; margin-top: 4px; font-weight: 400; font-size: 13px; color: var(--muted); }
html[data-theme="dark"] .review-progress-bar { background: #2b3a33; }
@media (max-width: 760px) {
  .review-submitbar { flex-wrap: wrap; gap: 10px; }
  .review-submitbar > span { flex: 1 1 100%; }
  .review-submitbar > button { width: 100%; }
}

/* QA 09.10.2026 (Version 4.25, U07): Hinweis "Nicht gesendete Eingaben gefunden" im Formular (public/assets/unsaved-guard.js) - umbrechen, Knöpfe untereinander am Handy, hell/dunkel über .alert */
.unsaved-restore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; }
.unsaved-restore > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.unsaved-restore > button { flex: 0 0 auto; }
@media (max-width: 480px) {
  .unsaved-restore > button { flex: 1 1 100%; }
}

/* Version 4.27: Feedback-Knopf im Hilfe-Menü (gleiche Optik wie die Links darüber; die Selektoren sind absichtlich spezifisch, weil für Knöpfe im Kopfbereich eigene kleinere Schriftregeln gelten) und -Dialog */
.nav-menu .settings-help .settings-help-button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: #17251f; font: inherit; font-weight: 650; line-height: inherit; text-align: left; cursor: pointer; }
.nav-menu .settings-help .settings-help-button:hover { background: #e6f0ea; }
.nav-menu .settings-help .settings-help-button:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; }
html[data-theme="dark"] .nav-menu .settings-help .settings-help-button { color: #e5ede8; }
html[data-theme="dark"] .nav-menu .settings-help .settings-help-button:hover { background: #24342d; }
html[data-theme="dark"] .nav-menu .settings-help .settings-help-button:focus-visible { outline-color: #91cfb0; }
.feedback-dialog form { display: grid; gap: 12px; }
.feedback-dialog textarea { width: 100%; min-height: 9rem; resize: vertical; box-sizing: border-box; }
.feedback-count { margin: 0; text-align: right; }
@media (max-width: 820px) { .nav-menu .settings-help .settings-help-button { min-height: 44px; padding: 0 12px; font-size: 16px; } }
/* Version 4.27: Ergebnis des Absendens als kleiner Hinweis unten im Bild (unabhaengig von der Seite) */
.feedback-notice { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(92vw, 520px); margin: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.feedback-notice .close { flex: 0 0 auto; margin: 0; }
@media (max-width: 820px) { .feedback-notice { bottom: 12px; } }
/* Version 4.30.1: schwebender Schließen-Knopf in PDF- und Beleg-Ansicht am Handy - die Leiste oben scrollt beim Lesen weg, in der App vom Startbildschirm gibt es kein Zurück */
.viewer-float-close { display: none; }
@media (max-width: 820px) {
  .viewer-float-close { display: flex; align-items: center; justify-content: center; position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45; width: 52px; height: 52px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #24342d; color: #fff; font-size: 30px; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
  .viewer-float-close:focus-visible { outline: 3px solid #91cfb0; outline-offset: 2px; }
}
/* Version 4.30.1: Leiste beim Laden/Teilen einer Datei in der App vom Startbildschirm (standalone-files.js) */
.standalone-file-bar { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #24342d; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.standalone-file-bar > span { flex: 1 1 100%; overflow-wrap: anywhere; }
.standalone-file-bar button { flex: 1 1 auto; margin: 0; }
.standalone-file-bar button.secondary { background: #fff; color: #24342d; }
/* Version 4.29: einmaliger Hinweis auf den Feedback-Knopf - ohne Skript unten im Bild, mit Skript als Dialog in der Mitte */
.feedback-hint[open]:not(:modal) { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; z-index: 60; margin: 0 auto; max-width: 32rem; }
.feedback-hint { padding: 24px; box-sizing: border-box; }   /* wie "dialog form" in app.css - der Hinweis hat kein Formular */
.feedback-hint p { margin: 0 0 14px; }
.feedback-hint .actions { flex-wrap: wrap; position: static; }   /* kurz genug: keine klebende Fußleiste (die legte sich am Handy über den Text) */
/* Version 4.29.1: Weg zum Knopf je Gerät (Kopfzeile wechselt bei 820 px vom Zahnrad zum Menü) */
.feedback-hint-where { padding: 10px 12px; border-radius: 8px; background: #e6f0ea; color: #17251f; }
html[data-theme="dark"] .feedback-hint-where { background: #24342d; color: #e5ede8; }
.feedback-hint-phone { display: none; }
@media (max-width: 820px) { .feedback-hint-desktop { display: none; } .feedback-hint-phone { display: inline; } }
.feedback-hint-where strong { margin-right: 4px; }

/* Version 4.28: Einsatz vorbei - Abrechnung fehlt (Abrechnungsseite des Büros) */
.missing-reports { margin: 0 0 18px; padding: 12px 16px; }
.missing-reports > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 750; }
.missing-reports .badge.warn { background: #fff1d6; color: #7a4b00; }
.missing-reports .badge.ok { background: #e3f1e8; color: #184c3a; }
html[data-theme="dark"] .missing-reports .badge.warn { background: #4a3510; color: #ffd58a; }
html[data-theme="dark"] .missing-reports .badge.ok { background: #1f3a2c; color: #91cfb0; }
.missing-reports .table-wrap { overflow-x: auto; }
.missing-reports-table { width: 100%; border-collapse: collapse; }
.missing-reports-table th, .missing-reports-table td { padding: 8px 10px; text-align: left; border-top: 1px solid var(--line, #e7e7e2); vertical-align: top; }
.missing-reports-table td small { display: block; color: var(--muted); }
@media (max-width: 820px) {
  .missing-reports-table thead { display: none; }
  .missing-reports-table tr { display: block; padding: 8px 0; border-top: 1px solid var(--line, #e7e7e2); }
  .missing-reports-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; }
  .missing-reports-table td::before { content: attr(data-label); color: var(--muted); font-weight: 600; }
}
/* Version 4.28: Treffer nur im Mailtext */
.search-text-hit { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-style: italic; }
/* Version 4.28: eingeklappte Signatur unter dem neuen Text einer Mail (wie das Zitat, nur dezenter) */
.reply-signature { margin-top: 6px; }
.reply-signature > summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 650; }
.reply-signature-text { white-space: pre-line; overflow-wrap: anywhere; margin-top: 6px; padding-left: 10px; border-left: 3px solid var(--line, #e7e7e2); color: var(--muted); font-size: 13px; }
.missing-reports-table a { color: var(--green, #184c3a); font-weight: 700; text-decoration: none; }
.missing-reports-table a:hover { text-decoration: underline; }
html[data-theme="dark"] .missing-reports-table a { color: #91cfb0; }
/* Version 4.30 (Paket P3a): Hinweise unter der Escort-Auswahl - Reisepass (rot, Farben von .alert.error) und "schon im Einsatz" (gelb wie die Ampel); nur Hinweise */
.escort-passport-warning, .escort-busy-warning { margin: 6px 0 10px; padding: 8px 12px; font-size: 13px; overflow-wrap: anywhere; }
.escort-busy-warning { border-color: #ecd68e; background: #fff3cd; color: #6b5110; }
html[data-theme="dark"] .escort-busy-warning { border-color: #6b5a25; background: #443a1a; color: #f0d27a; }
.escort-passport-warning[hidden], .escort-busy-warning[hidden] { display: none; }
/* Version 4.31 (QA Q30b): leer = unsichtbar (die Zeile steht immer in der Seite, damit der Bildschirmleser den Text ankündigt, sobald er erscheint) */
.escort-passport-warning:empty, .escort-busy-warning:empty { display: none; }
/* Version 4.30 (Paket P2): graue Marke "nicht (mehr) an der Anfrage" (Fallnummernliste, Abrechnung fehlt) - nur ein Hinweis, entfernt wird von Hand */
.badge.case-detached { justify-self: start; align-self: center; width: fit-content; background: #eceeed; color: #55605a; font-size: 11px; white-space: normal; }
html[data-theme="dark"] .badge.case-detached { background: #2c3631; color: #b3bfb9; }
.case-c-people .badge.case-detached { margin-top: 3px; }
.missing-reports-table .badge.case-detached { margin-top: 3px; }
.missing-reports-table tr.missing-detached td { color: var(--muted); }
.case-add-participant .case-add-hint { margin: 0; padding: 0 20px 12px; font-size: 13px; color: var(--muted); }
.case-add-participant .case-add-hint a { color: var(--green); font-weight: 700; }
html[data-theme="dark"] .case-add-participant .case-add-hint a { color: #91cfb0; }
/* Version 4.30 (Paket P1a): gelbe Hinweise oben in der Abrechnung - "Hinweis der Prüfung" nach dem Zurücknehmen der Genehmigung (Zeilenumbrüche bleiben) und in der
   Prüfansicht "Zugang entfernt"; Karte "Genehmigung zurücknehmen" mit freiwilligem Feld in eigener Zeile (bricht am Handy um); Sprungziel und Zeile "Alle Positionen
   entschieden" am Abschluss-Knopf; Link "Einsatz laut Anfrage" in der Detailkarte */
.review-hint { border-color: #ecd68e; background: #fff3cd; color: #6b5110; overflow-wrap: anywhere; }
.review-hint.reopen-note { white-space: pre-line; }
html[data-theme="dark"] .review-hint { border-color: #6b5a25; background: #443a1a; color: #f0d27a; }
.reopen-report { grid-template-columns: auto minmax(0, 1fr); }
.reopen-report form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.reopen-note-field { flex: 1 1 260px; min-width: 0; font-size: 13px; font-weight: 600; }
.reopen-note-field textarea { min-height: 0; resize: vertical; font-weight: 400; }
#finalize { scroll-margin-top: 90px; }
.finalize-ready { display: block; margin-top: 4px; font-weight: 400; font-size: 13px; color: var(--green); }
html[data-theme="dark"] .finalize-ready { color: #91cfb0; }
.mission-per-request a { color: var(--green, #184c3a); font-weight: 700; }
html[data-theme="dark"] .mission-per-request a { color: #91cfb0; }
/* Version 4.30 (Paket P1b): Erfassung am Handy - Hinweis am Betragsfeld ("Bitte so schreiben: …", Farben wie .receipt-validation), Zahl und Summe in der
   Einreichen-Leiste (eigene Zeile über "Alles vollständig?", Knopf bricht am Handy darunter um) und der Knopf "Nächste Ausgabe erfassen" in der Erfolgsmeldung */
.amount-format-hint { display: block; margin-top: 4px; color: #8a3d3d; font-size: 12px; font-weight: 700; }
.amount-format-hint[hidden] { display: none; }
html[data-theme="dark"] .amount-format-hint { color: #efaaaa; }
.submitbar .submit-summary { display: block; }
.submitbar:not(.review-submitbar) { flex-wrap: wrap; gap: 10px; }
.alert .next-expense { margin-left: 8px; padding: 6px 12px; font-size: 13px; vertical-align: middle; }
@media (max-width: 820px) {
  .alert .next-expense { display: block; margin: 8px 0 0; }
}
/* Version 4.30 (Paket P4, Idee 11): Warteliste - der Betreff öffnet die Anfrage (nur der Text ist Link); am Handy (Karten bis 820 px) rückt die Status-Zelle
   mit der Ampel direkt unter den Absender, ein leeres "Bearbeitet durch: —" fällt weg. Der Desktop (Tabelle, feste Spaltenbreiten) bleibt unverändert. */
.queue-subject-link { color: inherit; text-decoration: underline; text-decoration-color: #b9c8c0; text-underline-offset: 3px; }
.queue-subject-link:hover { color: var(--green, #184c3a); text-decoration-color: currentColor; }
.queue-subject-link:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; border-radius: 3px; }
html[data-theme="dark"] .queue-subject-link { text-decoration-color: #4f6359; }
html[data-theme="dark"] .queue-subject-link:hover { color: #91cfb0; }
@media (max-width: 820px) {
  .users-table .assignment-queue-table tr:not(.queue-block-head) { display: flex; flex-direction: column; }
  .users-table .assignment-queue-table td { order: 3; }
  .users-table .assignment-queue-table td:nth-child(1) { order: 1; }
  .users-table .assignment-queue-table td:nth-child(6) { order: 2; }
  .users-table .assignment-queue-table td.queue-processed-empty { display: none; }
}
/* Version 4.30 (Paket P4, Idee 8): "Töne: einmal klicken" unter dem Kopfbereich, solange ein eingeschalteter Ton auf dieser Seite noch nicht
   freigeschaltet ist (public/assets/live-badges.js) - verschwindet beim ersten Klick bzw. Tastendruck.
   Nachprüfung P4: liegt ÜBER dem Inhalt (position: absolute an seinem Platz unter dem Kopfbereich), statt ihn zu verschieben - sonst rutschte beim
   Erscheinen nach 2 s bzw. beim Verschwinden im Klick alles um eine Zeile, und der erste Klick der Seite ging ins Leere bzw. am Handy auf das Element darunter. */
.sound-unlock-hint { position: absolute; left: 50%; z-index: 2; width: max-content; max-width: calc(100vw - 32px); margin: 8px 0 0; padding: 6px 14px; border: 1px solid #e3c98a; border-radius: 999px; background: #fff6df; box-shadow: 0 4px 14px #24342d24; color: #6b4e00; font-size: 13px; font-weight: 700; cursor: pointer; transform: translateX(-50%); }
.sound-unlock-hint:focus-visible { outline: 3px solid #184c3a; outline-offset: 2px; }
html[data-theme="dark"] .sound-unlock-hint { border-color: #6d5a2c; background: #2e2716; color: #f0d58f; }
/* Version 4.30 (Paket P7): Ansprechpartner (ALERT_CONTACT) im roten Kasten "Abruf gestört" der Warteliste - eine eigene Zeile, damit man ihn sofort findet; eine lange E-Mail-Adresse bricht am Handy um (Nachprüfung) */
.mail-health .mail-health-contact { display: block; margin-top: 4px; overflow-wrap: anywhere; }
/* Version 4.31 (Paket C, S03/S13): Fallnummernliste - zuletzt angemeldet, Marken "gesperrt"/"abgelaufen" und die Knöpfe Sofort sperren / Sperre aufheben / Verlängern
   (je Zugang unter dem Namen, für die ganze Fallnummer im Fuß des Panels). Gilt am Desktop und am Handy gleich (umbrechende Zeile, keine festen Breiten). */
.case-access-meta { color: var(--muted, #5a6962); font-weight: 600; font-size: 12px; }
.case-access-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.badge.case-access-badge { width: fit-content; font-size: 11px; white-space: normal; }
.badge.case-access-expired { background: #fff1d6; color: #7a4b00; }
html[data-theme="dark"] .badge.case-access-expired { background: #4a3510; color: #ffd58a; }
.case-access-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.case-access-actions form, .case-panel-foot form { margin: 0; }
.case-panel-foot { flex-wrap: wrap; gap: 8px; }
.case-access-button { padding: 6px 10px; font-size: 12px; box-shadow: none; }
.case-access-button.danger { border: 1px solid #e3c7c7; background: #fffafa; color: #9b4949; }
.case-access-button.neutral { border: 1px solid #bdd0c6; background: #fff; color: #184c3a; }
html[data-theme="dark"] .case-access-button.danger { border-color: #714949; background: #251b1b; color: #f1a5a5; }
html[data-theme="dark"] .case-access-button.neutral { border-color: #4d6a5b; background: #1b2520; color: #b9d8c8; }
@media (max-width: 820px) {
  .case-panel-foot .case-access-button { width: 100%; }
  .case-panel-foot form { flex: 1 1 100%; }
}
/* Version 4.31 (N08): "+ n grau" neben der Zahl der Karte "Einsatz vorbei - Abrechnung fehlt" (die grauen Zeilen zählen nicht in der Zahl) */
.missing-reports .missing-reports-grey { color: var(--muted, #5a6962); font-weight: 600; }
/* Version 4.31 (Paket D, S05): roter Hinweis an einer Position, deren Beleg samt Betrag und Datum schon in einer anderen Abrechnung derselben Fallnummer steht
   (nur Prüfansicht). Nur ein Hinweis - bricht um und braucht keine feste Breite, gilt am Desktop und am Handy gleich. */
.expense-main .cross-duplicate-hint { margin: 8px 0 0; padding: 6px 10px; border: 1px solid #e8bcbc; border-radius: 8px; background: #f8dede; color: #8b2c2c; font-size: 13px; line-height: 1.4; }
.expense-main .cross-duplicate-hint a { color: inherit; font-weight: 700; text-decoration: underline; }
html[data-theme="dark"] .expense-main .cross-duplicate-hint { border-color: #704747; background: #351f1f; color: #f0b2b2; }

/* Version 4.31 (QA N10): Tippflächen am Handy - die Falt-Zeilen "Signatur anzeigen", "Signatur ansehen (wie ...)" und "Legende" waren nur 18-21 px hoch (neben dem Antworten-Knopf kaum zu treffen); jetzt mindestens 44 px, die Auf-/Zu-Markierung bleibt */
@media (max-width: 820px) {
  .reply-signature > summary, .handover-signature > summary, .assignment-signature-preview > summary { padding: 14px 0; }
  .ampel-legend > summary { min-height: 44px; }
}
/* Version 4.31 (QA N12): der Doppelpunkt zwischen Stunde und Minute im dunklen Modus (das feste Blau hatte nur 2,75:1) - wie das Symbol daneben */
html[data-theme="dark"] .time-picker-separator { color: #9ec9df; }

/* Version 4.31.1 (Verpflegungs-Kasten am Handy): Der Kasten blieb im Kompaktmodus leer, weil .explain dort ausgeblendet wird - die Hinweise (Jahreswechsel, kein Satz, Tabelle fehlt) und die Voraussetzungen sind der Inhalt des Kastens und heißen deshalb nicht mehr .explain. Das Land steht im Kompaktmodus als eigene Zeile da (der lange Einleitungssatz ist dort aus). Am Handy ist die Kopfzeile der Tabelle aus - jeder Betrag bringt seine Beschriftung selbst mit. */
.meal-country { display: none; margin: 0 0 4px; color: #304e5e; }
html[data-compact="1"] .meal-country { display: block; }
.meal-text { margin: 8px 0 0; }
@media (max-width: 760px) {
  .meal-row strong[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; text-align: right; }
  .meal-row strong[data-label]::before { content: attr(data-label); flex: 1 1 auto; color: #536873; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; }
}
html[data-theme="dark"] .meal-country { color: #b7cbd4; }
html[data-theme="dark"] .meal-row strong[data-label]::before { color: #b7cbd4; }

/* Version 4.31.3 (Rückmeldung Betreiber 14.10.2026): Annehmen/Ablehnen am offenen Folgeauftrag - zwei gleich hohe Knöpfe unter dem Hinweis, am Handy mindestens 44 px */
.follow-up-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 14px; }
.follow-up-actions form { margin: 0; }
.follow-up-actions .button-link, .follow-up-actions button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 820px) {
  .follow-up-actions > * { flex: 1 1 140px; }
  .follow-up-actions form button { width: 100%; }
}
/* Version 4.32 (Paket B): von uns gesendete Mails in der Mail-Liste der Anfrage (templates/assignment-sent-card.php) - deutlich "Gesendet" (blaue Randfarbe und Marke
   mit Pfeil, Farben wie die Marke "ungelesen"), sonst wie die Karte einer eingegangenen Mail; der Schalter "Gesendete Mails (n) ausblenden" blendet nur sie aus.
   Am Handy (bis 820 px) bricht alles um, Schalter und Ansehen-Link sind mindestens 44 px hoch; am Desktop steht der Schalter rechts über der Liste. */
.sent-mails-bar { margin: 10px 0 0; }
.sent-mails-toggle { font-size: 13px; }
.sent-mails-toggle[hidden] { display: none; }
.assignment-replies.sent-mails-hidden .sent-card { display: none; }
.assignment-replies .assignment-reply.reply-card.sent-card { border-left-color: #4f7d99; background: #f4f8fa; }
.badge.sent-badge { background: #e6eef2; color: #35607a; vertical-align: 1px; }
.sent-card-kind { overflow-wrap: anywhere; }
.sent-card-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.sent-card-meta > span { min-width: 0; }
.sent-card-attachments .link { font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sent-card-attachments .link:hover { text-decoration: underline; }
html[data-theme="dark"] .assignment-replies .assignment-reply.reply-card.sent-card { border-left-color: #7fb0cf; background: #131c21; }
html[data-theme="dark"] .badge.sent-badge { background: #22343f; color: #a9cde3; }
@media (max-width: 820px) {
  .sent-mails-toggle { width: 100%; min-height: 44px; }
  .sent-card-attachments .link { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 821px) {
  .sent-mails-bar { display: flex; justify-content: flex-end; margin-top: 0; }
}
/* Version 4.32.2: PDF-Betrachter (templates/pdf-viewer.php, templates/receipt.php) - bei einer langen Dokumentenliste blieb unter der Liste
   nur ein schmaler Streifen für das PDF (feste Bildschirmhöhe, die Liste nahm den Platz weg; am Handy 161 px). Jetzt bleibt die Liste ganz
   sichtbar, die PDF-Fläche ist mindestens 60 % (Handy bis 820 px: 75 %) der Bildschirmhöhe hoch und die Seite wird nach unten länger. Bei
   kurzer Liste füllt die PDF-Fläche wie bisher den Rest des Bildschirms (flex-grow) - am Computer bleibt es dann genau wie vorher.
   svh = sichtbare Höhe am Handy bei eingeblendeter Adressleiste (bleibt beim Scrollen stabil, dvh würde springen), vh als Rückfall. */
.receipt-viewer { display: flex; flex-direction: column; height: auto; min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); }
.receipt-viewer > * { flex: 0 0 auto; }
.receipt-viewer > .receipt-stage { flex: 1 0 auto; height: 60vh; height: 60svh; min-height: 320px; }
@media (max-width: 820px) {
  .receipt-viewer > .receipt-stage { height: 75vh; height: 75svh; }
}
@media (max-width: 760px) {
  .receipt-viewer { min-height: calc(100vh - 86px); min-height: calc(100svh - 86px); }
}
/* Version 4.33: Hinweis "Sieht nicht nach einem Auftrag aus" an einer neuen Anfrage (Fit to Fly, MEDIF, Storno, ...) und das Kennzeichen in der Warteliste */
.not-order-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.not-order-hint .button-link { margin-left: auto; }
.badge.not-order-badge { background: #fbeed7; color: #7a4f0b; vertical-align: 1px; }
html[data-theme="dark"] .badge.not-order-badge { background: #3a2f18; color: #f1d39a; }
@media (max-width: 820px) {
  .not-order-hint .button-link { margin-left: 0; width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Entscheidung Betreiber 15.10.2026: System Admin sieht alle Knöpfe und Formulare wie Disponent/Admin/Lead-Admin - wo ihm die Aktion verboten ist,
   ausgegraut ohne Funktion (App\SysadminLock). Ein ganzer Block steht in <fieldset class="sysadmin-locked" disabled> (ohne Rahmen und Abstände des
   Browsers, das Layout bleibt), einzelne Bedienelemente tragen disabled + data-sysadmin-locked; rote Knöpfe werden grau. Gilt nur für System Admin. */
.sysadmin-locked { border: 0; padding: 0; margin: 0; min-width: 0; }
.sysadmin-locked :is(input, select, textarea):disabled, [data-sysadmin-locked]:disabled { opacity: .55; cursor: not-allowed; }
.sysadmin-locked button:disabled, button[data-sysadmin-locked] { filter: grayscale(1); }   /* alle gesperrten Knöpfe grau - auch die roten Entfernen-Knöpfe der Fallnummern */
.sysadmin-locked-hint { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
small.sysadmin-locked-hint { display: inline; margin: 0 0 0 6px; }
.more-menu-panel .sysadmin-locked-hint { margin: 0; padding: 2px 8px 0; }
.case-panel > .sysadmin-locked-hint { margin: 4px 0 6px; }
.review-submitbar small.sysadmin-locked-hint, .not-order-hint small.sysadmin-locked-hint { display: block; margin: 4px 0 0; }
html[data-theme="dark"] .sysadmin-locked-hint { color: #a5b3ac; }