/*---------------------
DEV OVERIDES
This CSS Module is specifically for styles that have been developed during the HPO system development. They need to be merged into more general styles furtehr up eventually.
-----------------------*/

/* HPO proto: incremental styles only for currently used templates */

button[hidden],
.btn[hidden] {
  display: none;
}

.set-name-field-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.set-name-field-wrap #set-name-input {
  width: 100%;
  padding-right: 1.8rem;
}
.set-name-field-wrap #set-name-clear {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0 0.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-gray-cool-400, #888);
  font-size: 1rem;
}

.hpo-shell {
  background: var(--color-bckg-desktop-400);
}

.hpo-header {
  border-bottom: 1px solid var(--color-gray-cool-200);
  background: var(--color-base-white);
  margin-bottom: 1.5rem;
}

.hpo-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.hpo-kicker {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.hpo-module-title {
  font-size: var(--type-size-600);
  font-weight: var(--type-weight-600);
  line-height: var(--type-leading-100);
  letter-spacing: var(--type-tracking-100);
}

.hpo-db-state {
  font-size: 0.9rem;
}

.hpo-db-state-warn {
  color: var(--color-base-100);
}

.hpo-top-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.hpo-top-nav a {
  /* base styling via .btn + .btn-400 */
}

.hpo-footer {
  margin-top: var(--layout-space-400);
  padding-block: var(--layout-space-300);
  border-top: var(--border-width-100) solid var(--color-gray-cool-200);
}

.hpo-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-space-200);
}

.hpo-footer p {
  margin: 0;
  color: var(--color-gray-cool-500);
  font-size: var(--type-size-100);
}

.hpo-footer-admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space-100);
}

.hpo-footer-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--layout-space-200);
  color: var(--color-gray-cool-500);
  font-size: var(--type-size-100);
}

.hpo-footer-session form {
  margin: 0;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--layout-space-400);
}

.login-panel {
  width: min(100%, 26rem);
}

.login-panel h1 {
  margin-top: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space-300);
}

.hpo-main {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.hpo-card {
  border-color: var(--color-gray-cool-200);
  background: var(--color-base-white);
}

.hpo-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(10rem, 1fr));
  gap: 0.8rem;
}

.hpo-stat-card p {
  margin-bottom: 0.35rem;
}

.hpo-stat-label {
  font-size: 0.85rem;
}

.hpo-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.hpo-stat-meta {
  font-size: 0.85rem;
}

.tile-placeholder {
  border-style: dashed;
  border-color: var(--color-gray-cool-300);
  background: var(--color-gray-cool-050);
  color: var(--color-gray-cool-600);
  min-height: 7rem;
  justify-content: center;
}

.hpo-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

#search-form input {
  min-width: 16rem;
}

.hpo-count {
  font-size: 0.9rem;
}

.hpo-table-wrap {
  overflow-x: auto;
}

.hpo-row-actions {
  display: flex;
  gap: 0.35rem;
}

.hpo-dev-panel {
  border-left: 0.3rem solid var(--color-flag-dev-400);
}

.hpo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(13rem, 1fr));
  gap: 0.9rem;
}

@media (orientation: landscape) {
  .hpo-form-grid--3 {
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
  }

  .hpo-form-grid--5 {
    grid-template-columns: minmax(9rem, 1fr) minmax(12rem, 1.4fr) minmax(8rem, 0.8fr) minmax(10rem, 1fr) minmax(5rem, 0.5fr);
  }
}

.hpo-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: var(--layout-space-400);
  padding-top: 0.25rem;
}

/* Backup forms are vertically stacked rather than grid-based. Keep their
   field-to-field and final-action spacing explicit without changing the
   global form-group rhythm used by existing screens. */
.hpo-backup-form > .form-group + .form-group {
  margin-top: var(--layout-space-400);
}

.hpo-backup-form > .hpo-form-actions {
  margin-bottom: var(--layout-space-400);
}

.hpo-admin-user-create {
  border: 1px solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-300);
  padding: var(--layout-space-300);
  background: var(--color-gray-cool-050);
}

.hpo-admin-user-active,
.hpo-admin-user-checkbox {
  display: flex;
  align-items: center;
}

.hpo-admin-user-active label,
.hpo-admin-user-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--layout-space-100);
  margin: 0;
}

.hpo-table-wrap input,
.hpo-table-wrap select {
  min-width: 8rem;
}

.hpo-table-wrap input[type="checkbox"] {
  min-width: auto;
}

.hpo-alert {
  border: 1px solid var(--color-gray-cool-300);
  border-radius: 0.5rem;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.8rem;
  background: var(--color-base-white);
}

.hpo-alert ul {
  margin: 0.4rem 0 0 1.1rem;
}

.hpo-alert-success {
  border-color: var(--color-primary-300);
  background: var(--color-primary-100);
}

.hpo-alert-danger {
  border-color: var(--color-base-200);
  background: color-mix(in srgb, var(--color-base-100) 8%, white);
}

.panel-400 {
  border: 1px solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-400);
  background: var(--color-base-white);
  padding: var(--layout-space-400);
}

.patient-record-panel {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space-400);
}

.patient-record-panel > .patient-record-panel-header,
.patient-record-panel > p {
  margin-bottom: 0;
}

.treatment-notes-card {
  padding: 1rem;
}

.treatment-notes-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-gray-cool-200);
  padding-bottom: 0.75rem;
  margin-bottom: 0.9rem;
}

.treatment-notes-meta {
  font-size: 0.9rem;
}

.treatment-notes-status {
  border: 1px solid var(--color-primary-300);
  background: var(--color-primary-100);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
}

.treatment-notes-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.treatment-notes-section {
  border: 1px solid var(--color-gray-cool-200);
  background: var(--color-base-white);
  border-radius: 0.5rem;
  padding: 0.8rem;
}

.treatment-notes-hint {
  font-size: 0.9rem;
}

.treatment-notes-section textarea {
  min-height: 9rem;
  width: 100%;
  resize: vertical;
}

.treatment-notes-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

:root {
  --color-overlay-white-720: rgba(255, 255, 255, 0.72);
}

.disabled-reason {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.disabled-reason[hidden] {
  display: none;
}

.disabled-reason > .btn-400 {
  padding-right: 2.45rem;
}

.disabled-reason-trigger {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  z-index: 1;
  transform: translateY(-50%);
}

.disabled-reason > .btn-400:not(:disabled) + .disabled-reason-trigger {
  display: none;
}

.disabled-reason > .btn-400:disabled + .disabled-reason-trigger {
  display: inline-flex;
}

.disabled-reason-bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.45rem);
  z-index: var(--z-popover);
  width: max-content;
  max-width: 16rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-gray-cool-300);
  border-radius: var(--layout-radius-200);
  background: var(--color-base-white);
  color: var(--color-gray-cool-600);
  box-shadow: var(--shadow-200);
  font-size: var(--type-size-200);
  line-height: var(--type-leading-300);
}

.patient-record-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.patient-record-meta {
  font-size: 0.9rem;
}

.patient-record-submeta {
  font-size: 0.95rem;
  color: var(--color-gray-cool-500);
  margin-bottom: 0;
}

