/* AGENTS.md UI refresh: calm medical SaaS theme */
:root {
  --radius: var(--app-radius);
  --app-content-gap: 4px;
  --app-type-field-label: .72rem;
  --app-weight-field-label: var(--app-weight-semibold);
  --app-line-field-label: 1;
}

:root[data-app-theme="dark"] body,
:root[data-app-theme="dark"] body#main-body {
  background: var(--background-color);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .navbar {
  background: rgba(24, 32, 39, .96);
  border-color: var(--border-color);
}

:root[data-app-theme="dark"] .navbar .nav-link,
:root[data-app-theme="dark"] .navbar .navbar-brand {
  background: var(--surface-color);
  color: var(--text-secondary);
}

:root[data-app-theme="dark"] .navbar .nav-link:hover,
:root[data-app-theme="dark"] .navbar .nav-link:focus,
:root[data-app-theme="dark"] .navbar .nav-link.active,
:root[data-app-theme="dark"] .navbar .navbar-brand.active {
  background: var(--surface-muted-color);
  color: var(--color-focus, #91bde2);
  box-shadow: inset 3px 0 0 var(--color-focus, #91bde2);
}

.instant-tooltip {
  position: relative;
}

.instant-tooltip[data-tooltip]::after {
  display: none;
}

.app-instant-tooltip {
  background: #202A33;
  border: 1px solid rgba(32, 42, 51, .12);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(32, 42, 51, .18);
  color: #fff;
  font-size: var(--app-type-caption, 12px);
  font-weight: var(--app-weight-semibold);
  line-height: 1.2;
  max-width: min(260px, calc(100vw - 24px));
  opacity: 0;
  padding: 7px 9px;
  pointer-events: none;
  position: fixed;
  text-align: center;
  transform: translateY(-2px);
  transition: opacity .08s ease, transform .08s ease;
  white-space: normal;
  width: max-content;
  z-index: 12050;
}

.app-instant-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:root[data-app-theme="dark"] .app-instant-tooltip {
  background: #edf1f4;
  border-color: #4e697d;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .42);
  color: #151d24;
}

:root[data-app-theme="dark"] .card,
:root[data-app-theme="dark"] .modal-content,
:root[data-app-theme="dark"] .dropdown-menu,
:root[data-app-theme="dark"] .list-group-item,
:root[data-app-theme="dark"] .settings-card,
:root[data-app-theme="dark"] .home-card,
:root[data-app-theme="dark"] .widget-card,
:root[data-app-theme="dark"] .overview-card,
:root[data-app-theme="dark"] .calendar-sidebar,
:root[data-app-theme="dark"] .calendar-main,
:root[data-app-theme="dark"] .calendar-commandbar,
:root[data-app-theme="dark"] .calendar-tabs,
:root[data-app-theme="dark"] .calendar-list-panel,
:root[data-app-theme="dark"] .event-hover-card,
:root[data-app-theme="dark"] .task-hover-popover,
:root[data-app-theme="dark"] .task-status-menu,
:root[data-app-theme="dark"] .tasks-panel,
:root[data-app-theme="dark"] .task-widget-item,
:root[data-app-theme="dark"] .billing-card,
:root[data-app-theme="dark"] .billing-create-panel,
:root[data-app-theme="dark"] .invoice-list-card,
:root[data-app-theme="dark"] .person-info-box,
:root[data-app-theme="dark"] .person-panel,
:root[data-app-theme="dark"] .timeline-item,
:root[data-app-theme="dark"] .therapy-panel,
:root[data-app-theme="dark"] .therapy-card-row,
:root[data-app-theme="dark"] .docu-modebar,
:root[data-app-theme="dark"] .upload-content {
  background-color: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
  box-shadow: var(--soft-shadow-sm);
}

:root[data-app-theme="dark"] .dropdown-item,
:root[data-app-theme="dark"] .dropdown-header,
:root[data-app-theme="dark"] .modal-title,
:root[data-app-theme="dark"] .card-title,
:root[data-app-theme="dark"] h1,
:root[data-app-theme="dark"] h2,
:root[data-app-theme="dark"] h3,
:root[data-app-theme="dark"] h4,
:root[data-app-theme="dark"] h5,
:root[data-app-theme="dark"] h6,
:root[data-app-theme="dark"] label,
:root[data-app-theme="dark"] .task-widget-title,
:root[data-app-theme="dark"] .termin-title,
:root[data-app-theme="dark"] .settings-card h2 {
  color: var(--text-color);
}

:root[data-app-theme="dark"] .text-muted,
:root[data-app-theme="dark"] .muted,
:root[data-app-theme="dark"] small,
:root[data-app-theme="dark"] .small,
:root[data-app-theme="dark"] .form-text,
:root[data-app-theme="dark"] .settings-card-subtitle,
:root[data-app-theme="dark"] .task-widget-meta,
:root[data-app-theme="dark"] .termin-meta,
:root[data-app-theme="dark"] .termin-owner,
:root[data-app-theme="dark"] .docu-draft-meta {
  color: var(--text-secondary);
}

:root[data-app-theme="dark"] .dropdown-item:hover,
:root[data-app-theme="dark"] .dropdown-item:focus,
:root[data-app-theme="dark"] .dropdown-item.active,
:root[data-app-theme="dark"] .list-group-item:hover,
:root[data-app-theme="dark"] .task-widget-item[data-task-edit]:hover,
:root[data-app-theme="dark"] .timeline-item:hover,
:root[data-app-theme="dark"] .therapy-card-row:hover {
  background-color: var(--color-surface-hover);
  color: var(--text-color);
  border-color: var(--color-border-strong);
}

:root[data-app-theme="dark"] .modal-header,
:root[data-app-theme="dark"] .modal-footer,
:root[data-app-theme="dark"] .dropdown-divider,
:root[data-app-theme="dark"] hr {
  border-color: var(--border-color);
}

:root[data-app-theme="dark"] .form-control:focus,
:root[data-app-theme="dark"] .form-select:focus,
:root[data-app-theme="dark"] input:focus,
:root[data-app-theme="dark"] select:focus,
:root[data-app-theme="dark"] textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 .2rem rgba(126, 200, 200, .16);
}

:root[data-app-theme="dark"] ::placeholder {
  color: rgba(169, 186, 187, .68);
}

.app-floating-field {
  --app-floating-label-offset: .4rem;
  display: block;
  margin-block: .3rem .3rem;
  padding-top: var(--app-floating-label-offset);
  position: relative;
  width: 100%;
}

/* Labels stay permanently on the upper control border. */
:where(.row.g-2):has(.app-floating-field) {
  --bs-gutter-y: .85rem;
}

:where(.row.g-3):has(.app-floating-field) {
  --bs-gutter-y: 1rem;
}

.app-floating-field + .app-floating-field {
  margin-block-start: .55rem;
}

.app-floating-field + :is(.form-text, .invalid-feedback, .valid-feedback) {
  margin-top: .45rem;
}

.app-floating-field > input,
.app-floating-field > textarea,
.app-floating-field > select {
  min-height: 46px;
  padding: .68rem .75rem .48rem;
}

.app-floating-field > input,
.app-floating-field > select {
  height: 46px;
}

/* The floating label is the visible hint. Keep a placeholder that is restored
   by late model bindings from appearing as a second line of text. */
.app-floating-field > input::placeholder,
.app-floating-field > textarea::placeholder {
  color: transparent;
  opacity: 0;
}

.app-floating-field > select {
  line-height: 1.25;
  padding-right: 2.25rem;
  text-overflow: ellipsis;
}

.app-floating-field > :is(
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
) {
  color-scheme: light;
  font-variant-numeric: tabular-nums;
  padding-right: .7rem;
}

:root[data-app-theme="dark"] .app-floating-field > :is(
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
) {
  color-scheme: dark;
}

.app-floating-field > :is(
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"]
)::-webkit-calendar-picker-indicator {
  cursor: pointer;
  height: 1.1rem;
  margin: 0;
  opacity: .72;
  padding: .12rem;
  width: 1.1rem;
}

.app-floating-field > textarea {
  min-height: 92px;
  padding-top: .78rem;
}

.app-floating-field.app-floating-field-sm > input,
.app-floating-field.app-floating-field-sm > textarea,
.app-floating-field.app-floating-field-sm > select {
  min-height: 42px;
  padding: .6rem .55rem .4rem;
}

.app-floating-field.app-floating-field-sm > input,
.app-floating-field.app-floating-field-sm > select {
  height: 42px;
}

.app-floating-field.app-floating-field-sm > select {
  padding-right: 2rem;
}

.app-floating-label {
  font-size: var(--app-type-field-label, .72rem);
  font-weight: var(--app-weight-field-label, 750);
  line-height: var(--app-line-field-label, 1);
}

.app-floating-field > .app-floating-label {
  background: var(--app-control-bg, var(--input-bg, #fff));
  border-radius: 4px;
  color: var(--text-secondary, var(--color-text-muted));
  left: .75rem;
  margin: 0;
  max-width: calc(100% - 1.35rem);
  overflow: hidden;
  padding: 0 .25rem;
  pointer-events: none;
  position: absolute;
  text-overflow: ellipsis;
  top: var(--app-floating-label-offset);
  transform: translateY(-50%);
  transition: color .14s ease;
  white-space: nowrap;
  z-index: 2;
}

.app-floating-field-textarea > .app-floating-label {
  top: var(--app-floating-label-offset);
  transform: translateY(-50%);
}

.app-floating-field > input:focus + .app-floating-label,
.app-floating-field > textarea:focus + .app-floating-label,
.app-floating-field > select:focus + .app-floating-label {
  color: var(--primary-color, #3f5f7d);
}

.app-floating-field.app-floating-field-sm > .app-floating-label {
  left: .55rem;
  top: var(--app-floating-label-offset);
  transform: translateY(-50%);
}

.app-floating-field > input:disabled + .app-floating-label,
.app-floating-field > textarea:disabled + .app-floating-label,
.app-floating-field > select:disabled + .app-floating-label,
.app-floating-field > input[readonly] + .app-floating-label,
.app-floating-field > textarea[readonly] + .app-floating-label {
  opacity: .78;
}

:root[data-app-theme="dark"] .app-floating-field > .app-floating-label {
  background: var(--app-control-bg, var(--input-bg, var(--color-surface-inset)));
  color: var(--text-secondary, #c8d7d7);
}

:root[data-app-theme="dark"] .app-floating-field > input:focus + .app-floating-label,
:root[data-app-theme="dark"] .app-floating-field > textarea:focus + .app-floating-label,
:root[data-app-theme="dark"] .app-floating-field > select:focus + .app-floating-label {
  color: #8fd6d6;
}

:root[data-app-theme="dark"] .table,
:root[data-app-theme="dark"] table,
:root[data-app-theme="dark"] .settings-table,
:root[data-app-theme="dark"] .billing-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-color);
  --bs-table-border-color: var(--border-color);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .table th,
:root[data-app-theme="dark"] .table td,
:root[data-app-theme="dark"] .settings-table th,
:root[data-app-theme="dark"] .settings-table td {
  background-color: transparent;
  border-color: var(--border-color);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .table thead th,
:root[data-app-theme="dark"] .settings-table thead th,
:root[data-app-theme="dark"] .settings-group-row td {
  background-color: var(--color-surface-raised);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .paginate_button {
  color: var(--text-secondary);
}

:root[data-app-theme="dark"] .btn-light,
:root[data-app-theme="dark"] .btn-secondary,
:root[data-app-theme="dark"] .btn-outline-secondary {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .btn-primary:hover,
:root[data-app-theme="dark"] .btn-primary:focus-visible {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
  color: #FFFFFF;
}

:root[data-app-theme="dark"] .badge,
:root[data-app-theme="dark"] .status-pill,
:root[data-app-theme="dark"] .category-pill,
:root[data-app-theme="dark"] .calendar-pill,
:root[data-app-theme="dark"] .tag-pill {
  border-color: var(--border-color);
}

:root[data-app-theme="dark"] .alert,
:root[data-app-theme="dark"] .settings-alert {
  background-color: #1E3031;
  border-color: var(--color-border-strong);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .fc,
:root[data-app-theme="dark"] .fc .fc-scrollgrid,
:root[data-app-theme="dark"] .fc .fc-daygrid-day,
:root[data-app-theme="dark"] .fc .fc-timegrid-slot,
:root[data-app-theme="dark"] .fc .fc-list,
:root[data-app-theme="dark"] .fc .fc-list-table td,
:root[data-app-theme="dark"] .fc-theme-standard td,
:root[data-app-theme="dark"] .fc-theme-standard th {
  background-color: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .fc .fc-col-header-cell-cushion,
:root[data-app-theme="dark"] .fc .fc-daygrid-day-number,
:root[data-app-theme="dark"] .fc .fc-list-day-text,
:root[data-app-theme="dark"] .fc .fc-list-day-side-text {
  color: var(--text-color);
}

:root[data-app-theme="dark"] .fc .fc-day-today,
:root[data-app-theme="dark"] .fc .fc-list-day-cushion {
  background-color: rgba(215, 187, 142, .14);
}

:root[data-app-theme="dark"] .ui-widget-content,
:root[data-app-theme="dark"] .ui-menu,
:root[data-app-theme="dark"] .ui-datepicker {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .ui-state-active,
:root[data-app-theme="dark"] .ui-widget-content .ui-state-active {
  background: #3F5F7D;
  border-color: #3F5F7D;
  color: #FFFFFF;
}

:root[data-app-theme="dark"] .a4-page,
:root[data-app-theme="dark"] .page-editor,
:root[data-app-theme="dark"] .ql-editor,
:root[data-app-theme="dark"] .hybrid-canvas-wrap,
:root[data-app-theme="dark"] .hybrid-page,
:root[data-app-theme="dark"] .hybrid-modal-preview,
:root[data-app-theme="dark"] .hybrid-preview-shell {
  background-color: #FFFFFF;
  color: #111827;
}

:root[data-app-theme="dark"] .hybrid-textbox,
:root[data-app-theme="dark"] .hybrid-modal-textbox,
:root[data-app-theme="dark"] .hybrid-preview-textbox,
:root[data-app-theme="dark"] .timeline-hybrid-textbox {
  color: #111827;
}

html,
body {
  background: var(--background-color);
  color: var(--text-color);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15.5px;
}

/* Minimal, brand-aligned scrollbars with a forgiving hit area. */
* {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 999px;
  min-height: 36px;
}

*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb {
  background-color: transparent;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: transparent;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html,
body,
body#main-body {
  scrollbar-color: transparent transparent;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
body#main-body::-webkit-scrollbar {
  height: 0;
  width: 0;
}

html:has(body#main-body:hover),
html:has(body#main-body:focus-within),
body#main-body:hover,
body#main-body:focus-within,
body#main-body > main:hover,
body#main-body > main:focus-within,
body#main-body > .site-wrapper > main:hover,
body#main-body > .site-wrapper > main:focus-within {
  scrollbar-color: transparent transparent;
}

html:has(body#main-body:hover)::-webkit-scrollbar-thumb,
html:has(body#main-body:focus-within)::-webkit-scrollbar-thumb,
body#main-body:hover::-webkit-scrollbar-thumb,
body#main-body:focus-within::-webkit-scrollbar-thumb,
body#main-body > main:hover::-webkit-scrollbar-thumb,
body#main-body > main:focus-within::-webkit-scrollbar-thumb,
body#main-body > .site-wrapper > main:hover::-webkit-scrollbar-thumb,
body#main-body > .site-wrapper > main:focus-within::-webkit-scrollbar-thumb {
  background-color: transparent;
}

body#main-body {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
  min-height: 100vh;
  overflow-x: clip;
  padding-left: 0;
  padding-right: 0;
  scrollbar-gutter: auto;
  text-align: left;
  width: 100%;
}

body#main-body > .site-wrapper {
  align-self: stretch;
  flex: 0 1 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  min-width: 0;
  width: 100%;
}

body#main-body > main,
body#main-body > .site-wrapper > main {
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  min-width: 0;
  overflow-x: clip;
  width: 100%;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) #myNavbar {
  position: fixed;
  top: 0;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: visible;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper:not(:has(> main)):not(:has(> .v-align > main)) {
  box-sizing: border-box;
  height: calc(100dvh - var(--app-nav-height, 58px));
  margin-top: var(--app-nav-height, 58px);
  max-height: calc(100dvh - var(--app-nav-height, 58px));
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > main,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > main,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > .v-align > main {
  box-sizing: border-box;
  height: calc(100dvh - var(--app-nav-height, 58px));
  margin-top: var(--app-nav-height, 58px);
  max-height: calc(100dvh - var(--app-nav-height, 58px));
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper:not(:has(> main)):not(:has(> .v-align > main))::-webkit-scrollbar,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > main::-webkit-scrollbar,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > main::-webkit-scrollbar,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > .v-align > main::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper:not(:has(> main)):not(:has(> .v-align > main))::-webkit-scrollbar-thumb,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > main::-webkit-scrollbar-thumb,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > main::-webkit-scrollbar-thumb,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > .v-align > main::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: var(--app-scrollbar-thumb);
  border: 4px solid transparent;
  border-radius: 999px;
}

body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper:not(:has(> main)):not(:has(> .v-align > main))::-webkit-scrollbar-thumb:hover,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > main::-webkit-scrollbar-thumb:hover,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > main::-webkit-scrollbar-thumb:hover,
body#main-body:not(.settings-scroll-body):has(#myNavbar):not(.person-page-booting):not(.handwriting-mode):not(.embedded-page):not(.billing-embedded-body):not(:has(.calendar-shell)):not(:has(#app .person-list)) > .site-wrapper > .v-align > main::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-hover);
}

html:has(body .modal.show),
body:has(.modal.show),
html:has(body .invoice-modal),
body:has(.invoice-modal),
html:has(body .upload-modal),
body:has(.upload-modal),
html:has(body .hybrid-preview-overlay),
body:has(.hybrid-preview-overlay) {
  overflow: hidden;
}

a {
  color: var(--primary-color);
}

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

/* Global link treatment aligned with the calm medical UI. */
body#main-body a:not(.btn):not(.button):not(.nav-link):not(.dropdown-item):not(.app-skip-link),
body#main-body a:not(.btn):not(.button):not(.nav-link):not(.dropdown-item):not(.app-skip-link):visited {
  color: var(--primary-color);
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

body#main-body a:not(.btn):not(.button):not(.nav-link):not(.dropdown-item):not(.app-skip-link):hover,
body#main-body a:not(.btn):not(.button):not(.nav-link):not(.dropdown-item):not(.app-skip-link):focus {
  color: var(--primary-color-hover);
  text-decoration: none;
}

a,
button,
.btn,
.nav-link,
.dropdown-item,
.list-group-item,
.toolbar-control,
.timeline-item,
.person-note-item {
  cursor: pointer;
}

.navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--soft-shadow-sm);
  backdrop-filter: blur(12px);
  margin: 0;
  padding: 0;
  position: sticky;
  left: 0;
  right: 0;
  top: 0;
  width: 100vw;
  max-width: 100vw;
  z-index: 11000;
}

.therapy-page > .navbar {
  margin: 0;
  width: 100vw;
}

body#main-body .site-wrapper > main:not(.therapy-page) > .navbar,
body#main-body .site-wrapper > .v-align > main > .navbar {
  margin-left: 0;
  margin-right: 0;
  width: 100vw;
}

.navbar > .container,
.navbar > .container-fluid {
  min-height: 48px;
  padding-bottom: 4px;
  padding-top: 4px;
  width: 100%;
  max-width: none;
}

.navbar .nav-link,
.navbar .navbar-brand {
  align-items: center;
  background: var(--surface-color);
  color: var(--text-secondary);
  border-radius: var(--radius);
  display: inline-flex;
  font-weight: 500;
  line-height: 1.2;
  min-height: 40px;
  padding: 8px 11px;
  transition: background-color .18s ease, color .18s ease;
}

.navbar .nav-link:is(:hover, :focus, .active),
.navbar .navbar-brand:is(:hover, :focus, .active) {
  background: var(--surface-muted-color);
  color: var(--primary-color);
  box-shadow: inset 3px 0 0 var(--primary-color);
}

.navbar .navbar-nav {
  gap: 4px;
}

html.touch-input .navbar .nav-link,
html.touch-input .navbar .navbar-brand,
html.touch-input .navbar .dropdown-item {
  font-size: max(var(--app-type-ui), 16px);
  line-height: 1.25;
  min-height: 44px;
  padding: 10px 12px;
}

html.touch-input .navbar .dropdown-menu {
  padding: 6px;
}

.navbar .dropdown-menu {
  text-align: left;
}

.navbar .dropdown-item {
  text-align: left;
  justify-content: flex-start;
}

@media (max-width: 991.98px) {
  .navbar .navbar-collapse,
  .navbar .navbar-nav,
  .navbar .nav-item,
  .navbar .nav-link,
  .navbar .dropdown-menu,
  .navbar .dropdown-item {
    text-align: left;
  }

  .navbar .navbar-nav {
    align-items: stretch;
  }

  .navbar .nav-link,
  .navbar .dropdown-item {
    justify-content: flex-start;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
  }

  .navbar .dropdown-menu {
    margin-left: 0;
  }
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
  background: var(--surface-color);
  color: var(--primary-color);
}

.navbar .nav-link.active,
.navbar .navbar-brand.active {
  background: var(--primary-color);
  color: var(--on-primary-color);
}

.navbar .nav-link.active i,
.navbar .navbar-brand.active i {
  color: var(--on-primary-color);
}

body#main-body > #content-wrapper,
body#main-body #app.container-fluid {
  padding-left: 18px;
  padding-right: 18px;
}

body#main-body.embedded-page .site-wrapper > main,
body#main-body.embedded-page > main,
body#main-body.embedded-page #app.container-fluid {
  padding-left: 18px;
  padding-right: 18px;
}

/* Keep a consistent breathing space below the fixed application navbar. */
body#main-body .site-wrapper > main:not(.therapy-page),
body#main-body .site-wrapper > .v-align > main,
body#main-body > main,
body#main-body #app.container-fluid,
body#main-body .therapy-page {
  margin-top: var(--app-content-gap, 10px);
}

body#main-body > #content-wrapper {
  margin-top: 0;
}

body#main-body.billing-embedded-body .site-wrapper > main,
body#main-body.embedded-page .site-wrapper > main,
body#main-body.embedded-page > main,
body#main-body.embedded-page #app.container-fluid {
  margin-top: 0;
}

body#main-body.home-page {
  --app-content-gap: 0px;
  display: block;
}

body#main-body.home-page > main.home-shell {
  margin-top: 0;
  padding-top: 0;
}

body#main-body.home-page .home-dashboard-grid {
  margin-top: 0;
  padding-top: 0;
}

.dropdown-menu,
.modal-content,
.upload-content,
.invoice-content,
.person-info-box,
.person-therapy-panel,
.card,
.right-column,
.docu-modebar,
.handwriting-page {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow-sm);
}

.modal {
  overflow-y: hidden;
}

.modal-dialog {
  margin-bottom: 18px;
  margin-top: calc(var(--app-nav-height, 58px) + 18px);
}

.modal-dialog-scrollable {
  height: auto;
}

.modal-content,
.modal-dialog-scrollable .modal-content {
  max-height: calc(100dvh - var(--app-nav-height, 58px) - 36px);
}

.modal-header,
.modal-footer {
  background: var(--surface-color);
  border-color: var(--border-color);
  padding: 12px 16px;
}

.modal-title {
  color: var(--text-color);
  font-weight: var(--app-weight-heading);
  line-height: 1.2;
}

.modal-body {
  overflow-y: auto;
  padding: 16px;
}

.modal-body.p-0 {
  padding: 0;
}