.treatment-top-cards {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.treatment-top-card p:last-child {
  margin-bottom: 0;
}

.treatment-top-card-patient .patient-record-meta {
  padding-left: calc(0.6rem + 1px);
}

.treatment-top-card-patient h4 {
  padding-left: calc(0.6rem + 1px);
}

.treatment-sequence-number {
  font-size: var(--type-size-700);
  font-weight: var(--type-weight-600);
  line-height: var(--type-leading-100);
  margin-bottom: 0.45rem;
}

.patient-record-actions {
  display: flex;
  align-items: center;
  gap: var(--layout-space-200);
  margin-top: var(--layout-space-400);
}

.patient-record-edit-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.patient-record-edit-actions [hidden] {
  display: none;
}

.patient-record-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.patient-record-panel-header--stack {
  align-items: flex-start;
  margin-bottom: 1rem;
}

.patient-record-panel-header h3 {
  margin-bottom: 0;
}

.patient-record-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.patient-record-segment {
  /* base styling via .btn + .btn-400 */
}

.patient-record-segment.is-active {
  border-color: var(--color-primary-300);
  background: var(--color-primary-100);
}

.patient-record-list {
  margin-top: 0.2rem;
}

.patient-record-master-panel {
  margin-bottom: 0;
}

.patient-record-workflow-widgets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.patient-record-workflow-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.patient-record-workflow-card h4 {
  margin-bottom: 0;
}

.patient-record-inline-status {
  font-size: var(--type-size-200);
  color: var(--color-primary-500);
  white-space: nowrap;
}

.patient-master-sections {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0.8rem;
}

.patient-master-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.patient-record-empty {
  border: 1px dashed var(--color-gray-cool-300);
  border-radius: var(--layout-radius-200);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-base-white);
}

@media (max-width: 64rem) {
  .treatment-top-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hpo-stats-grid {
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
  }

  .patient-phone-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Global HPO fixes ─────────────────────────────────── */

html { scrollbar-gutter: stable; }

/* margin: 0 auto auf .container überschreibt align-self: stretch im Flex-Kontext */
.hpo-main > .container {
  width: 100%;
  box-sizing: border-box;
}

/* ── Dashboard ────────────────────────────────────────── */

.dash-layout {
  display: grid;
  gap: 1rem;
  padding: 1rem 0;
  grid-template-columns: 1fr;
  grid-template-areas:
    "heute"
    "woche"
    "sidebar";
}

@media (orientation: landscape) {
  .dash-layout {
    grid-template-columns: 1fr 1fr 220px;
    grid-template-rows: 1fr;
    grid-template-areas: "heute woche sidebar";
  }
}

.dash-heute   { grid-area: heute; }
.dash-woche   { grid-area: woche; }
.dash-sidebar { grid-area: sidebar; }

.dash-widget {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-gray-cool-200, #e2e2e2);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.dash-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-gray-cool-100, #f0f0f0);
  flex-shrink: 0;
}

.dash-widget-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-cool-500, #666);
}

.dash-widget-count {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.dash-treatment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.dash-treatment-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  background: var(--color-gray-cool-50, #fafafa);
  font-size: 0.875rem;
}

.dash-treatment-time {
  font-size: 0.8rem;
  color: var(--color-gray-cool-500, #666);
  font-variant-numeric: tabular-nums;
}

.dash-treatment-name {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}

.dash-treatment-action {
  justify-self: end;
}

/* Option 1: Pille immer sichtbar */
.dash-patient-pill {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--color-gray-cool-300);
  background: var(--color-gray-cool-100);
  transition: background 0.12s, border-color 0.12s;
  width: fit-content;
}

.dash-patient-pill:hover {
  background: var(--color-gray-cool-500);
  border-color: var(--color-gray-cool-500);
  color: var(--color-base-white);
}

/* Option 2: Pille nur auf Hover */
.dash-patient-pill-hover {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.12s, border-color 0.12s;
  width: fit-content;
}

.dash-patient-pill-hover:hover {
  background: var(--color-gray-cool-500);
  border-color: var(--color-gray-cool-500);
  color: var(--color-base-white);
}

.dash-week-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
  flex: 1;
}

.dash-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.dash-week-day-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-cool-400, #999);
}