.left-column {
  background: var(--background-color);
}

.page {
  margin-top: 0;
  padding: 16px 18px 32px;
}

body.embedded-page {
  background: var(--surface-color);
  overflow: hidden;
}

body.embedded-page .page {
  height: 100vh;
  overflow: auto;
  padding: 14px 16px 18px;
  scrollbar-gutter: stable;
}

body.embedded-page .page::-webkit-scrollbar {
  width: 8px;
}

body.embedded-page .page::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border: 2px solid var(--surface-color);
  border-radius: 999px;
}

body.embedded-page .page::-webkit-scrollbar-track {
  background: transparent;
}

.page-shell {
  margin: 0 auto;
  max-width: 1180px;
}

body.embedded-page .page-shell {
  max-width: none;
}

/* Shared full-width content page and calm page heading. */
.app-content-page {
  box-sizing: border-box;
  margin: 0;
  padding: 18px 18px 32px;
  width: 100%;
}

.app-page-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  min-width: 0;
}

.app-page-heading-icon {
  align-items: center;
  background: color-mix(in srgb, var(--secondary-color, #6f9dc3) 16%, var(--surface-color, #fff));
  border-radius: var(--radius, 10px);
  color: var(--primary-color, #3f5f7d);
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 1.05rem;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.app-page-heading-copy {
  min-width: 0;
}

.app-page-heading-title {
  color: var(--text-color, var(--color-text));
  font-size: 1.42rem;
  font-weight: var(--app-weight-heading);
  line-height: 1.2;
  margin: 0 0 3px;
}

.app-page-heading-subtitle {
  color: var(--text-secondary, var(--color-text-muted));
  font-size: .9rem;
  margin: 0;
}

@media (max-width: 900px) {
  .app-content-page {
    padding: 12px 10px 22px;
  }
}

.page-header,
.panel {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: calc(var(--radius) + 2px);
  color: var(--text-color);
}

.page-header {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px 14px;
}

body.embedded-page .page-header {
  display: none;
}

.page-title {
  color: var(--text-color);
  font-size: 1.35rem;
  font-weight: var(--app-weight-heading);
  line-height: 1.15;
  margin: 0;
}

.subtitle,
.page-subtitle {
  color: var(--text-secondary);
  font-size: .88rem;
  margin: 3px 0 0;
}

.panel {
  box-shadow: var(--soft-shadow-sm);
  margin-bottom: 14px;
  padding: 14px;
}

.panel h2 {
  align-items: center;
  color: var(--primary-color);
  display: flex;
  font-size: .84rem;
  font-weight: 850;
  gap: 8px;
  letter-spacing: .035em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.form-grid-person,
.app-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.field-span-2 { grid-column: span 2; }
.field-span-3 { grid-column: span 3; }
.field-span-4 { grid-column: span 4; }
.field-span-5 { grid-column: span 5; }
.field-span-6 { grid-column: span 6; }
.field-span-8 { grid-column: span 8; }
.field-span-12 { grid-column: span 12; }

.form-label {
  color: var(--text-secondary);
  font-size: var(--app-type-field-label, .72rem);
  font-weight: var(--app-weight-field-label, 750);
  line-height: var(--app-line-field-label, 1);
  margin-bottom: 4px;
}

.form-actions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}

.form-control,
.form-select,
input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-color);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 .2rem rgba(111, 157, 195, .16);
  outline: none;
}

.btn {
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-outline-primary,
.timeline-filters .filter-item.active,
.timeline-filters .filter-item:hover,
.therapy-filter-btn.active,
.therapy-filter-btn:hover,
.active-filter-item {
  background: rgba(111, 157, 195, .12);
  border-color: rgba(111, 157, 195, .36);
  color: var(--primary-color);
}

.list-group-item,
.timeline-item,
.therapy-card-row,
.person-note-item {
  border-color: var(--border-color);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.list-group-item {
  background: transparent;
  color: var(--text-color);
  border-radius: var(--radius);
  margin-bottom: 4px;
}

.list-group-item:hover,
.list-group-item.selected {
  background: var(--surface-color);
  box-shadow: var(--soft-shadow-sm);
}

.person-initials,
.person-info-box .photo.initials {
  background: var(--primary-color);
}

.person-info-box {
  color: var(--text-color);
}

.person-info-box .label,
.person-info-box .birthdate,
.person-info-box .age,
.person-note-meta,
.therapy-card-meta,
.text-muted {
  color: var(--text-secondary);
}

.timeline-container {
  border-left-color: var(--border-color);
}

.timeline-content {
  border-left-color: var(--secondary-color);
}

.timeline-icon i,
.timeline-icon.text,
.timeline-followup,
.edit-icon,
.new-entry-btn,
.arrow {
  color: var(--primary-color);
}

.person-note-item,
.hybrid-note {
  background: #FFF6DC;
  border-color: rgba(200, 169, 126, .58);
}

table,
.table {
  color: var(--text-color);
}

.table > :not(caption) > * > * {
  border-color: var(--border-color);
  background: var(--surface-color);
}

.progress {
  background: #EAF1F1;
  border-radius: var(--radius);
}

.progress-bar {
  background: var(--secondary-color);
}

.toolbar-color,
.toolbar-range {
  border-color: var(--border-color);
  border-radius: var(--radius);
}

.docu-modebar {
  color: var(--text-color);
}

.handwriting-page {
  box-shadow: 0 14px 40px rgba(32, 42, 51, .10);
}

.hybrid-textbox:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(111, 157, 195, .18);
}

body#login-body .wrapper form {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

:root[data-app-theme="dark"] body.embedded-page,
:root[data-app-theme="dark"] body.embedded-page .page {
  background: var(--background-color);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .page-header,
:root[data-app-theme="dark"] .panel {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
  box-shadow: var(--soft-shadow-sm);
}

:root[data-app-theme="dark"] .page-title,
:root[data-app-theme="dark"] .panel h2 {
  color: var(--text-color);
}

:root[data-app-theme="dark"] .subtitle,
:root[data-app-theme="dark"] .page-subtitle,
:root[data-app-theme="dark"] .form-label {
  color: var(--text-secondary);
}

/* Desktop + Tablet interaction baseline */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior: contain;
}

:focus-visible {
  outline: 3px solid rgba(111, 157, 195, .42);
  outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  box-shadow: 0 0 0 .22rem rgba(111, 157, 195, .20);
}

button,
.btn,
.nav-link,
.dropdown-item,
.form-control,
.form-select,
input,
select,
textarea,
[role="button"],
.list-group-item,
.filter-item,
.active-filter-item,
.toolbar-control,
.btn-close {
  touch-action: manipulation;
}

.btn,
button,
.nav-link,
.dropdown-item,
.toolbar-control,
.filter-item,
.active-filter-item,
.btn-close,
.person-tag-quick-btn,
.person-tag-pill-remove,
.timeline-paid-btn,
.therapy-status-icon {
  min-height: 34px;
}

.btn-sm,
.btn.btn-sm {
  min-height: 32px;
}

.btn-close {
  background-size: 13px 13px;
  border-radius: 999px;

  opacity: .72;

}

.btn-close:hover,
.btn-close:focus {
  background-color: rgba(111, 157, 195, .12);
  opacity: 1;
}

.modal-close-btn,
.modal-content > .close {

  background: #fff;
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: 999px;
  color: var(--text-secondary, var(--color-text-muted));

  font-size: 1.15rem;
  font-weight: 600;

  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;

}

.modal-close-btn:hover,
.modal-close-btn:focus,
.modal-content > .close:hover,
.modal-content > .close:focus {
  background: rgba(111, 157, 195, .12);
  border-color: rgba(111, 157, 195, .36);
  color: var(--primary-color, #3F5F7D);
  outline: none;
}

.modal-content > .close {
  cursor: pointer;
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
}

.icon-btn:has(i),
.section-icon-btn:has(i),
.calendar-filter-action:has(i),
.home-icon-btn:has(i),
.home-header-icon-btn:has(i),
.home-simple-action:has(i),
.termin-action:has(i),
.termin-add-btn:has(i),
.open-invoice-action:has(i),
.open-service-billing-btn:has(i),
.task-widget-action:has(i),
.overview-action:has(i),
.overview-task-action:has(i),
.therapy-icon-btn:has(i),
.service-action-btn:has(i),
.booking-icon-btn:has(i),
.forms-icon-btn:has(i),
.settings-icon-action:has(i),
.snippet-action-btn:has(i),
.user-action-btn:has(i),
.timeline-icon-action:has(i),
.person-task-action-btn:has(i),
.person-task-done-btn:has(i),
.modal-close-btn,
.modal-content > .close,
.btn-close {
  align-items: center;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  inline-size: 34px;
  justify-content: center;
  line-height: 1;
  max-height: 34px;
  max-width: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 0;
  width: 34px;
}

.icon-btn:has(i) i,
.section-icon-btn:has(i) i,
.calendar-filter-action:has(i) i,
.home-icon-btn:has(i) i,
.home-header-icon-btn:has(i) i,
.home-simple-action:has(i) i,
.termin-action:has(i) i,
.termin-add-btn:has(i) i,
.open-invoice-action:has(i) i,
.open-service-billing-btn:has(i) i,
.task-widget-action:has(i) i,
.overview-action:has(i) i,
.overview-task-action:has(i) i,
.therapy-icon-btn:has(i) i,
.service-action-btn:has(i) i,
.booking-icon-btn:has(i) i,
.forms-icon-btn:has(i) i,
.settings-icon-action:has(i) i,
.snippet-action-btn:has(i) i,
.user-action-btn:has(i) i,
.timeline-icon-action:has(i) i,
.person-task-action-btn:has(i) i,
.person-task-done-btn:has(i) i {
  display: block;
  line-height: 1;
  margin: 0;
  text-align: center;
}

input,
select,
textarea,
.form-control,
.form-select {
  font-size: max(16px, 1rem);
}

.table-responsive,
.person-invoice-scroll,
.modal-body,
.timeline-notes-layout,
.person-list {
  -webkit-overflow-scrolling: touch;
}

.table-responsive {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

table,
.table {
  max-width: 100%;
}

.table th,
.table td {
  vertical-align: middle;
}

.table {
  border-color: var(--border-color);
  color: var(--text-color);
}

.table thead th {
  background: var(--color-surface-hover);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: var(--app-weight-semibold);
  letter-spacing: 0;
  padding: 10px 12px;
  text-transform: none;
}

.table tbody td {
  border-color: var(--color-border-subtle);
  padding: 10px 12px;
}

.table tbody tr:hover {
  background: rgba(111, 157, 195, .08);
}

.dropdown-menu {
  max-width: min(420px, calc(100vw - 24px));
}

.modal-dialog {
  max-width: min(var(--bs-modal-width, 96vw), calc(100vw - 24px));
}

.modal-content,
.upload-content,
.invoice-content {
  max-width: calc(100vw - 24px);
}

@media (hover: none), (pointer: coarse) {
  body {
    font-size: 16px;
  }

  .navbar .nav-link,
  .navbar .dropdown-item,
  .btn,
  button,
  .toolbar-control,
  .filter-item,
  .active-filter-item,
  .list-group-item {
    min-height: 44px;
  }

  .btn-sm,
  .btn.btn-sm {
    min-height: 38px;
  }

  .navbar .nav-link,
  .dropdown-item {
    align-items: center;
    display: flex;
  }

  .btn:hover {
    transform: none;
  }

  .list-group-item:hover,
  .timeline-item:hover,
  .person-note-item:hover,
  .therapy-card-row:hover {
    box-shadow: none;
  }

  .form-control,
  .form-select,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-height: 22px;
    min-width: 22px;
  }

  .modal-dialog {
    margin-left: 12px;
    margin-right: 12px;
  }

  .modal-header,
  .modal-footer {
    gap: 8px;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .modal-footer .btn,
  .person-invoice-actions .btn {
    flex: 1 1 auto;
  }
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  input,
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: .95rem;
  }
}

@media (max-width: 768px) {
  body#main-body > #content-wrapper,
  body#main-body #app.container-fluid,
  body#main-body.embedded-page .site-wrapper > main,
  body#main-body.embedded-page > main,
  body#main-body.embedded-page #app.container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .modal-dialog {
    margin-top: calc(var(--app-nav-height, 58px) + 10px);
  }

  .modal-content,
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - var(--app-nav-height, 58px) - 22px);
  }
}

/* Cross-app responsive polish for desktop, laptop and tablets */
@media (max-width: 1180px) {
  body#main-body > #content-wrapper,
  body#main-body #app.container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  .card,
  .account-panel,
  .user-panel,
  .billing-card,
  .therapy-panel,
  .settings-card {
    border-radius: var(--radius);
  }

  .table-responsive {
    border-radius: var(--radius);
    scrollbar-gutter: stable;
  }
}

@media (min-width: 769px) and (max-width: 1180px), (hover: none) and (pointer: coarse) {
  .modal-dialog {
    max-width: min(var(--bs-modal-width, 92vw), calc(100vw - 28px));
  }

  .modal-body {
    scrollbar-gutter: stable;
  }

  .btn,
  button,
  .toolbar-control,
  .icon-btn,
  .view-btn,
  .section-icon-btn,
  .calendar-filter-action {
    min-height: 40px;
  }

  .toolbar-control,
  .icon-btn,
  .view-btn,
  .section-icon-btn,
  .calendar-filter-action {
    min-width: 40px;
  }

  .form-control,
  .form-select,
  input,
  select,
  textarea {
    line-height: 1.35;
  }
}

@media (max-width: 640px) {
  .modal-footer {
    align-items: stretch;
  }

  .modal-footer .btn {
    width: 100%;
  }

  .table th,
  .table td {
    white-space: normal;
    word-break: break-word;
  }

  .dropdown-menu {
    max-width: calc(100vw - 18px);
  }
}

:root {
  --app-widget-icon-button-size: 34px;
  --app-widget-icon-button-radius: 10px;
  --app-widget-icon-button-bg: #3f5f7d;
  --app-widget-icon-button-bg-hover: #334e68;
  --app-widget-icon-button-fg: #ffffff;
  --app-widget-icon-button-disabled-bg: #e8f2f2;
  --app-widget-icon-button-disabled-border: #d8e1e1;
  --app-widget-icon-button-disabled-fg: #9aa8a8;
}

.home-card :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
),
#homeWidgetModalBody :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
),
.home-widget-modal-actions :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
),
.widget-card :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
) {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--app-widget-icon-button-bg);
  border: 1px solid var(--app-widget-icon-button-bg);
  border-radius: var(--app-widget-icon-button-radius);
  color: var(--app-widget-icon-button-fg);
  display: inline-flex;
  flex: 0 0 var(--app-widget-icon-button-size);
  height: var(--app-widget-icon-button-size);
  justify-content: center;
  line-height: 1;
  min-height: var(--app-widget-icon-button-size);
  min-width: var(--app-widget-icon-button-size);
  padding: 0;
  text-decoration: none;
  width: var(--app-widget-icon-button-size);
}