.dash-week-day.today .dash-week-day-label {
  color: var(--color-primary-600, #3d52d5);
}

.dash-week-day-slots {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dash-week-slot {
  width: 100%;
  padding: 0.25rem 0.3rem;
  border-radius: 3px;
  background: var(--color-primary-100, #e8edff);
  font-size: 0.68rem;
  color: var(--color-primary-800, #1a1a2e);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-week-day.today .dash-week-slot {
  background: var(--color-primary-500, #4f63e7);
  color: #fff;
}

.dash-week-day-count {
  font-size: 0.7rem;
  color: var(--color-gray-cool-400, #999);
}

.dash-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dash-actions button {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}

.dash-google-calendar { margin: 0 0 1rem; gap: 0.75rem; }
.dash-calendar-header, .dash-calendar-navigation, .dash-calendar-tabs { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.dash-calendar-header { justify-content: space-between; }
.dash-calendar-header h2 { margin: 0.2rem 0 0; font-size: 1.15rem; }
.dash-calendar-navigation { justify-content: space-between; }
.dash-calendar-tabs .active { background: var(--color-primary-500, #4f63e7); color: #fff; }
.dash-google-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 0.45rem; overflow-x: auto; padding-bottom: 0.25rem; }
.dash-google-calendar-day { min-height: 10rem; border: 1px solid var(--color-gray-cool-200, #e2e2e2); border-radius: 4px; padding: 0.45rem; background: #fff; }
.dash-google-calendar-day.today { border-color: var(--color-primary-500, #4f63e7); box-shadow: inset 0 0 0 1px var(--color-primary-500, #4f63e7); }
.dash-google-calendar-day.out-of-month { opacity: 0.55; }
.dash-google-calendar-day header { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--color-gray-cool-500,#666); margin-bottom:0.4rem; }
.dash-google-event { margin:0 0 0.3rem; padding:0.3rem; border-radius:3px; background:var(--color-primary-100,#e8edff); font-size:0.75rem; line-height:1.25; overflow-wrap:anywhere; }
.dash-google-event span { font-weight:600; white-space:nowrap; }
.dash-google-more { font-size:0.75rem; color:var(--color-gray-cool-500,#666); }
.dash-google-calendar-grid.month .dash-google-calendar-day { min-height: 7.5rem; }

/* ── Termin / Treatment ───────────────────────────────── */

.tcm-grid {
  align-items: stretch;
}

.tcm-grid .form-group {
  display: flex;
  flex-direction: column;
}

.tcm-grid textarea {
  min-height: 8rem;
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-cool-400) transparent;
}

.tcm-grid .tcm-summary {
  box-shadow: 0 0 0 2px var(--color-gray-cool-500);
}

.tcm-grid textarea::-webkit-scrollbar {
  width: 0.725rem;
}

.tcm-grid textarea::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.3rem 0;
}

.tcm-grid textarea::-webkit-scrollbar-thumb {
  background: var(--color-gray-cool-400);
  border-radius: 999px;
  border: 2px solid var(--color-base-white);
}

.icd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.icd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--color-primary-300);
  background: var(--color-primary-100);
  font-size: 0.8rem;
}

.icd-chip code { font-weight: 600; }

.icd-chip button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0.5;
  font-size: 0.7rem;
  line-height: 1;
}

.icd-chip button:hover { opacity: 1; }

.service-table { font-size: 0.9rem; }

.service-table th {
  background: var(--color-gray-cool-100);
  font-size: 0.8rem;
  white-space: nowrap;
}

.service-table td { vertical-align: middle; }

.service-table input {
  margin: 0;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  width: 100%;
}

.service-table .col-code  { width: 5rem; }
.service-table .col-price,
.service-table .col-fak,
.service-table .col-anz   { width: 4.5rem; }
.service-table .col-sum   { width: 5.5rem; text-align: right; }
.service-table .col-del   { width: 2rem; text-align: center; }
.service-table .num       { text-align: right; }

.service-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6rem;
}

.treatment-clinical-sidecars {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 0.9rem;
  align-items: start;
  margin-top: 0.9rem;
}

.treatment-clinical-sidecars--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.treatment-clinical-sidecar {
  min-width: 0;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.7rem;
}

.treatment-notes-form > .accordion-200 {
  overflow: visible;
}

.treatment-notes-form > .accordion-200 > summary {
  border-radius: calc(var(--layout-radius-400) - 1px);
}

.treatment-notes-form > .accordion-200[open] > summary {
  border-radius: calc(var(--layout-radius-400) - 1px) calc(var(--layout-radius-400) - 1px) 0 0;
}

.treatment-clinical-sidecar [data-icd-search] {
  max-width: none !important;
}

.treatment-diagnosis-row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}

.treatment-diagnosis-date {
  min-width: 0;
}

.treatment-diagnosis-search {
  min-width: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.treatment-diagnosis-row > .treatment-icd-results-wrap {
  grid-column: 1 / -1;
}

.treatment-measured-values {
  grid-column: span 1;
}

.treatment-icd-results-wrap {
  position: relative;
}

.treatment-icd-results-wrap[hidden] {
  display: none;
}

.treatment-icd-listbox {
  position: absolute;
  z-index: 30;
  top: 0.25rem;
  left: 0;
  right: auto;
  width: 38rem;
  max-width: calc(100vw - 4rem);
  max-height: 16rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  background: var(--color-base-white);
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  border-radius: var(--layout-radius-200);
  box-shadow: var(--shadow-400);
}

.treatment-icd-results-wrap--diagnosis .treatment-icd-listbox,
.treatment-icd-results-wrap--diagnosis .treatment-icd-empty {
  width: min(58rem, calc(100vw - 4rem));
}

.treatment-icd-option {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.7rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 0;
  border-radius: var(--layout-radius-100);
  background: transparent;
  color: var(--color-gray-cool-700);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.treatment-icd-option:hover,
.treatment-icd-option:focus-visible {
  background: var(--color-primary-100);
  outline: none;
}

.treatment-icd-option code {
  font-weight: var(--type-weight-600);
  white-space: nowrap;
}

.treatment-icd-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.treatment-icd-empty {
  position: absolute;
  z-index: 30;
  top: 0.25rem;
  left: 0;
  right: auto;
  width: 38rem;
  max-width: calc(100vw - 4rem);
  margin: 0;
  padding: 0.55rem 0.65rem;
  background: var(--color-base-white);
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  border-radius: var(--layout-radius-200);
  box-shadow: var(--shadow-400);
}

.treatment-measured-values {
  padding: 0.7rem;
}

.measured-values-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.measured-value-row {
  display: grid;
  grid-template-columns: 1fr 6.5rem;
  gap: 0.55rem;
  align-items: center;
}

.measured-value-row label {
  margin-bottom: 0;
}

.measured-value-row input {
  text-align: right;
}

.treatment-trend-card {
  padding: 0.7rem;
}

.treatment-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.treatment-trend-head h5,
.treatment-trend-head small {
  margin-bottom: 0;
}

.treatment-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.55rem;
}

.trend-key {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: var(--type-size-100);
  letter-spacing: var(--type-tracking-500);
  border: 1px solid var(--color-gray-cool-300);
  background: var(--color-gray-cool-100);
}

.trend-key-bz   { color: var(--color-base-400); }
.trend-key-rrs  { color: var(--color-primary-600); }
.trend-key-rrd  { color: var(--color-primary-400); }
.trend-key-puls { color: var(--color-accent-700); }
.trend-key-spo2 { color: var(--color-secondary-600); }

.treatment-trend-chart {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.5rem;
}

.trend-axis,
.trend-grid {
  stroke-linecap: round;
}

.trend-axis {
  stroke: var(--color-gray-cool-300);
  stroke-width: 1.2;
}

.trend-grid {
  stroke: var(--color-gray-cool-200);
  stroke-width: 1;
}

.trend-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line-bz   { stroke: var(--color-base-400); }
.trend-line-rrs  { stroke: var(--color-primary-600); }
.trend-line-rrd  { stroke: var(--color-primary-400); }
.trend-line-puls { stroke: var(--color-accent-700); }
.trend-line-spo2 { stroke: var(--color-secondary-600); }

.trend-dot-bz   { fill: var(--color-base-400); }
.trend-dot-rrs  { fill: var(--color-primary-600); }
.trend-dot-rrd  { fill: var(--color-primary-400); }
.trend-dot-puls { fill: var(--color-accent-700); }
.trend-dot-spo2 { fill: var(--color-secondary-600); }

.treatment-trend-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  font-size: var(--type-size-200);
}

.treatment-trend-foot span {
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--color-gray-cool-100);
}

.grand-total { font-size: 0.95rem; }
.grand-total strong { font-size: 1.1rem; }

/* ── Responsive ───────────────────────────────────────── */

@media (orientation: landscape) {
  .treatment-clinical-sidecars--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 42rem) {
  .hpo-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .treatment-top-cards {
    grid-template-columns: 1fr;
  }

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

  .hpo-stats-grid {
    grid-template-columns: 1fr;
  }

  .treatment-notes-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .treatment-notes-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .patient-record-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .treatment-clinical-sidecars {
    grid-template-columns: 1fr;
  }

  .treatment-clinical-sidecars--3 {
    grid-template-columns: 1fr;
  }

  .treatment-diagnosis-row {
    grid-template-columns: 1fr;
  }

  .patient-master-sections {
    grid-template-columns: 1fr;
  }

  .patient-record-workflow-widgets {
    grid-template-columns: 1fr;
  }

  .patient-record-empty {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =============================================================================
   FROM: 10-dev-qab-300.css
   Merged below — no blocks reorganised or merged, content appended as-is.
   ============================================================================= */

/*---------------------
DEV QAB 310
This CSS Module is for temp and work-in-progress styles to be incorporated
into the QAB 310 main styles (01-08), but are still in development. During
development of the system in a standalone way (i.e. not in direct context
with the HPO system) all new ideas proposed by AI agents must only be
written here at first.

Structure of this file:
  0. Base Fixes           — scrollbar-gutter, etc.
  1. Design Tokens        — shadows, z-index, transitions, borders
  3. Navigation           — active/hover states
  4. Button Variants      — primary, danger, ghost; size modifiers
  5. Form Refinements     — labels, inputs, textarea, checkbox/radio, fieldset
  6. Layout Utilities     — stack, cluster
  7. text-tile            — (existing) full-width text block in panel grid
  8. card-300             — (existing) preview-area card
  9. Components           — badge, alert, divider, progress, breadcrumb, avatar
 10. data-list            — responsive table-to-card record list
-----------------------*/


/*=====================
0. BASE FIXES
Low-level corrections that belong in 01-reset.css on promotion.
=======================*/

/* Reserves scrollbar space permanently so the layout does not shift
   when a scrollbar appears or disappears between pages.
   Promotion target: 01-reset.css */
html {
  scrollbar-gutter: stable;
}


/*=====================
1. DESIGN TOKENS
Non-typography tokens that supplement 02-layout.css (spacing, radius)
and 05-color-style.css (colors). Typography tokens (type scale, weights,
leading, tracking) now live in 04-typography.css.
On promotion these would move to 02-layout.css.
=======================*/


/**--------
Shadow Scale
Three-step elevation. Intentionally light — this is a flat system.
Shadows exist to separate floating surfaces, not to decorate.
--------**/
:root {
  --shadow-100: 0 1px 2px rgba(0, 0, 0, 0.05);   /* cards at rest    */
  --shadow-200: 0 2px 6px rgba(0, 0, 0, 0.08);   /* lifted panels    */
  --shadow-400: 0 4px 16px rgba(0, 0, 0, 0.12);  /* modals, popovers */
}

/**--------
Z-index Scale
Named layers prevent arbitrary z-index stacking across components.
--------**/
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-tooltip: 300;
}

/**--------
Transition Tokens
Two speeds cover the vast majority of interactive state changes.
--------**/
:root {
  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
}

/**--------
Border Tokens
--------**/
:root {
  --border-width-100: 1px;
  --border-width-200: 2px;
}



/*=====================
3. NAVIGATION IMPROVEMENTS
Hover and current-page states for the main nav.
Promotion target: 03-navigation.css
=======================*/

nav a {
  transition: color var(--transition-fast);
}

nav a:hover {
  color: var(--color-primary-500);
}

/* Mark the current page via aria-current="page" (preferred)
   or the .is-current utility class */
nav a[aria-current="page"],
nav a.is-current {
  color: var(--color-primary-600);
  font-weight: var(--type-weight-600);
}


/* --- Focus ring (keyboard navigation) --- */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--border-width-200) solid var(--color-primary-400);
  outline-offset: 2px;
}


/*=====================
5. FORM REFINEMENTS
Full treatment of form elements using QAB tokens.
The base 06-components.css sets minimal padding/margin/display rules.
These styles extend and override that baseline.
Promotion target: 06-components.css
=======================*/

/**--------
Labels
--------**/

label {
  display: block;
  font-size: var(--type-size-form-labels-400);
  font-weight: var(--type-weight-600);
  color: var(--color-gray-cool-600);
  margin-bottom: 0.3rem;
}

/**--------
Text Inputs and Textarea
Explicit type list avoids accidentally restyling [type="submit"] etc.
--------**/

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 0.45rem 0.65rem;
  margin: 0;
  background: var(--color-base-white);
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  border-radius: var(--layout-radius-200);
  font-family: inherit;
  font-size: var(--type-size-300);
  color: var(--color-gray-cool-700);
  transition: border-color var(--transition-fast);
  display: block;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-gray-cool-400);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary-400);
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 6rem;
  line-height: var(--type-leading-400);
}

/**--------
Field Hint
Small helper text below an input. Doubles as error text via data-variant.
--------**/

.field-hint {
  display: block;
  font-size: var(--type-size-100);
  color: var(--color-gray-cool-400);
  margin-top: 0.25rem;
}

.field-hint[data-variant="error"] {
  color: hsl(var(--color-hue-100) 65% 38%);
}

/**--------
Form Group
A semantic unit: label + input + optional hint, stacked.
Vertical spacing between groups is handled by .stack on the form,
or by the adjacent sibling margin below.
--------**/

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group + .form-group {
  /* margin-top: var(--layout-space-400); this is really clumpsy CSS form layout! pls lose this one. but check were it is used elsewhere*/
}

.hpo-form-grid > .form-group + .form-group {
  margin-top: 0;
}

/**--------
Checkbox and Radio
Uses accent-color for native-element styling — clean cross-browser
result without pseudo-element hacks. Not fully customisable but
appropriate for a minimal system.
--------**/

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary-500);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* .check-group wraps a checkbox/radio with its label in a flex row */
.check-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.check-group label {
  margin-bottom: 0;
  font-weight: var(--type-weight-500);
  cursor: pointer;
}

/**--------
Fieldset / Legend
--------**/

fieldset {
  border: var(--border-width-100) solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-200);
  padding: var(--layout-space-400);
}

legend {
  padding: 0 0.4rem;
  font-size: var(--type-size-200);
  font-weight: var(--type-weight-600);
  color: var(--color-gray-cool-500);
}


/*=====================
6. LAYOUT UTILITIES
Composable layout primitives. These produce no visible decoration —
they only control spacing and flow. The data-attribute API keeps
markup readable without a utility class explosion.
=======================*/

/**--------
Stack
Stacks children vertically with consistent gap.
Default gap matches --layout-space-400 (1rem).
data-gap modifiers: sm | lg | xl
--------**/

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space-400);
}

.stack[data-gap="sm"] { gap: var(--layout-space-200); }
.stack[data-gap="lg"] { gap: calc(var(--layout-space-400) * 2); }
.stack[data-gap="xl"] { gap: calc(var(--layout-space-400) * 3); }

/**--------
Cluster
Wrapping horizontal group. Useful for button groups, badge sets,
nav items, and any inline collections that need consistent gutters.
data-gap: sm | lg
data-align: start | end
data-justify: end | between
--------**/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space-400);
  align-items: center;
}