.home-card :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action:not(.disabled):not([aria-disabled="true"]),
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
):is(:hover, :focus-visible),
#homeWidgetModalBody :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action:not(.disabled):not([aria-disabled="true"]),
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
):is(:hover, :focus-visible),
.home-widget-modal-actions :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action:not(.disabled):not([aria-disabled="true"]),
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
):is(:hover, :focus-visible),
.widget-card :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action:not(.disabled):not([aria-disabled="true"]),
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
):is(:hover, :focus-visible) {
  background: var(--app-widget-icon-button-bg-hover);
  border-color: var(--app-widget-icon-button-bg-hover);
  color: var(--app-widget-icon-button-fg);
  text-decoration: none;
  transform: none;
}

.home-card :is(.termin-action.disabled, .termin-action[aria-disabled="true"]),
#homeWidgetModalBody :is(.termin-action.disabled, .termin-action[aria-disabled="true"]),
.home-widget-modal-actions :is(.termin-action.disabled, .termin-action[aria-disabled="true"]),
.widget-card :is(.termin-action.disabled, .termin-action[aria-disabled="true"]) {
  background: var(--app-widget-icon-button-disabled-bg);
  border-color: var(--app-widget-icon-button-disabled-border);
  color: var(--app-widget-icon-button-disabled-fg);
  cursor: not-allowed;
  opacity: .75;
  pointer-events: none;
}