.cluster[data-gap="sm"]        { gap: var(--layout-space-200); }
.cluster[data-gap="lg"]        { gap: calc(var(--layout-space-400) * 2); }
.cluster[data-align="start"]   { align-items: flex-start; }
.cluster[data-align="end"]     { align-items: flex-end; }
.cluster[data-justify="end"]   { justify-content: flex-end; }
.cluster[data-justify="between"] { justify-content: space-between; }


/*=====================
7. TEXT-TILE
A full-width text block that sits inside a panel grid without
behaving like a grid item. Renders its content as a single
text column spanning approximately two card widths.
=======================*/

/*
LAYOUT NOTE — text-tile inside panel-100 (current approach vs. best practice)

WHAT WE ARE DOING HERE:
The text-tile uses grid-column: 1 / -1 to span all columns and claim its own
row, then max-width pulls it back to approximately two card widths visually.
This works, but it is a compromise. The max-width value is pegged to the
grid's minmax floor (16rem), which means at wider viewports where cards
render larger than 16rem, the text-tile will appear narrower than two cards
rather than exactly two units wide. It is a controlled approximation, not a
precise layout.

WHY WE NEED THE HACK:
CSS auto-fit grids do not have a native concept of a "row break" — there is
no grid equivalent of a hard line break. An element with grid-column: span 2
only occupies two tracks; it does not stop subsequent items from filling the
remaining tracks on the same row. The only CSS-native way to force an element
onto its own row in an auto-fit grid, without knowing the exact column count
in advance, is to span all columns (1 / -1). This is the fundamental tension:
the grid is designed to be fluid and auto-fitting, but we are asking one item
to behave according to a fixed structural rule.

WHAT WOULD USUALLY BE DONE INSTEAD:
The canonical approach in a design system is to separate concerns at the
markup level. The panel grid would contain two distinct children: a header
area (holding the heading and the text-tile) and a card area (holding the
cards). Each child is a single grid item. The card area is itself a nested
grid using the same column definition. This gives precise control without
any spanning tricks:

  <div class="panel panel-100">
    <div class="panel-header">        ← one grid item, natural width
      <h2>...</h2>
      <div class="text-tile">...</div>
    </div>
    <div class="panel-cards">         ← one grid item, or spans remaining cols
      <div class="card-100">...</div>
      <div class="card-100">...</div>
    </div>
  </div>

Alternatively, if the panel-header is meant to occupy exactly two columns,
the parent grid could be defined with named tracks or a fixed column count,
replacing auto-fit with a known structure. This trades flexibility for
predictability — a reasonable trade-off once the layout is stable.

A third option, now well-supported, is CSS subgrid. The panel-header could
span two parent tracks and then declare grid-template-columns: subgrid,
inheriting the parent column sizing exactly. This gives the precision of a
fixed layout while keeping the parent grid fluid:

  .panel-header {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
  }

For the QAB design system, the subgrid route is worth considering as the
panel component matures, since it would make the two-column text-tile width
genuinely tied to the grid rather than approximated by a max-width.
*/

.text-tile {
  grid-column: 1 / -1;
  max-width: calc(2 * 16rem + var(--layout-space-400));
}

.text-tile p {
  margin-bottom: 0;
}


/*=====================
8. CARD-300
A card with a large visual preview area on top and a content area below.
Modeled after the color swatch cards in colors.html, but built with
QAB 310 design tokens instead of hardcoded values.
=======================*/

.card-300 {
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  border-radius: var(--layout-radius-200);
  background: var(--color-base-white);
  overflow: hidden;
}

.card-300__preview {
  /* Default: neutral gray. Override with inline background or a modifier. */
  min-height: 7rem;
  background: var(--color-gray-cool-200);
}