.home-card :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
) :is(i, svg),
#homeWidgetModalBody :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
) :is(i, svg),
.home-widget-modal-actions :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
) :is(i, svg),
.widget-card :is(
  .home-icon-btn,
  .home-simple-action,
  .home-header-icon-btn,
  .termin-action,
  .termin-add-btn,
  .open-invoice-action,
  .open-service-billing-btn,
  .task-widget-action,
  .overview-action,
  .overview-task-action
) :is(i, svg) {
  color: inherit;
  display: block;
  line-height: 1;
  margin: 0;
  text-align: center;
}

:root[data-app-theme="dark"] body#main-body,
:root[data-app-theme="dark"] .site-wrapper,
:root[data-app-theme="dark"] main,
:root[data-app-theme="dark"] #content-wrapper,
:root[data-app-theme="dark"] #app.container-fluid {
  background: var(--color-canvas);
  color: var(--text-color);
}

:root[data-app-theme="dark"] .card,
:root[data-app-theme="dark"] .modal-content,
:root[data-app-theme="dark"] .dropdown-menu,
:root[data-app-theme="dark"] .list-group-item,
:root[data-app-theme="dark"] .settings-card,
:root[data-app-theme="dark"] .account-panel,
:root[data-app-theme="dark"] .user-panel,
:root[data-app-theme="dark"] .billing-card,
:root[data-app-theme="dark"] .therapy-panel,
:root[data-app-theme="dark"] .person-panel,
:root[data-app-theme="dark"] .person-info-box,
:root[data-app-theme="dark"] .timeline-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