.card-300__body {
  padding: 0.75rem 1rem 1rem;
}

.card-300__title {
  font-size: var(--type-size-300);
  font-weight: var(--type-weight-600);
  margin: 0 0 0.25rem;
}

.card-300__text {
  margin: 0;
  font-size: var(--type-size-200);
  color: var(--color-gray-cool-500);
}


/*=====================
9. COMPONENTS
=======================*/

/**--------
alert
A bordered message block for feedback and system status.
data-variant: (none) | info | success | warning | danger

Usage:
  <div class="alert" data-variant="success">
    <p class="alert-title">Done</p>
    <p>Record saved successfully.</p>
  </div>
--------**/

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--layout-radius-200);
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  background: var(--color-base-white);
}

.alert + .alert {
  margin-top: var(--layout-space-200);
}

.alert-title {
  font-weight: var(--type-weight-600);
  font-size: var(--type-size-300);
  margin-bottom: 0.2rem;
}

.alert p {
  margin-bottom: 0;
  font-size: var(--type-size-200);
}

.alert[data-variant="info"] {
  border-color: hsl(var(--color-hue-500) 55% 72%);
  background: hsl(var(--color-hue-500) 50% 95%);
}
.alert[data-variant="info"] .alert-title {
  color: hsl(var(--color-hue-500) 50% 25%);
}

.alert[data-variant="success"] {
  border-color: var(--color-primary-300);
  background: var(--color-primary-100);
}
.alert[data-variant="success"] .alert-title {
  color: var(--color-primary-600);
}

.alert[data-variant="warning"] {
  border-color: hsl(var(--color-hue-200) 70% 68%);
  background: hsl(var(--color-hue-200) 80% 95%);
}
.alert[data-variant="warning"] .alert-title {
  color: hsl(var(--color-hue-200) 70% 25%);
}

.alert[data-variant="danger"] {
  border-color: hsl(var(--color-hue-100) 60% 72%);
  background: hsl(var(--color-hue-100) 80% 97%);
}
.alert[data-variant="danger"] .alert-title {
  color: hsl(var(--color-hue-100) 65% 35%);
}


/**--------
divider
A horizontal separator. Can be applied to <hr> or a <div>.
Optional data-label attribute renders a centered text label.

Usage:
  <hr class="divider" />
  <div class="divider" data-label="or"></div>
--------**/

.divider,
hr {
  border: none;
  border-top: var(--border-width-100) solid var(--color-gray-cool-200);
  margin: var(--layout-space-400) 0;
}

/* Labelled divider: uses ::before/::after to draw the flanking lines */
.divider[data-label] {
  display: flex;
  align-items: center;
  gap: var(--layout-space-300);
  border-top: none;
  color: var(--color-gray-cool-400);
  font-size: var(--type-size-100);
  letter-spacing: var(--type-tracking-700);
  text-transform: uppercase;
}

.divider[data-label]::before,
.divider[data-label]::after {
  content: attr(data-label); /* dummy; overridden below */
  content: "";
  flex: 1;
  border-top: var(--border-width-100) solid var(--color-gray-cool-200);
}


/**--------
progress
Native <progress> element, styled cross-browser.
Requires separate vendor-prefix rules — there is no shorthand.
data-variant: (none) | warning | danger

Usage:
  <div class="progress-label"><span>Storage</span><span>72%</span></div>
  <progress max="100" value="72"></progress>
--------**/

progress {
  display: block;
  width: 100%;
  height: 0.4rem;
  border: none;
  border-radius: 999px;
  background: var(--color-gray-cool-200);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}

progress::-webkit-progress-bar {
  background: var(--color-gray-cool-200);
  border-radius: 999px;
}

progress::-webkit-progress-value {
  background: var(--color-primary-400);
  border-radius: 999px;
  transition: width var(--transition-base);
}

progress::-moz-progress-bar {
  background: var(--color-primary-400);
  border-radius: 999px;
}

progress[data-variant="warning"]::-webkit-progress-value,
progress[data-variant="warning"]::-moz-progress-bar {
  background: hsl(var(--color-hue-200) 80% 52%);
}

progress[data-variant="danger"]::-webkit-progress-value,
progress[data-variant="danger"]::-moz-progress-bar {
  background: hsl(var(--color-hue-100) 75% 52%);
}

.progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--type-size-100);
  color: var(--color-gray-cool-500);
  margin-bottom: 0.3rem;
}


/**--------
breadcrumb
A navigation trail as an ordered list.
Separators are CSS-generated — no extra markup needed.

Usage:
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/patients">Patients</a></li>
    <li aria-current="page">Schneider, Maria</li>
  </ol>
--------**/

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  font-size: var(--type-size-200);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  color: var(--color-gray-cool-500);
}

.breadcrumb li + li::before {
  content: "/";
  margin: 0 0.4rem;
  color: var(--color-gray-cool-300);
}

.breadcrumb a {
  color: var(--color-gray-cool-500);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-primary-500);
}

.breadcrumb li[aria-current="page"] {
  color: var(--color-gray-cool-700);
  font-weight: var(--type-weight-600);
}


/**--------
avatar
An initials-based circular placeholder.
data-size: sm | (none = md) | lg
data-color: (none = primary) | warm | accent | secondary

Usage: <span class="avatar" data-color="warm">PX</span>
--------**/

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--color-primary-200);
  color: var(--color-primary-700);
  font-weight: var(--type-weight-600);
  font-size: var(--type-size-200);
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.avatar[data-size="sm"] {
  width: 1.75rem;
  height: 1.75rem;
  font-size: var(--type-size-100);
}

.avatar[data-size="lg"] {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--type-size-400);
}

/* Colour variants mapped to QAB hues */
.avatar[data-color="warm"] {
  background: hsl(var(--color-hue-200) 70% 85%);
  color: hsl(var(--color-hue-200) 70% 25%);
}

.avatar[data-color="accent"] {
  background: hsl(var(--color-hue-300) 70% 85%);
  color: hsl(var(--color-hue-300) 65% 25%);
}

.avatar[data-color="secondary"] {
  background: hsl(var(--color-hue-500) 45% 88%);
  color: hsl(var(--color-hue-500) 45% 22%);
}

.avatar[data-color="muted"] {
  background: var(--color-gray-cool-200);
  color: var(--color-gray-cool-500);
}


/*=====================
10. DATA-LIST
A responsive record list that renders as a table-like row layout at
wide viewports and collapses into individual cards at narrow viewports.

STRUCTURE:
  <ul class="data-list" style="--data-list-cols: 2fr 1fr 1.5fr 1fr 1fr;">
    <li class="data-list__header" aria-hidden="true">
      <span>Name</span>
      <span>Date of Birth</span>
      ...
    </li>
    <li class="data-list__row">
      <span data-label="Name">Schneider, Maria</span>
      <span data-label="Date of Birth">15.03.1978</span>
      ...
    </li>
  </ul>

COLUMN LAYOUT:
Column proportions are set via the --data-list-cols custom property on
the .data-list element. This makes the component reusable across different
data shapes without requiring variant classes. Override it inline per
instance, e.g. style="--data-list-cols: 2fr 1fr 1fr 1fr 1fr;"

MODIFIER:
.data-list--striped — applies alternating row tinting.

ACCESSIBILITY NOTE:
This pattern trades semantic table structure for layout flexibility.
For genuinely comparative tabular data, a <table> remains the most
accessible choice — screen readers announce table headers per-cell
automatically. In the data-list pattern, mobile card labels are surfaced
via CSS ::before and are not announced by most screen readers.
Recommended mitigation: add aria-label attributes to each [data-label]
span when full accessibility is required. The header row uses aria-hidden
since it is purely presentational at wide viewports (the column order
makes it self-evident); at mobile, it is hidden entirely.
=======================*/