:root[data-app-theme="dark"] .list-group-item:hover,
:root[data-app-theme="dark"] .dropdown-item:hover,
:root[data-app-theme="dark"] .dropdown-item:focus,
:root[data-app-theme="dark"] .table-hover tbody tr:hover,
:root[data-app-theme="dark"] table tbody tr:hover {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  color: #ffffff;
}

:root[data-app-theme="dark"] .modal-header,
:root[data-app-theme="dark"] .modal-footer,
:root[data-app-theme="dark"] .table th,
:root[data-app-theme="dark"] table th {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

:root[data-app-theme="dark"] .form-control,
:root[data-app-theme="dark"] .form-select,
:root[data-app-theme="dark"] input,
:root[data-app-theme="dark"] select,
:root[data-app-theme="dark"] textarea {
  background-color: var(--color-surface-inset);
  border-color: var(--color-border);
  color: var(--color-text);
}

:root[data-app-theme="dark"] .text-muted,
:root[data-app-theme="dark"] .muted,
:root[data-app-theme="dark"] small,
:root[data-app-theme="dark"] .small,
:root[data-app-theme="dark"] .form-text {
  color: var(--text-secondary);
}

:root[data-app-theme="dark"] .btn-primary,
:root[data-app-theme="dark"] .btn-outline-primary,
:root[data-app-theme="dark"] .primary-btn,
:root[data-app-theme="dark"] .button-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

:root[data-app-theme="dark"] .btn-primary:hover,
:root[data-app-theme="dark"] .btn-outline-primary:hover,
:root[data-app-theme="dark"] .primary-btn:hover,
:root[data-app-theme="dark"] .button-primary:hover {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
  color: #ffffff;
}

/* Shared app components for all PHP pages. */
:root {
  --ui-radius: var(--radius, 10px);
  --ui-radius-sm: 8px;
  --ui-icon-size: 34px;
  --ui-icon-size-sm: 30px;
  --ui-focus-ring: 0 0 0 .2rem rgba(111, 157, 195, .22);
  --ui-button-bg: var(--surface-color, #FFFFFF);
  --ui-button-border: var(--border-color, var(--color-border));
  --ui-button-text: var(--primary-color, #3F5F7D);
  --ui-pill-bg: rgba(111, 157, 195, .12);
  --ui-pill-border: rgba(111, 157, 195, .28);
}

.btn:not(.btn-link) {
  border-radius: var(--ui-radius-sm);
  font-weight: 700;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
}

.btn-primary,
.button-primary,
.primary-btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--on-primary-color, #FFFFFF);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.button-primary:hover,
.button-primary:focus-visible,
.primary-btn:hover,
.primary-btn:focus-visible {
  background-color: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
  color: var(--on-primary-color, #FFFFFF);
  box-shadow: var(--ui-focus-ring);
}

.btn-outline-primary {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--on-primary-color, #FFFFFF);
  box-shadow: var(--ui-focus-ring);
}

.ui-icon-btn,
.icon-btn,
.home-header-icon-btn,
.booking-icon-btn,
.calendar-icon-btn,
.settings-icon-btn,
.forms-icon-btn,
.snippet-action-btn,
.user-action-btn,
.calendar-sync-icon-btn,
.task-widget-action,
.overview-action,
.termin-action,
.open-invoice-action,
.open-service-billing-btn {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: var(--ui-button-bg);
  border: 1px solid var(--ui-button-border);
  border-radius: var(--ui-radius-sm);
  box-sizing: border-box;
  color: var(--ui-button-text);
  display: inline-flex;
  flex: 0 0 var(--ui-icon-size);
  height: var(--ui-icon-size);
  justify-content: center;
  line-height: 1;
  min-height: var(--ui-icon-size);
  min-width: var(--ui-icon-size);
  padding: 0;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .16s ease;
  width: var(--ui-icon-size);
}

.ui-icon-btn.is-sm,
.icon-btn.is-sm {
  flex-basis: var(--ui-icon-size-sm);
  height: var(--ui-icon-size-sm);
  min-height: var(--ui-icon-size-sm);
  min-width: var(--ui-icon-size-sm);
  width: var(--ui-icon-size-sm);
}

.ui-icon-btn:hover,
.ui-icon-btn:focus-visible,
.icon-btn:hover,
.icon-btn:focus-visible,
.home-header-icon-btn:hover,
.home-header-icon-btn:focus-visible,
.booking-icon-btn:hover,
.booking-icon-btn:focus-visible,
.calendar-icon-btn:hover,
.calendar-icon-btn:focus-visible,
.settings-icon-btn:hover,
.settings-icon-btn:focus-visible,
.forms-icon-btn:hover,
.forms-icon-btn:focus-visible,
.snippet-action-btn:hover,
.snippet-action-btn:focus-visible,
.user-action-btn:hover,
.user-action-btn:focus-visible,
.calendar-sync-icon-btn:hover,
.calendar-sync-icon-btn:focus-visible,
.task-widget-action:hover,
.task-widget-action:focus-visible,
.overview-action:hover,
.overview-action:focus-visible,
.termin-action:hover,
.termin-action:focus-visible,
.open-invoice-action:hover,
.open-invoice-action:focus-visible,
.open-service-billing-btn:hover,
.open-service-billing-btn:focus-visible {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--on-primary-color, #FFFFFF);
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

.ui-icon-btn :is(i, svg),
.icon-btn :is(i, svg),
.home-header-icon-btn :is(i, svg),
.booking-icon-btn :is(i, svg),
.calendar-icon-btn :is(i, svg),
.settings-icon-btn :is(i, svg),
.forms-icon-btn :is(i, svg),
.snippet-action-btn :is(i, svg),
.user-action-btn :is(i, svg),
.calendar-sync-icon-btn :is(i, svg),
.task-widget-action :is(i, svg),
.overview-action :is(i, svg),
.termin-action :is(i, svg),
.open-invoice-action :is(i, svg),
.open-service-billing-btn :is(i, svg) {
  color: inherit;
  display: block;
  line-height: 1;
  margin: 0;
}

.ui-soft-btn {
  align-items: center;
  background: var(--ui-button-bg);
  border: 1px solid var(--ui-button-border);
  border-radius: var(--ui-radius-sm);
  color: var(--ui-button-text);
  display: inline-flex;
  font-weight: 700;
  gap: .4rem;
  line-height: 1.15;
  padding: .42rem .68rem;
  text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}

.ui-soft-btn:hover,
.ui-soft-btn:focus-visible {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--on-primary-color, #FFFFFF);
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

.ui-pill,
.badge-soft,
.status-pill,
.booking-pill,
.task-state-pill,
.task-date-pill {
  align-items: center;
  background: var(--ui-pill-bg);
  border: 1px solid var(--ui-pill-border);
  border-radius: 999px;
  color: var(--primary-color);
  display: inline-flex;
  font-weight: var(--app-weight-semibold);
  gap: .35rem;
  line-height: 1.1;
  max-width: 100%;
  padding: .22rem .55rem;
  white-space: nowrap;
}

:root[data-app-theme="dark"] {
  --ui-button-bg: var(--color-surface);
  --ui-button-border: var(--color-border-strong);
  --ui-button-text: #DCEAF5;
  --ui-pill-bg: rgba(111, 157, 195, .14);
  --ui-pill-border: var(--color-border);
  --ui-focus-ring: 0 0 0 .2rem rgba(145, 189, 226, .24);
}

:root[data-app-theme="dark"] .btn-outline-primary {
  background: transparent;
  border-color: var(--color-border-strong);
  color: #DFF8F8;
}

:root[data-app-theme="dark"] .ui-icon-btn,
:root[data-app-theme="dark"] .icon-btn,
:root[data-app-theme="dark"] .home-header-icon-btn,
:root[data-app-theme="dark"] .booking-icon-btn,
:root[data-app-theme="dark"] .calendar-icon-btn,
:root[data-app-theme="dark"] .settings-icon-btn,
:root[data-app-theme="dark"] .forms-icon-btn,
:root[data-app-theme="dark"] .snippet-action-btn,
:root[data-app-theme="dark"] .user-action-btn,
:root[data-app-theme="dark"] .calendar-sync-icon-btn,
:root[data-app-theme="dark"] .task-widget-action,
:root[data-app-theme="dark"] .overview-action,
:root[data-app-theme="dark"] .termin-action,
:root[data-app-theme="dark"] .open-invoice-action,
:root[data-app-theme="dark"] .open-service-billing-btn,
:root[data-app-theme="dark"] .ui-soft-btn {
  background: var(--ui-button-bg);
  border-color: var(--ui-button-border);
  color: var(--ui-button-text);
  box-shadow: none;
}

:root[data-app-theme="dark"] .ui-icon-btn:hover,
:root[data-app-theme="dark"] .ui-icon-btn:focus-visible,
:root[data-app-theme="dark"] .icon-btn:hover,
:root[data-app-theme="dark"] .icon-btn:focus-visible,
:root[data-app-theme="dark"] .home-header-icon-btn:hover,
:root[data-app-theme="dark"] .home-header-icon-btn:focus-visible,
:root[data-app-theme="dark"] .booking-icon-btn:hover,
:root[data-app-theme="dark"] .booking-icon-btn:focus-visible,
:root[data-app-theme="dark"] .calendar-icon-btn:hover,
:root[data-app-theme="dark"] .calendar-icon-btn:focus-visible,
:root[data-app-theme="dark"] .settings-icon-btn:hover,
:root[data-app-theme="dark"] .settings-icon-btn:focus-visible,
:root[data-app-theme="dark"] .forms-icon-btn:hover,
:root[data-app-theme="dark"] .forms-icon-btn:focus-visible,
:root[data-app-theme="dark"] .snippet-action-btn:hover,
:root[data-app-theme="dark"] .snippet-action-btn:focus-visible,
:root[data-app-theme="dark"] .user-action-btn:hover,
:root[data-app-theme="dark"] .user-action-btn:focus-visible,
:root[data-app-theme="dark"] .calendar-sync-icon-btn:hover,
:root[data-app-theme="dark"] .calendar-sync-icon-btn:focus-visible,
:root[data-app-theme="dark"] .task-widget-action:hover,
:root[data-app-theme="dark"] .task-widget-action:focus-visible,
:root[data-app-theme="dark"] .overview-action:hover,
:root[data-app-theme="dark"] .overview-action:focus-visible,
:root[data-app-theme="dark"] .termin-action:hover,
:root[data-app-theme="dark"] .termin-action:focus-visible,
:root[data-app-theme="dark"] .open-invoice-action:hover,
:root[data-app-theme="dark"] .open-invoice-action:focus-visible,
:root[data-app-theme="dark"] .open-service-billing-btn:hover,
:root[data-app-theme="dark"] .open-service-billing-btn:focus-visible,
:root[data-app-theme="dark"] .ui-soft-btn:hover,
:root[data-app-theme="dark"] .ui-soft-btn:focus-visible {
  background: #253541;
  border-color: var(--secondary-color);
  color: #FFFFFF;
  box-shadow: var(--ui-focus-ring);
}

:root[data-app-theme="dark"] .ui-pill,
:root[data-app-theme="dark"] .badge-soft,
:root[data-app-theme="dark"] .status-pill,
:root[data-app-theme="dark"] .booking-pill,
:root[data-app-theme="dark"] .task-state-pill,
:root[data-app-theme="dark"] .task-date-pill {
  background: var(--ui-pill-bg);
  border-color: var(--ui-pill-border);
  color: #DFF8F8;
}

/* Einstellungsseiten scrollen ausschließlich in der Arbeitsfläche unter der
   fixierten Navbar. So beginnt auch der Scrollbalken erst unter der Navigation. */
html:has(body#main-body.settings-scroll-body) {
  height: 100%;
  overflow: hidden;
}

body#main-body.settings-scroll-body {
  box-sizing: border-box;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding-top: 0;
}

body#main-body.settings-scroll-body > .site-wrapper {
  height: 100dvh;
  max-height: 100dvh;
  min-height: 0;
  overflow: visible;
}

body#main-body.settings-scroll-body > main,
body#main-body.settings-scroll-body > .site-wrapper > main {
  box-sizing: border-box;
  height: calc(100dvh - var(--app-nav-height, 58px));
  margin-top: var(--app-nav-height, 58px);
  max-height: calc(100dvh - var(--app-nav-height, 58px));
  min-height: 0;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  width: 100%;
}

body#main-body.settings-scroll-body > main::-webkit-scrollbar,
body#main-body.settings-scroll-body > .site-wrapper > main::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

body#main-body.settings-scroll-body > main::-webkit-scrollbar-track,
body#main-body.settings-scroll-body > .site-wrapper > main::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
}

body#main-body.settings-scroll-body > main::-webkit-scrollbar-thumb,
body#main-body.settings-scroll-body > .site-wrapper > main::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  background-color: var(--app-scrollbar-thumb);
  border: 3px solid transparent;
  border-radius: 999px;
}

body#main-body.settings-scroll-body > main::-webkit-scrollbar-thumb:hover,
body#main-body.settings-scroll-body > .site-wrapper > main::-webkit-scrollbar-thumb:hover {
  background-color: var(--app-scrollbar-thumb-hover);
}