.data-list {
  /* Default: four equal columns. Override per instance with --data-list-cols */
  --data-list-cols: repeat(4, 1fr);

  list-style: none;
  padding: 0;
  margin: 0;
  border: var(--border-width-100) solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-200);
  overflow: hidden;
  background: var(--color-base-white);
}

.data-list__header,
.data-list__row {
  display: grid;
  grid-template-columns: var(--data-list-cols);
  align-items: center;
  padding: 0.6rem 1rem;
  gap: var(--layout-space-400);
}

/* Column header row */
.data-list__header {
  background: var(--color-gray-cool-200);
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  color: var(--color-gray-cool-500);
  letter-spacing: var(--type-tracking-700);
  text-transform: uppercase;
}

/* Sortable header cells — reset <button> to look like plain column labels.
   When the Go/HTMX server is running, header <span>s become <button>s.
   This reset ensures the visual appearance is identical either way. */
.data-list__header button {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.data-list__header button:hover {
  color: var(--color-gray-cool-700);
}

/* Sort direction indicator — generated from the data-sort attribute.
   Only the active column carries data-sort; inactive columns show nothing. */
.data-list__header button::after {
  content: '';
  font-size: 0.85em;
  opacity: 0.6;
}

.data-list__header button[data-sort="asc"]::after  { content: '↑'; }
.data-list__header button[data-sort="desc"]::after { content: '↓'; }

/* Data row */
.data-list__row {
  border-top: var(--border-width-100) solid var(--color-gray-cool-200);
  transition: background var(--transition-fast);
  font-size: var(--type-size-200);
}

.data-list__row:hover {
  background: var(--color-gray-cool-100);
}

.data-list__record {
  list-style: none;
}

.data-list-accordion {
  display: block;
}

.data-list-accordion > summary {
  list-style: none;
  cursor: pointer;
}

.data-list-accordion > summary::-webkit-details-marker {
  display: none;
}

.data-list__details-indicator {
  color: hsl(var(--color-hue-500) 50% 28%);
  font-weight: var(--type-weight-600);
}

.data-list__details-indicator::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-20%) rotate(45deg);
  transition: transform var(--transition-fast);
}

.data-list-accordion[open] .data-list__details-indicator::after {
  transform: translateY(10%) rotate(225deg);
}

.data-list-accordion[open] > summary {
  background: var(--color-gray-cool-100);
}

.data-list-accordion__content {
  border-top: var(--border-width-100) solid var(--color-gray-cool-200);
  padding: var(--layout-space-400) var(--layout-space-500);
  background: var(--color-base-white);
}

.data-list-accordion__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--layout-space-200);
  margin-top: var(--layout-space-400);
}

.icd-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--layout-space-400);
  min-width: 0;
}

.icd-meta-grid > div {
  display: grid;
  gap: var(--layout-space-100);
  align-content: start;
  min-width: 0;
}

.icd-meta-grid strong {
  font-size: var(--type-size-200);
  font-weight: var(--type-weight-600);
  overflow-wrap: anywhere;
}

.icd-raw-json {
  margin-top: var(--layout-space-400);
  border: var(--border-width-100) solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-200);
  background: var(--color-gray-cool-100);
}

.icd-raw-json > summary {
  cursor: pointer;
  padding: var(--layout-space-300) var(--layout-space-400);
  font-weight: var(--type-weight-600);
}

.icd-raw-json pre {
  max-height: 22rem;
  margin: 0;
  overflow: auto;
  padding: var(--layout-space-400);
  border-top: var(--border-width-100) solid var(--color-gray-cool-200);
  font-size: var(--type-size-100);
  white-space: pre-wrap;
}

/* Striped modifier */
.data-list--striped .data-list__row:nth-child(even) {
  background: var(--color-gray-cool-100);
}

/* Actions cell — typically the last column */
.data-list__actions {
  display: flex;
  gap: var(--layout-space-200);
  align-items: center;
  flex-wrap: wrap;
}

.icd-record-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: var(--border-width-100) solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-200);
  overflow: hidden;
  background: var(--color-base-white);
}

.icd-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space-200);
  margin: var(--layout-space-300) 0 0;
  padding: 0;
  border: 0;
}

.icd-search-grid {
  display: grid;
  grid-template-columns: minmax(9rem, 0.9fr) repeat(3, minmax(8rem, 1fr));
  gap: var(--layout-space-300);
  align-items: end;
}

.filter-pill {
  cursor: pointer;
}

.filter-pill input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.filter-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.2rem 0.75rem;
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  border-radius: 999px;
  background: var(--color-base-white);
  color: var(--color-gray-cool-600);
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
}

.filter-pill input:checked + span {
  border-color: hsl(var(--color-hue-500) 55% 72%);
  background: hsl(var(--color-hue-500) 50% 93%);
  color: hsl(var(--color-hue-500) 50% 28%);
}

.filter-pill input:focus-visible + span {
  outline: 2px solid hsl(var(--color-hue-500) 65% 42%);
  outline-offset: 2px;
}

.icd-record + .icd-record {
  border-top: var(--border-width-100) solid var(--color-gray-cool-200);
}

.icd-record__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space-300);
  align-items: center;
  padding: var(--layout-space-300) var(--layout-space-400);
}

.icd-record__row > .icd-code {
  flex: 0 0 auto;
  justify-self: start;
}

.icd-record__title {
  flex: 1 1 18rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icd-record__row > .btn,
.icd-record__row > form,
.icd-record__row > .bdg {
  flex: 0 0 auto;
  justify-self: end;
}

.icd-code {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--layout-radius-100);
  background: var(--color-gray-cool-100);
  color: var(--color-gray-cool-700);
  font-weight: var(--type-weight-600);
}

.icd-record__row > .toggle-pill {
  flex: 0 0 auto;
  justify-self: end;
}

.toggle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--layout-space-200);
  min-height: 2rem;
  padding: 0.2rem 0.35rem 0.2rem 0.75rem;
  border: var(--border-width-100) solid var(--color-gray-cool-300);
  border-radius: 999px;
  background: var(--color-base-white);
  color: var(--color-gray-cool-700);
  cursor: pointer;
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  line-height: 1;
  user-select: none;
}

.toggle-pill__switch {
  position: relative;
  width: 2.3rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--color-gray-cool-300);
  box-shadow: inset 0 0 0 1px hsl(var(--color-hue-cool-grey) 8% 72%);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.toggle-pill__switch::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--color-base-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform var(--transition-fast);
}

.toggle-pill[aria-expanded="true"] {
  border-color: hsl(var(--color-hue-500) 55% 72%);
  background: hsl(var(--color-hue-500) 50% 93%);
  color: hsl(var(--color-hue-500) 50% 28%);
}

.toggle-pill[aria-expanded="true"] .toggle-pill__switch {
  background: hsl(var(--color-hue-500) 50% 32%);
  box-shadow: inset 0 0 0 1px hsl(var(--color-hue-500) 50% 28%);
}

.toggle-pill[aria-expanded="true"] .toggle-pill__switch::after {
  transform: translateX(1.05rem);
}

.icd-record-details__content {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: var(--layout-space-400) 0 0;
}

.icd-record-details__content[hidden] {
  display: none;
}

/* Mobile / narrow viewport: each row becomes a self-contained card.
   Breakpoint matches QAB 310's first responsive step (580px). */
/* ── Rechnung erstellen — Flow ─────────────────────────── */

.rechnung-context {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.rechnung-context-name {
  font-size: var(--type-size-500);
  font-weight: var(--type-weight-600);
  line-height: var(--type-leading-100);
  margin-bottom: 0.25rem;
}

.rechnung-steps {
  display: flex;
  align-items: stretch;
}

.rechnung-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  font-size: var(--type-size-200);
  color: var(--color-gray-cool-400);
  background: var(--color-base-white);
  border: 1px solid var(--color-gray-cool-200);
  flex: 1;
}