body#main-body.settings-scroll-body :is(
  .settings-page,
  .snippets-page,
  .forms-page,
  .booking-admin-page,
  .booking-types-page,
  .user-admin-page,
  .patient-therapies-page,
  .calendar-sync-page,
  .audit-page,
  .icd10-admin-page,
  .device-settings-page,
  .page
) {
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: 100%;
}

/* Unified modal system: consistent surfaces, usable heights and tablet controls. */
:root {
  --app-modal-backdrop: rgba(24, 38, 39, .46);
  --app-modal-shadow: 0 24px 64px rgba(32, 42, 51, .20);
  --app-modal-header-bg: #fbfcfc;
  --app-modal-footer-bg: #f8fafa;
  --app-modal-divider: var(--border-color, var(--color-border));
}

:root[data-app-theme="dark"] {
  --app-modal-backdrop: rgba(0, 0, 0, .68);
  --app-modal-shadow: 0 28px 72px rgba(0, 0, 0, .52);
  --app-modal-header-bg: #121d1d;
  --app-modal-footer-bg: #0d1515;
  --app-modal-divider: var(--color-border);
}

body#main-body .modal-backdrop {
  background-color: var(--app-modal-backdrop);
}

body#main-body .modal-backdrop.show {
  opacity: 1;
}

/* A visible modal is the only interactive UI layer. The script applies inert
   to every background branch, including navigation with a higher z-index. */
body.app-modal-isolated [data-app-modal-inert] {
  pointer-events: none !important;
  user-select: none !important;
}

body.app-modal-isolated [data-app-modal-inert] * {
  pointer-events: none !important;
}

@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))) {
  body#main-body .modal-backdrop.show,
  body#main-body :is(.upload-modal-backdrop, .invoice-modal) {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

body#main-body .modal {
  box-sizing: border-box;
  padding: 0 16px;
}

body#main-body .modal .modal-dialog {
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(var(--app-nav-height, 58px) + 20px);
}

:where(body#main-body .modal .modal-dialog) {
  --bs-modal-width: 620px;
  max-width: min(var(--bs-modal-width), calc(100vw - 32px));
  width: 100%;
}

:where(body#main-body .modal .modal-dialog.modal-lg) {
  --bs-modal-width: 900px;
}

:where(body#main-body .modal .modal-dialog.modal-xl) {
  --bs-modal-width: 1180px;
}

:where(body#main-body .modal .modal-dialog.modal-sm) {
  --bs-modal-width: 420px;
}

body#main-body .modal .modal-content,
body#main-body :is(.upload-content, .invoice-content) {
  background: var(--surface-color);
  border: 1px solid var(--app-modal-divider);
  border-radius: var(--radius, 10px);
  box-shadow: var(--app-modal-shadow);
  color: var(--text-color);
}

body#main-body .modal .modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--app-nav-height, 58px) - 40px);
  min-height: 0;
  overflow: hidden;
}

/*
 * Many dialogs wrap header, body and footer in a form. The form must take part
 * in the modal's flex layout; otherwise the body grows beyond the viewport and
 * never receives its own scrollbar.
 */
body#main-body .modal .modal-content > form:not(.modal-content) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

body#main-body .modal :is(.modal-header, .modal-footer) {
  border-color: var(--app-modal-divider);
  flex: 0 0 auto;
  gap: 8px;
  padding: 10px 16px;
}

body#main-body .modal .modal-header {
  background: var(--app-modal-header-bg);
  border-bottom-width: 1px;
  min-height: 54px;
}

body#main-body .modal .modal-footer {
  background: var(--app-modal-footer-bg);
  border-top-width: 1px;
}

body#main-body .modal .modal-title {
  color: var(--text-color);
  font-size: clamp(1rem, .96rem + .22vw, 1.18rem);
  font-weight: var(--app-weight-heading);
  letter-spacing: -.01em;
  margin: 0;
}

/* Context-first modal headings: action, primary reference and optional meta. */
body#main-body .modal .app-modal-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
  min-width: 0;
}

body#main-body .modal .app-modal-kicker {
  align-items: center;
  color: var(--color-text-muted);
  display: inline-flex;
  font-size: .9rem;
  font-weight: var(--app-weight-semibold);
  gap: 6px;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
}

body#main-body .modal .app-modal-kicker i {
  color: var(--color-action-text);
}

body#main-body .modal .app-modal-context {
  color: var(--text-color, var(--color-text));
  font-size: clamp(1rem, .96rem + .22vw, 1.18rem);
  font-weight: var(--app-weight-semibold);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

body#main-body .modal .app-modal-meta {
  align-items: center;
  color: var(--text-muted, var(--color-text-muted));
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  font-size: .76rem;
  font-weight: 650;
  gap: 3px 8px;
  line-height: 1.3;
}

body#main-body .modal .app-modal-meta > span {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

body#main-body .modal .app-modal-meta i {
  color: var(--secondary-color, #6f9dc3);
}

body#main-body .modal .app-modal-meta:empty {
  display: none;
}

body#main-body .modal .modal-body {
  background: var(--surface-color);
  color: var(--text-color);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  scrollbar-gutter: stable;
}

body#main-body .modal .modal-body.p-0 {
  padding: 0;
}

body#main-body .modal :is(.form-control, .form-select, textarea) {
  background-color: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

body#main-body .modal :is(.form-control, .form-select, textarea):focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 .2rem var(--input-focus-shadow);
}

body#main-body .modal .btn-close {
  border-radius: var(--app-radius);
  flex: 0 0 38px;
  height: 38px;
  margin: 0;
  min-height: 38px;
  min-width: 38px;
  opacity: .72;
  padding: 0;
  transition: background-color .16s ease, box-shadow .16s ease, opacity .16s ease;
  width: 38px;
}

body#main-body .modal .btn-close:is(:hover, :focus-visible) {
  background-color: var(--surface-hover-color);
  box-shadow: 0 0 0 3px var(--focus-ring-color);
  opacity: 1;
}

:root[data-app-theme="dark"] body#main-body .modal .btn-close {
  filter: invert(1) grayscale(1) brightness(1.8);
}

body#main-body :is(.upload-modal-backdrop, .invoice-modal) {
  background: var(--app-modal-backdrop);
  box-sizing: border-box;
}

@media (min-width: 769px) and (max-width: 1180px) {
  body#main-body .modal {
    padding-left: 20px;
    padding-right: 20px;
  }

  :where(body#main-body .modal .modal-dialog) {
    max-width: min(var(--bs-modal-width), calc(100vw - 40px));
  }

  :where(body#main-body .modal .modal-dialog.modal-lg),
  :where(body#main-body .modal .modal-dialog.modal-xl) {
    max-width: calc(100vw - 40px);
  }

  body#main-body .modal :is(.modal-header, .modal-footer) {
    padding: 10px 16px;
  }

  body#main-body .modal .modal-footer .btn {
    min-height: 44px;
  }

  body#main-body :is(.upload-modal-backdrop, .invoice-modal) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 768px) {
  body#main-body .modal {
    padding: 0 10px;
  }

  body#main-body .modal .modal-dialog {
    margin-bottom: 10px;
    margin-top: calc(var(--app-nav-height, 58px) + 10px);
  }

  :where(body#main-body .modal .modal-dialog),
  :where(body#main-body .modal .modal-dialog.modal-sm),
  :where(body#main-body .modal .modal-dialog.modal-lg),
  :where(body#main-body .modal .modal-dialog.modal-xl) {
    max-width: calc(100vw - 20px);
  }

  body#main-body .modal .modal-content {
    max-height: calc(100dvh - var(--app-nav-height, 58px) - 20px);
  }

  body#main-body .modal :is(.modal-header, .modal-footer) {
    padding: 10px 14px;
  }

  body#main-body .modal .modal-body {
    padding: 14px;
    scrollbar-gutter: auto;
  }

  body#main-body .modal .modal-footer {
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
  }

  body#main-body .modal .modal-footer .btn {
    flex: 1 1 140px;
    margin: 0;
    min-height: 44px;
    white-space: normal;
    width: auto;
  }

  body#main-body :is(.upload-modal-backdrop, .invoice-modal) {
    padding-left: 10px;
    padding-right: 10px;
  }

  body#main-body .modal .modal-dialog.modal-fullscreen-md-down {
    height: 100dvh;
    margin: 0;
    max-width: none;
    width: 100vw;
  }

  body#main-body .modal .modal-dialog.modal-fullscreen-md-down .modal-content {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    max-height: 100dvh;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  body#main-body .modal .modal-dialog {
    margin-bottom: 8px;
    margin-top: 8px;
  }

  body#main-body .modal .modal-content {
    max-height: calc(100dvh - 16px);
  }

  body#main-body .modal :is(.modal-header, .modal-footer) {
    padding-bottom: 10px;
    padding-top: 10px;
  }
}

/* Document previews intentionally use the available viewport instead of a standard dialog size. */
body#main-body #fileModal .modal-dialog.invoice-preview-dialog {
  height: calc(100dvh - 16px);
  margin: 8px auto;
  max-width: none;
  width: min(1180px, calc(100vw - 32px));
}

body#main-body #fileModal .modal-dialog.invoice-preview-dialog .modal-content {
  height: 100%;
  max-height: 100%;
}