.rechnung-step + .rechnung-step {
  border-left: none;
}

.rechnung-step:first-child {
  border-radius: var(--layout-radius-200) 0 0 var(--layout-radius-200);
}

.rechnung-step:last-child {
  border-radius: 0 var(--layout-radius-200) var(--layout-radius-200) 0;
}

.rechnung-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--color-gray-cool-200);
  color: var(--color-gray-cool-500);
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  flex-shrink: 0;
  line-height: 1;
}

.rechnung-step.is-active {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
  color: var(--color-gray-cool-700);
  font-weight: var(--type-weight-600);
}

.rechnung-step.is-active .rechnung-step-num {
  background: var(--color-primary-500);
  color: var(--color-base-white);
}

.rechnung-step.is-done {
  color: var(--color-primary-600);
}

.rechnung-step.is-done .rechnung-step-num {
  background: var(--color-primary-500);
  color: var(--color-base-white);
}

/* Type selection cards */
.rechnung-type-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.rechnung-type-option {
  position: relative;
}

.rechnung-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rechnung-type-label {
  display: block;
  border: 2px solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-200);
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  height: 100%;
}

.rechnung-type-label:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-100);
}

.rechnung-type-option input[type="radio"]:checked + .rechnung-type-label {
  border-color: var(--color-primary-500);
  background: var(--color-primary-100);
}

.rechnung-type-option input[type="radio"]:focus-visible + .rechnung-type-label {
  outline: 2px solid var(--color-primary-400);
  outline-offset: 2px;
}

.rechnung-type-name {
  font-weight: var(--type-weight-600);
  font-size: var(--type-size-300);
  margin-bottom: 0.2rem;
}

.rechnung-type-desc {
  font-size: var(--type-size-200);
  color: var(--color-gray-cool-500);
  margin-bottom: 0;
  line-height: var(--type-leading-400);
}

.rechnung-type-vorschlag {
  display: inline-block;
  font-size: var(--type-size-100);
  color: var(--color-primary-600);
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-300);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-top: 0.5rem;
  font-weight: var(--type-weight-600);
}

/* Signal: offene Behandlungen */
.rechnung-signal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: var(--color-primary-100);
  border: 1px solid var(--color-primary-300);
  border-radius: var(--layout-radius-200);
  font-size: var(--type-size-200);
  margin-bottom: 0.75rem;
}

.rechnung-signal strong {
  color: var(--color-primary-600);
}

/* Panel header within flow sections */
.rechnung-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.rechnung-panel-header h3,
.rechnung-panel-header h4 {
  margin-bottom: 0;
}

/* Treatment selection list */
.rechnung-behandlung-list {
  --data-list-cols: 1.75rem 5.5rem 1fr 6.5rem 5rem;
}

/* Step navigation bar */
.rechnung-schritt-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* Vorschau (step 2) — app-layout invoice preview */
.rechnung-vorschau {
  border: 1px solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-200);
  overflow: hidden;
  margin-top: 1rem;
}

.rechnung-vorschau-head {
  background: var(--color-gray-cool-100);
  border-bottom: 1px solid var(--color-gray-cool-200);
  padding: 0.8rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rechnung-vorschau-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rechnung-vorschau-metarow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.rechnung-vorschau-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.rechnung-vorschau-label {
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  color: var(--color-gray-cool-400);
  text-transform: uppercase;
  letter-spacing: var(--type-tracking-700);
}

.rechnung-vorschau-value {
  font-size: var(--type-size-200);
  color: var(--color-gray-cool-700);
}

.rechnung-vorschau-readonly {
  font-size: var(--type-size-200);
  color: var(--color-gray-cool-500);
  font-style: italic;
}

/* Sum block */
.rechnung-summen {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-gray-cool-200);
  max-width: 22rem;
  margin-left: auto;
}

.rechnung-summen-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  font-size: var(--type-size-200);
}

.rechnung-summen-row.is-total {
  font-weight: var(--type-weight-600);
  font-size: var(--type-size-400);
  border-top: 1px solid var(--color-gray-cool-300);
  padding-top: 0.5rem;
  margin-top: 0.15rem;
}

.rechnung-summen-row-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rechnung-summen-row-erhalten {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rechnung-summen-row-erhalten input {
  width: 7rem;
  text-align: right;
  padding: 0.25rem 0.5rem;
  font-size: var(--type-size-200);
}

/* Step 3: Entsicherung */
.rechnung-summary-box {
  border: 1px solid var(--color-gray-cool-200);
  border-radius: var(--layout-radius-200);
  padding: 0.9rem 1rem;
  background: var(--color-gray-cool-100);
}

.rechnung-summary-box dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.5rem;
  margin: 0;
}

.rechnung-summary-box dt {
  font-size: var(--type-size-200);
  color: var(--color-gray-cool-500);
  font-weight: var(--type-weight-600);
  white-space: nowrap;
}

.rechnung-summary-box dd {
  font-size: var(--type-size-200);
  margin: 0;
}

.rechnung-create-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding-top: 0.25rem;
}

.rechnung-create-hint {
  font-size: var(--type-size-200);
  color: var(--color-gray-cool-500);
  flex: 1;
}

/* ── Bibliothek ─────────────────────────────────────────── */

.bib-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bib-subhead {
  margin-top: var(--layout-space-400);
  margin-bottom: var(--layout-space-200);
  font-size: var(--type-size-300);
  font-weight: var(--type-weight-600);
  color: var(--color-gray-cool-700);
}

.icd-master-results {
  margin-top: var(--layout-space-300);
  margin-bottom: var(--layout-space-400);
}

.icd-master-results form {
  margin: 0;
}

.bib-set-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.bib-set-name {
  font-weight: var(--type-weight-600);
  flex: 1;
  min-width: 0;
}

.bib-set-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.bib-set-summe {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  padding-top: 0.2rem;
  font-size: var(--type-size-200);
}

.bib-set-total-value {
  font-size: var(--type-size-400);
  font-weight: var(--type-weight-600);
}

.bib-set-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-gray-cool-200);
}

.bib-set-footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem;
}

.bib-position-head,
.bib-position-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5rem 4rem auto 5rem;
  column-gap: 0.35rem;
  align-items: center;
}

.bib-position-head {
  padding: 0.15rem 0 0.35rem;
  border-top: 1px dashed var(--color-gray-cool-300);
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  letter-spacing: var(--type-tracking-700);
  text-transform: uppercase;
  color: var(--color-gray-cool-500);
}

.bib-position-head--pauschale,
.bib-position-add--pauschale {
  grid-template-columns: minmax(0, 1fr) 7rem;
}

.bib-position-head[hidden] {
  display: none;
}

.bib-match {
  font-weight: var(--type-weight-600);
  color: var(--color-primary-600);
}

.bib-mismatch {
  font-weight: var(--type-weight-600);
  color: hsl(var(--color-hue-100) 65% 38%);
}

/* Zielbetrag-Anzeige beim Set erstellen */
.bib-zielvergleich {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--layout-radius-200);
  background: var(--color-gray-cool-100);
  font-size: var(--type-size-200);
  margin-top: 0.5rem;
}

.bib-zielvergleich-label {
  color: var(--color-gray-cool-500);
}

.bib-position-add {
  padding-top: 0.45rem;
  border-top: 1px dashed var(--color-gray-cool-300);
}

.bib-position-add > div > select,
.bib-position-add > div > input {
  width: 100%;
  min-width: 0;
}

.bib-position-add > div > input[data-price-field],
.bib-position-add > div > input[data-total-field] {
  text-align: right;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  font-variant-numeric: tabular-nums;
}

.bib-stepper {
  display: flex;
  gap: 0;
  align-items: center;
}

.bib-stepper > input[type="number"] {
  width: 2rem;
}

.bib-stepper > button:first-child {
  margin-right: var(--layout-space-100);
}

.bib-stepper > button:last-child {
  margin-left: var(--layout-space-100);
}

.bib-stepper > input[type="number"] {
  text-align: center;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.bib-stepper > input[type="number"]::-webkit-outer-spin-button,
.bib-stepper > input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bib-stepper > input[type="number"] {
  -moz-appearance: textfield;
}

.bib-stepper > button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.bib-stepper:focus-within > button {
  opacity: 1;
  pointer-events: auto;
}

/* Pauschalleistungen Tabelle */
.pausch-table {
  width: 100%;
  font-size: var(--type-size-200);
}

.pausch-table th {
  background: var(--color-gray-cool-100);
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  text-transform: uppercase;
  letter-spacing: var(--type-tracking-700);
  color: var(--color-gray-cool-500);
  padding: 0.45rem 0.75rem;
  text-align: left;
}

.pausch-table td {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--color-gray-cool-200);
  vertical-align: middle;
}

.pausch-table .col-std {
  width: 2.5rem;
  text-align: center;
}

.pausch-table .col-betrag {
  width: 7rem;
  text-align: right;
}

.pausch-table .col-actions {
  width: 5rem;
  text-align: right;
}

/**--------
confirm-modal
QAB confirm dialog pattern for destructive HTMX actions.
Intended migration target: 06-components.css next to modal-400.

Usage:
  <div class="modal-wrapper confirm-modal-wrapper" data-confirm-modal hidden>
    <section class="modal-400 confirm-modal" role="dialog" aria-modal="true">
      <p class="confirm-modal-message" data-confirm-message></p>
      <div class="confirm-modal-actions">...</div>
    </section>
  </div>
--------**/

.confirm-modal-wrapper {
  z-index: var(--z-modal);
  background: rgba(20, 27, 32, 0.44);
}

.confirm-modal-wrapper[hidden] {
  display: none;
}

.confirm-modal {
  box-shadow: var(--shadow-400);
}

.confirm-modal header {
  align-items: flex-start;
}

.confirm-modal .modal-close {
  min-width: 2rem;
  padding-inline: 0.45rem;
  font-size: var(--type-size-400);
  line-height: 1;
}

.confirm-modal-message {
  color: var(--color-gray-cool-700);
  font-size: var(--type-size-300);
  line-height: var(--type-leading-400);
}

.confirm-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--layout-space-200);
  margin-top: var(--layout-space-400);
}

@media (max-width: 42rem) {
  .rechnung-context {
    flex-direction: column;
  }
  .rechnung-type-options {
    grid-template-columns: 1fr;
  }
  .rechnung-steps {
    flex-direction: column;
  }
  .rechnung-step {
    border-radius: var(--layout-radius-200) !important;
    border: 1px solid var(--color-gray-cool-200) !important;
  }
  .rechnung-step + .rechnung-step {
    border-left: 1px solid var(--color-gray-cool-200) !important;
  }
  .rechnung-vorschau-head,
  .rechnung-vorschau-metarow {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 579px) {

  .data-list {
    /* Remove table-like container border; each card carries its own */
    border: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-200);
  }

  /* Header row is hidden — labels are provided via data-label instead */
  .data-list__header {
    display: none;
  }

  /* Each row becomes a card */
  .data-list__row {
    display: flex;
    flex-direction: column;
    /* align-items: center is inherited from the desktop rule; for a column
       flex container the cross axis is horizontal, so "center" would shrink
       and horizontally center every cell. Reset to stretch so cells fill
       the full card width and the inner label grid has room to work. */
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border: var(--border-width-100) solid var(--color-gray-cool-200);
    border-radius: var(--layout-radius-200);
    background: var(--color-base-white);
    font-size: var(--type-size-300);
    transition: none;
  }

  /* Each cell: two-column grid — label on the left, value on the right. */
  .data-list__row > [data-label] {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.5rem;
    align-items: baseline;
  }

  /* The label prefix, generated from the data-label attribute */
  .data-list__row > [data-label]::before {
    content: attr(data-label);
    font-size: var(--type-size-100);
    font-weight: var(--type-weight-600);
    color: var(--color-gray-cool-400);
    letter-spacing: var(--type-tracking-700);
    text-transform: uppercase;
    padding-top: 0.1rem;
  }

  /* Actions cell: reset the label grid, stack buttons normally */
  .data-list__row > .data-list__actions {
    grid-template-columns: 1fr;
    padding-top: 0.25rem;
  }

  .data-list__row > .data-list__actions::before {
    display: none;
  }

  .data-list-accordion__content {
    padding: var(--layout-space-400);
    border: var(--border-width-100) solid var(--color-gray-cool-200);
    border-top: none;
    border-radius: 0 0 var(--layout-radius-200) var(--layout-radius-200);
  }

  .data-list-accordion[open] > summary {
    border-radius: var(--layout-radius-200) var(--layout-radius-200) 0 0;
  }

  .data-list-accordion__actions {
    justify-content: flex-start;
  }

  .icd-meta-grid {
    grid-template-columns: 1fr;
  }

  .icd-record-list {
    border: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: var(--layout-space-200);
    overflow: visible;
  }

  .icd-record {
    border: var(--border-width-100) solid var(--color-gray-cool-200);
    border-radius: var(--layout-radius-200);
    background: var(--color-base-white);
  }

  .icd-record + .icd-record {
    border-top: var(--border-width-100) solid var(--color-gray-cool-200);
  }

  .icd-record__row {
    grid-template-columns: max-content 1fr;
  }

  .icd-record__row > .icd-code {
    grid-column: 1;
  }

  .icd-record__title {
    grid-column: 2;
    white-space: normal;
  }

  .icd-record__row > button,
  .icd-record__row > form {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }

  .icd-record__row > .toggle-pill {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }

  .icd-record-details__content {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .icd-search-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Behandlung: Leistungen mode controls ── */
.leistungen-controls {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space-300);
  padding: 0 0 var(--layout-space-400);
}

.leistungen-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-space-200);
}

.leistungen-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--layout-space-100);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-primary-200);
  border-radius: 999px;
  background: var(--color-primary-100);
  color: var(--color-primary-600);
  font-size: var(--type-size-200);
  font-weight: var(--type-weight-600);
  cursor: pointer;
}

.leistungen-mode-tab:has(input:checked) {
  background: var(--color-primary-200);
}

.leistungen-mode-tab input {
  margin: 0;
}

.leistungen-load-panel {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space-200);
}

.leistungen-load-panel[hidden] {
  display: none;
}

.leistungen-load-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--layout-space-200);
}

.leistungen-load-label {
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  color: var(--color-gray-cool-500);
  letter-spacing: var(--type-tracking-700);
  text-transform: uppercase;
  white-space: nowrap;
}

.leistungen-load-select {
  min-width: 16rem;
}

/* ── Behandlung: Leistungen Zeilen ── */
.svc-select {
  width: 100%;
  min-width: 18rem;
}

.svc-pausch-badge {
  align-self: flex-start;
  font-size: var(--type-size-100);
  font-weight: var(--type-weight-600);
  letter-spacing: var(--type-tracking-700);
  text-transform: uppercase;
  color: var(--color-gray-cool-500);
}

.svc-pausch-name {
  width: calc(100% - 6rem);
  min-width: 12rem;
}

.svc-pausch-field {
  display: flex;
  flex-direction: column;
  gap: var(--layout-space-100);
}

.leistungen-save-group {
  display: flex;
  align-items: center;
  gap: var(--layout-space-200);
}

.service-table {
  margin-top: var(--layout-space-300);
}