/* Nunito is the UI typeface; the Leemie wordmark uses official SVG artwork. */
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-regular.183c6cf316d7.ttf") format("truetype");
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/nunito-semibold.ebac8f20708a.ttf") format("truetype");
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/nunito-extrabold.1b6748774878.ttf") format("truetype");
}

@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/nunito-black.cde860028be8.ttf") format("truetype");
}

:root {
  --leemie-light-teal: #46b8aa;
  --leemie-teal: #06786e;
  --leemie-deep-teal: #0b3b3a;
  --leemie-mint: #d0e8e3;
  --clinic-page-bg: #f5fbf9;
  --clinic-surface: #ffffff;
  --clinic-surface-muted: var(--leemie-mint);
  --clinic-border: #d9e9e4;
  --clinic-ink: #173f3b;
  --clinic-muted: #4f6b67;
  --clinic-accent: #06786e;
  --clinic-accent-strong: #065e57;
  --clinic-success: #2f7d4f;
  --clinic-warning: #996c12;
  --clinic-danger: #b42318;
  --clinic-focus: var(--leemie-teal);
  --bs-body-font-family: Nunito, ui-sans-serif, system-ui, sans-serif;
  --bs-body-color: var(--clinic-ink);
  --bs-body-bg: var(--clinic-page-bg);
  --bs-primary: var(--clinic-accent);
  --bs-primary-rgb: 6, 120, 110;
  --bs-link-color: var(--clinic-accent);
  --bs-link-hover-color: var(--clinic-accent-strong);
  --bs-border-color: var(--clinic-border);
  --bs-border-radius: 0.6rem;
}

html {
  font-size: 85%;
}

body {
  background: var(--clinic-page-bg);
  color: var(--clinic-ink);
  font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--clinic-ink);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.btn-primary {
  --bs-btn-bg: var(--clinic-accent);
  --bs-btn-border-color: var(--clinic-accent);
  --bs-btn-hover-bg: var(--clinic-accent-strong);
  --bs-btn-hover-border-color: var(--clinic-accent-strong);
  --bs-btn-active-bg: var(--leemie-deep-teal);
  --bs-btn-active-border-color: var(--leemie-deep-teal);
  --bs-btn-disabled-bg: var(--clinic-accent);
  --bs-btn-disabled-border-color: var(--clinic-accent);
  --bs-btn-focus-shadow-rgb: 6, 120, 110;
}

.btn-outline-primary {
  --bs-btn-color: var(--clinic-accent);
  --bs-btn-border-color: var(--clinic-accent);
  --bs-btn-hover-bg: var(--clinic-accent);
  --bs-btn-hover-border-color: var(--clinic-accent);
  --bs-btn-active-bg: var(--clinic-accent-strong);
  --bs-btn-active-border-color: var(--clinic-accent-strong);
  --bs-btn-disabled-color: var(--clinic-accent);
  --bs-btn-disabled-border-color: var(--clinic-accent);
  --bs-btn-focus-shadow-rgb: 6, 120, 110;
}

.btn {
  font-weight: 700;
}

.form-control,
.form-select {
  border-color: var(--clinic-border);
  color: var(--clinic-ink);
}

.form-check-input:checked {
  background-color: var(--clinic-accent);
  border-color: var(--clinic-accent);
}

.form-check-input:focus {
  border-color: var(--clinic-focus);
  box-shadow: 0 0 0 0.2rem rgb(15 143 130 / 22%);
}

.table {
  --bs-table-color: var(--clinic-ink);
  --bs-table-bg: var(--clinic-surface);
  --bs-table-border-color: var(--clinic-border);
  --bs-table-striped-bg: #f3faf7;
  --bs-table-hover-bg: var(--leemie-mint);
  --bs-table-active-bg: var(--leemie-mint);
}

.table thead th {
  background: #f3faf7;
  color: var(--clinic-muted);
  font-weight: 800;
}

.pagination {
  --bs-pagination-color: var(--clinic-accent);
  --bs-pagination-hover-color: var(--clinic-accent-strong);
  --bs-pagination-hover-bg: var(--leemie-mint);
  --bs-pagination-focus-color: var(--clinic-accent-strong);
  --bs-pagination-focus-bg: var(--leemie-mint);
  --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgb(15 143 130 / 22%);
  --bs-pagination-active-bg: var(--clinic-accent);
  --bs-pagination-active-border-color: var(--clinic-accent);
}

a {
  color: var(--clinic-accent);
}

a:focus-visible,
button:focus-visible,
.form-control:focus,
.form-select:focus {
  border-color: var(--clinic-focus);
  box-shadow: 0 0 0 0.2rem rgb(15 143 130 / 22%);
  outline: none;
}

.form-error-summary {
  border-color: rgb(180 35 24 / 55%);
  color: var(--clinic-danger);
  font-weight: 600;
}

.errorlist {
  color: var(--clinic-danger);
  font-size: 0.92rem;
  font-weight: 700;
  list-style: none;
  margin: 0.35rem 0 0;
  padding-left: 0;
}

.errorlist li + li {
  margin-top: 0.2rem;
}

form:has(.errorlist) .form-control:invalid,
form:has(.errorlist) .form-select:invalid,
form:has(.errorlist) .form-check-input:invalid {
  border-color: rgb(180 35 24 / 70%);
}

.app-shell {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 100vh;
}

.app-sidebar {
  align-self: start;
  background: #f9fdfc;
  border-right: 1px solid #e9f3f2;
  color: var(--clinic-ink);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
  min-height: 100vh;
  overflow-y: auto;
  padding: 1.15rem 0.85rem;
  position: sticky;
  top: 0;
}

.app-sidebar-main {
  display: grid;
  gap: 1rem;
}

.app-brand {
  align-items: center;
  color: var(--leemie-teal);
  display: flex;
  font-weight: 700;
  gap: 0.65rem;
  text-decoration: none;
}

.app-brand:hover {
  color: var(--clinic-accent);
}

.app-wordmark {
  display: block;
  flex: 0 0 auto;
  height: auto;
  max-width: 100%;
  width: 9rem;
}

.app-sidebar .app-brand {
  padding: 0.6rem 0.75rem 0.9rem;
}

.app-nav {
  display: grid;
  gap: 0.2rem;
}

.app-nav a,
.app-sidebar-footer a,
.app-sidebar-footer button {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--clinic-muted);
  display: block;
  font: inherit;
  padding: 0.65rem 0.75rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.app-nav a:hover,
.app-nav a:focus,
.app-sidebar-footer a:hover,
.app-sidebar-footer a:focus,
.app-sidebar-footer button:hover,
.app-sidebar-footer button:focus {
  background: #eff8f5;
  color: var(--clinic-accent);
}

.app-nav a[aria-current="page"] {
  background: #e5f9f6;
  color: var(--clinic-accent);
  font-weight: 700;
}

.app-nav a {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  min-height: 42px;
}

.nav-icon {
  flex: none;
  height: 1.25rem;
  width: 1.25rem;
}

.app-sidebar-note {
  color: var(--clinic-muted);
  display: grid;
  font-size: 0.85rem;
  gap: 0.4rem;
  margin: 2rem 0.75rem 1rem;
}

.app-sidebar-note strong {
  color: var(--clinic-ink);
  font-weight: 600;
  line-height: 1.6;
}

.app-sidebar-orbit {
  color: #559b90;
  height: 2rem;
  margin-bottom: 0.3rem;
  width: 2rem;
}

.app-user {
  align-items: center;
  display: flex;
  gap: 0.85rem;
  min-width: 0;
}

.app-user-avatar {
  align-items: center;
  background: #e4f4f2;
  border: 1px solid #d9eeea;
  border-radius: 50%;
  color: var(--clinic-accent);
  display: flex;
  flex: none;
  font-size: 0.85rem;
  font-weight: 800;
  height: 2.65rem;
  justify-content: center;
  width: 2.65rem;
}

.settings-nav {
  display: grid;
  gap: 0.8rem;
}

.settings-nav a {
  border-radius: 8px;
  color: var(--clinic-muted);
  display: block;
  padding: 0.52rem 0.65rem;
  text-decoration: none;
}

.settings-nav a:hover,
.settings-nav a:focus,
.settings-nav a[aria-current="page"] {
  background: #e5f9f6;
  color: var(--clinic-accent);
}

.settings-nav a[aria-current="page"] {
  font-weight: 700;
}

.settings-back-link {
  border: 1px solid var(--clinic-border);
  font-weight: 700;
}

.settings-home-link {
  font-weight: 700;
}

.settings-nav-group {
  display: grid;
  gap: 0.12rem;
}

.settings-nav-group h2 {
  font-size: inherit;
  margin: 0;
}

.settings-nav .settings-nav-category {
  align-items: center;
  color: var(--clinic-muted);
  display: flex;
  font-size: 0.7rem;
  font-weight: 800;
  justify-content: space-between;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.settings-nav-items {
  display: grid;
  gap: 0.12rem;
}

.settings-nav-items a {
  padding-left: 1rem;
}

.app-main {
  min-width: 0;
  width: 100%;
}

.app-sidebar-footer {
  border-top: 1px solid var(--clinic-border);
  display: grid;
  gap: 0.2rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.auth-shell {
  align-items: center;
  background: linear-gradient(145deg, var(--leemie-mint), #fbfdfc);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}

.auth-panel {
  background: #ffffff;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(11 59 58 / 8%);
  max-width: 440px;
  padding: 2rem;
  width: 100%;
}

.auth-panel h1 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.auth-panel form p {
  display: grid;
  gap: 0.4rem;
}

.auth-panel label {
  font-weight: 700;
}

.auth-panel input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  background: #ffffff;
  border: 1px solid var(--clinic-border);
  border-radius: 8px;
  color: var(--clinic-ink);
  font: inherit;
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.auth-panel input:focus-visible {
  border-color: var(--clinic-focus);
  box-shadow: 0 0 0 0.2rem rgb(15 143 130 / 22%);
  outline: none;
}

.auth-panel .btn-primary {
  margin-top: 0.5rem;
  padding-block: 0.7rem;
  width: 100%;
}

.app-page-header {
  align-items: center;
  background: var(--clinic-surface);
  border-bottom: 1px solid var(--clinic-border);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 84px;
  padding: 1.2rem 1.75rem;
  width: 100%;
}

.app-page-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.app-eyebrow {
  color: var(--clinic-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-page-title {
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 0;
}

.app-user-summary {
  align-items: flex-end;
  color: var(--clinic-ink);
  display: flex;
  flex-direction: column;
  font-size: 0.84rem;
  justify-self: end;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.app-user-summary-label {
  color: var(--clinic-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.app-content {
  padding: 1.75rem;
}

.content-panel {
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 3px 12px rgb(11 59 58 / 2%);
}

.settings-home-intro {
  color: var(--clinic-muted);
  margin-bottom: 1rem;
}

.settings-home-intro p {
  margin: 0;
}

.settings-home-groups {
  display: grid;
  gap: 1.25rem;
}

.settings-home-group h2 {
  font-size: 1.05rem;
  margin: 0 0 0.65rem;
}

.settings-card-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.settings-card {
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  color: var(--clinic-ink);
  display: grid;
  gap: 0.35rem;
  min-height: 7rem;
  padding: 1rem;
  text-decoration: none;
}

.settings-card:hover,
.settings-card:focus {
  background: var(--leemie-mint);
  border-color: var(--clinic-focus);
  color: var(--clinic-ink);
}

.settings-card span {
  color: var(--clinic-muted);
  font-size: 0.9rem;
}

.calendar-panel {
  min-height: calc(100vh - 9rem);
}

.section-nav {
  align-items: center;
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.section-nav a {
  border-radius: 8px;
  color: var(--clinic-muted);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
}

.section-nav a:hover,
.section-nav a:focus {
  background: var(--leemie-mint);
  color: var(--leemie-deep-teal);
}

.section-nav a[aria-current="page"] {
  background: var(--leemie-mint);
  color: var(--leemie-deep-teal);
}

.panel-heading-actions {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
}

.panel-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.content-panel-narrow {
  max-width: 860px;
}

.searchable-select {
  position: relative;
}

.searchable-select-input {
  background-color: #fbfdfc;
  padding-right: 2rem;
}

.searchable-select::after {
  border-left: 0.32rem solid transparent;
  border-right: 0.32rem solid transparent;
  border-top: 0.36rem solid var(--clinic-muted);
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0.75rem;
  top: 1rem;
}

.searchable-select-native {
  inset: auto auto 0 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.searchable-select-menu {
  background: #ffffff;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgb(11 59 58 / 14%);
  display: none;
  left: 0;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.25rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.2rem);
  z-index: 1080;
}

.searchable-select.is-open .searchable-select-menu {
  display: grid;
  gap: 0.15rem;
}

.searchable-select-option {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--clinic-ink);
  display: block;
  font: inherit;
  padding: 0.45rem 0.55rem;
  text-align: left;
  width: 100%;
}

.searchable-select-option:hover,
.searchable-select-option:focus,
.searchable-select-option[aria-selected="true"] {
  background: var(--leemie-mint);
}

.searchable-select-empty {
  color: var(--clinic-muted);
  font-size: 0.88rem;
  padding: 0.55rem;
}

.section-title {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.workflow-strip {
  align-items: center;
  background: #f8faf9;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  color: var(--clinic-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.88rem;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
}

.workflow-strip span {
  align-items: center;
  display: inline-flex;
  gap: 0.5rem;
}

.workflow-strip span + span::before {
  color: #8aa0a6;
  content: "/";
}

.location-filter {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, auto) auto;
  min-width: min(100%, 620px);
}

.contact-filter {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(135px, auto)) auto;
  min-width: min(100%, 880px);
}

.calendar-filter,
.calendar-filter-toolbar {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns:
    minmax(150px, 1fr)
    minmax(130px, auto)
    minmax(110px, auto)
    auto;
  margin-left: auto;
  min-width: min(100%, 620px);
}

.calendar-workspace {
  align-items: start;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
  min-height: calc(100vh - 11rem);
}

.calendar-filter-sidebar {
  align-self: stretch;
  background: #f3faf7;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: grid;
  gap: 0.45rem;
  grid-template-rows: minmax(0, 25%) minmax(0, 75%);
  max-height: calc(100vh - 11rem);
  min-height: 100%;
  padding: 0.55rem;
  position: sticky;
  top: 0.75rem;
}

.calendar-sidebar-primary {
  align-content: start;
  display: grid;
  gap: 0.45rem;
  min-height: 0;
  overflow: auto;
}

.calendar-sidebar-filters {
  display: grid;
  gap: 0.45rem;
  grid-template-rows: minmax(0, 1fr) minmax(0, 3fr);
  min-height: 0;
}

.calendar-sidebar-controls,
.calendar-sidebar-actions {
  display: grid;
  gap: 0.25rem;
}

.calendar-sidebar-actions {
  justify-items: start;
}

.calendar-main {
  min-width: 0;
}

.calendar-filter-group {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  min-height: 0;
  min-width: 0;
  padding: 0;
}

.calendar-filter-group-scroll {
  overflow: hidden;
}

.calendar-filter-group legend {
  color: var(--clinic-muted);
  float: none;
  font-size: 0.72rem;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  width: auto;
}

.calendar-filter-options {
  display: grid;
  align-content: start;
  gap: 0.05rem;
  max-height: none;
  min-height: 0;
  overflow: auto;
  padding-right: 0.15rem;
}

.calendar-filter-options .form-check {
  align-items: flex-start;
  display: flex;
  gap: 0.3rem;
  margin: 0;
  min-height: 0;
  padding-left: 0;
}

.calendar-filter-options .form-check-input {
  flex: 0 0 auto;
  margin-left: 0;
  margin-top: 0.18rem;
}

.calendar-filter-options .form-check-label {
  font-size: 0.74rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.calendar-sections {
  display: grid;
  gap: 1rem;
}

.calendar-result-summary {
  align-items: center;
  color: var(--clinic-muted);
  display: flex;
  font-size: 0.88rem;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.calendar-result-summary strong {
  color: var(--leemie-deep-teal);
}

.calendar-result-summary span {
  color: var(--leemie-deep-teal);
  font-weight: 700;
  margin-right: auto;
}

.calendar-empty-summary {
  margin: 0;
}

.calendar-grid {
  display: grid;
  gap: 1px;
}

.calendar-grid-month {
  background: var(--clinic-border);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
}

.calendar-grid-week {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-time-grid {
  --calendar-hour-height: 60px;
  --calendar-practitioner-column-min-width: 42px;
  --calendar-practitioner-column-width: 110px;
  background: var(--clinic-border);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: grid;
  grid-template-columns:
    72px
    repeat(
      var(--calendar-day-count, 7),
      minmax(
        calc(var(--calendar-practitioner-count, 1) * var(--calendar-practitioner-column-width)),
        1fr
      )
    );
  grid-template-rows: auto minmax(calc(var(--calendar-hour-count, 10) * var(--calendar-hour-height)), 1fr);
  max-height: 72vh;
  overflow: auto;
}

.calendar-time-grid-corner,
.calendar-time-grid-day-head,
.calendar-time-grid-ruler,
.calendar-time-grid-day-column {
  background: var(--clinic-surface);
}

.calendar-time-grid-corner,
.calendar-time-grid-day-head {
  border-bottom: 3px solid #b8c9cf;
  color: var(--clinic-muted);
  font-size: 0.78rem;
  font-weight: 700;
  min-height: 3.6rem;
  padding: 0.6rem;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 3;
}

.calendar-time-grid-corner {
  align-items: center;
  display: flex;
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-end;
  left: 0;
  z-index: 5;
}

.calendar-time-grid-day-head {
  border-left: 2px solid #c9d8dd;
  display: grid;
  min-width: 0;
  padding: 0;
  position: sticky;
}

.calendar-day-resize-handle {
  align-items: center;
  background: #ffffff;
  border: 1px solid #b8c9cf;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgb(11 59 58 / 14%);
  cursor: col-resize;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  z-index: 6;
}

.calendar-day-resize-handle::before,
.calendar-day-resize-handle::after {
  background: #5f838e;
  border-radius: 999px;
  content: "";
  display: block;
  height: 1rem;
  margin: 0 1px;
  width: 2px;
}

.calendar-day-resize-handle:hover,
.calendar-day-resize-handle:focus-visible,
.calendar-time-grid.is-resizing-columns .calendar-day-resize-handle {
  background: var(--leemie-mint);
  border-color: #7d9fa9;
}

.calendar-time-grid-date-head {
  background: #f3faf7;
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem 0.35rem;
}

.calendar-time-grid-date-head strong {
  color: var(--leemie-deep-teal);
  font-size: 0.86rem;
}

.calendar-time-grid-date-head span {
  font-weight: 500;
  text-transform: none;
}

.calendar-time-grid-practitioner-heads {
  background: #ffffff;
  border-top: 1px solid #d7e3e7;
  display: grid;
  grid-template-columns: repeat(
    var(--calendar-practitioner-count, 1),
    minmax(var(--calendar-practitioner-column-min-width), 1fr)
  );
}

.calendar-time-grid-practitioner-heads span {
  align-items: center;
  border-left: 2px solid #d7e3e7;
  border-bottom: 3px solid #8fb1bc;
  color: var(--leemie-deep-teal);
  display: flex;
  font-size: 0.74rem;
  font-weight: 700;
  justify-content: center;
  overflow: hidden;
  padding: 0.35rem 0.45rem;
  min-height: 2rem;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.calendar-time-grid-practitioner-heads span:first-child {
  border-left: 0;
}

.calendar-time-grid-ruler,
.calendar-time-grid-day-column {
  grid-row: 2;
  min-height: calc(var(--calendar-hour-count, 10) * var(--calendar-hour-height));
}

.calendar-time-grid-ruler {
  grid-column: 1;
  left: 0;
  position: sticky;
  z-index: 2;
}

.calendar-time-grid-hour-label {
  border-bottom: 1px solid var(--leemie-mint);
  color: var(--clinic-muted);
  font-size: 0.76rem;
  font-weight: 700;
  height: var(--calendar-hour-height);
  padding: 0.35rem 0.55rem;
  text-align: right;
}

.calendar-time-grid-hour-label:last-child {
  border-bottom: 0;
  height: 0;
}

.calendar-time-grid-day-column {
  border-left: 2px solid #c9d8dd;
  display: grid;
  grid-template-columns: repeat(
    var(--calendar-practitioner-count, 1),
    minmax(var(--calendar-practitioner-column-min-width), 1fr)
  );
  min-width: 0;
  overflow: visible;
}

.calendar-time-grid-practitioner-column {
  min-width: 0;
  overflow: visible;
  position: relative;
}

.calendar-time-grid-practitioner-column + .calendar-time-grid-practitioner-column {
  border-left: 2px solid #d7e3e7;
}

.calendar-time-grid-hour-lines {
  inset: 0;
  position: absolute;
}

.calendar-time-grid-hour-line {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), #e3e8e7 calc(25% - 1px), #e3e8e7 25%);
  border-bottom: 1px solid var(--leemie-mint);
  height: var(--calendar-hour-height);
}

.calendar-duration-handle {
  position: absolute;
  bottom: 0;
  left: 20%;
  width: 60%;
  height: 8px;
  border-bottom: 3px solid #52635c;
  cursor: ns-resize;
  z-index: 4;
}

.calendar-dragging { opacity: 0.5; pointer-events: none; }
[data-interactive-calendar] [data-appointment-id] { touch-action: none; }

.calendar-time-grid-hour-line:last-child {
  border-bottom: 0;
  height: 0;
}

.calendar-event-block {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  max-height: none;
  min-height: 44px;
  overflow: visible;
  position: absolute;
  z-index: 1;
}

.opening-hours-editor {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  overflow: hidden;
}

.opening-hours-row {
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid var(--clinic-border);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(7rem, 1fr) minmax(5rem, auto) repeat(2, minmax(7rem, 9rem));
  padding: 0.75rem;
}

.opening-hours-row-location {
  grid-template-columns:
    minmax(7rem, 1fr)
    minmax(5.5rem, auto)
    minmax(5rem, auto)
    repeat(2, minmax(7rem, 9rem));
}

.opening-hours-row:last-child {
  border-bottom: 0;
}

.opening-hours-day {
  color: var(--leemie-deep-teal);
  font-weight: 700;
}

.opening-hours-check {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  margin: 0;
}

.calendar-grid-head {
  background: var(--leemie-mint);
  color: var(--clinic-muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem;
  text-align: center;
  text-transform: uppercase;
}

.calendar-grid-day {
  background: var(--clinic-surface);
  min-height: 150px;
  padding: 0.65rem;
}

.calendar-grid-week .calendar-grid-day {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
}

.calendar-grid-day.is-muted {
  background: #f5f8f9;
  color: var(--clinic-muted);
}

.calendar-grid-day-header {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.calendar-grid-day-header span {
  color: var(--clinic-muted);
  font-size: 0.78rem;
}

.calendar-day-agenda {
  display: grid;
  gap: 0.75rem;
}

.calendar-event-list {
  display: grid;
  gap: 0.4rem;
}

.calendar-event-list-day {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.calendar-event-list-day.calendar-card-list {
  display: grid;
}

.calendar-event-card {
  background: var(--appointment-color, #2563eb);
  border: 1px solid color-mix(in srgb, var(--appointment-color, #2563eb) 75%, #000000);
  border-radius: 8px;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  overflow: visible;
  padding: 0.3rem 0.35rem;
  position: relative;
}

.calendar-event {
  align-items: stretch;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  gap: 0.35rem;
  line-height: 1.3;
  min-width: 0;
  position: relative;
  text-decoration: none;
  text-shadow: 0 1px 1px rgb(0 0 0 / 22%);
}

.calendar-event-card:hover,
.calendar-event-card:focus-within {
  filter: brightness(0.96);
  z-index: 8;
}

.calendar-event:hover,
.calendar-event:focus {
  color: #ffffff;
}

.calendar-event-label {
  display: block;
  font-weight: 700;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.calendar-event-icons {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.calendar-event-icon {
  align-items: center;
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(11 59 58 / 45%);
  border-radius: 4px;
  color: var(--leemie-deep-teal);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 800;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  min-width: 1.25rem;
  padding: 0 0.28rem;
  text-shadow: none;
}

.calendar-event-icon-invoice,
.calendar-event-icon-needs-help,
.calendar-event-icon-no-show,
.calendar-event-icon-attendance-no-show {
  background: #fef3c7;
  color: #7c2d12;
}

.calendar-event-icon-confirmed,
.calendar-event-icon-checked-in {
  background: #dcfce7;
  color: #14532d;
}

.calendar-event-icon-declined {
  background: #fee2e2;
  color: #7f1d1d;
}

.calendar-event-icon-reminder,
.calendar-event-icon-late,
.calendar-event-icon-pending {
  background: #e0f2fe;
  color: #0c4a6e;
}

.calendar-event-hover {
  background: var(--leemie-deep-teal);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgb(15 23 42 / 24%);
  color: #ffffff;
  display: grid;
  gap: 0.15rem;
  left: 0;
  min-width: 210px;
  opacity: 0;
  padding: 0.55rem 0.65rem;
  pointer-events: none;
  position: absolute;
  text-shadow: none;
  top: calc(100% + 0.35rem);
  transform: translateY(-0.2rem);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
  visibility: hidden;
  z-index: 10;
}

.calendar-event-hover strong {
  font-size: 0.84rem;
}

.calendar-event-hover span {
  color: #dbe8ec;
  font-size: 0.76rem;
}

.calendar-event-tooltip-icons {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.2rem;
}

.calendar-event-tooltip-icons .calendar-event-icon {
  background: #ffffff;
}

.calendar-event:hover .calendar-event-hover,
.calendar-event:focus .calendar-event-hover,
.calendar-event:focus-visible .calendar-event-hover {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.calendar-empty-slot {
  color: var(--clinic-muted);
  font-size: 0.78rem;
}

.calendar-mobile-actionbar {
  display: none;
}

.calendar-section-header {
  align-items: baseline;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.calendar-section-header h3 {
  font-size: 0.95rem;
  margin: 0;
}

.calendar-card-list {
  display: none;
}

.appointment-card {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
}

.appointment-card-main {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.appointment-card-details {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.appointment-card-details div {
  display: grid;
  gap: 0.1rem;
}

.appointment-card-details dt {
  color: var(--clinic-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.appointment-card-details dd {
  margin: 0;
}

.appointment-card-actions {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.appointment-detail-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.appointment-detail-main {
  min-width: 0;
}

.appointment-action-panel {
  background: #f3faf7;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem;
}

.appointment-action-panel h3,
.subsection-title {
  color: var(--leemie-deep-teal);
  font-size: 0.95rem;
  margin: 0 0 0.25rem;
}

.detail-list {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  overflow: hidden;
}

.detail-list > div {
  background: var(--clinic-surface);
  border-bottom: 1px solid var(--clinic-border);
  display: grid;
  gap: 0.25rem;
  grid-template-columns: minmax(120px, 0.32fr) minmax(0, 1fr);
  padding: 0.75rem;
}

.detail-list > div:last-child {
  border-bottom: 0;
}

.detail-list span {
  color: var(--clinic-muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-list strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.appointment-history-list {
  display: grid;
  gap: 0.75rem;
}

.appointment-history-item {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem;
}

.appointment-history-header {
  align-items: flex-start;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.appointment-history-header h3 {
  font-size: 0.95rem;
  margin: 0;
}

.appointment-history-changes {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.appointment-history-changes div {
  display: grid;
  gap: 0.15rem;
}

.appointment-history-changes dt {
  color: var(--clinic-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.appointment-history-changes dd {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.permission-list span {
  background: var(--clinic-surface-muted);
  border-radius: 8px;
  color: var(--clinic-muted);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.4rem;
}

.role-permission-grid ul {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.role-permission-grid label {
  align-items: flex-start;
  background: #f3faf7;
  border: 1px solid var(--clinic-border);
  border-radius: 8px;
  display: flex;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
}

.role-matrix {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.role-matrix-row h3 {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.app-messages {
  padding: 1rem 1.5rem 0;
}

.clinic-context {
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: grid;
  gap: 0.45rem;
  padding: 0.75rem;
}

.clinic-context-label {
  color: var(--clinic-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.clinic-switcher {
  display: grid;
  gap: 0.5rem;
}

.empty-state {
  background: var(--clinic-surface);
  border: 1px dashed var(--clinic-border);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}

.empty-state h2 {
  font-size: 1.1rem;
}

.public-check-in-page {
  background:
    radial-gradient(circle at 50% 0%, rgb(255 255 255 / 80%) 0%, rgb(255 255 255 / 0%) 34%),
    linear-gradient(160deg, var(--leemie-mint), #f5fbf9);
  color: var(--clinic-ink);
  min-height: 100vh;
  overflow-x: hidden;
}

.public-check-in-shell {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
}

.booking-powered-by {
  align-items: center;
  color: var(--clinic-muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.5rem;
}

.booking-powered-by .app-wordmark {
  width: 5.25rem;
}

.public-check-in-card {
  background: #ffffff;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  box-shadow: 0 28px 80px rgb(18 43 51 / 18%);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 700px;
  min-height: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  place-content: center;
  width: min(100%, 700px);
}

.public-check-in-card-success {
  min-height: min(68vh, 620px);
  place-content: center;
}

.public-check-in-heading {
  display: grid;
  gap: 1rem;
  text-align: center;
}

.public-check-in-heading h1 {
  color: var(--leemie-deep-teal);
  font-size: clamp(2.35rem, 5.4vw, 4rem);
  font-weight: 900;
  line-height: 1.02;
  margin: 0;
  overflow-wrap: anywhere;
}

.public-check-in-heading p {
  color: var(--clinic-muted);
  font-size: clamp(1.45rem, 2.35vw, 2rem);
  font-weight: 600;
  margin: 0;
}

.public-check-in-kicker {
  color: var(--clinic-accent) !important;
  font-size: 1rem !important;
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0.75rem !important;
  text-transform: uppercase;
}

.public-check-in-form {
  display: grid;
  gap: 1.4rem;
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
}

.public-check-in-form .form-label {
  font-size: 1.3rem;
  font-weight: 700;
}

.public-check-in-form .form-control {
  background: #fbfdfd;
  border-radius: 12px;
  border-width: 2px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 700;
  min-height: 4.8rem;
  padding: 1rem 1.3rem;
  text-align: center;
  width: 100%;
}

.public-check-in-form textarea.form-control {
  min-height: 7.5rem;
}

.public-check-in-form .btn {
  border-radius: 12px;
  font-size: clamp(1.55rem, 2.5vw, 2rem);
  font-weight: 800;
  min-height: 4.8rem;
  width: 100%;
}

.public-check-in-alert {
  font-size: 1.1rem;
}

.public-check-in-error-modal {
  align-items: center;
  background: rgb(12 27 32 / 58%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1.5rem;
  position: fixed;
  z-index: 1200;
}

.public-check-in-error-dialog {
  background: #ffffff;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  box-shadow: 0 28px 80px rgb(18 43 51 / 28%);
  display: grid;
  gap: 1rem;
  max-width: 560px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  width: min(100%, 560px);
}

.public-check-in-error-dialog h2 {
  color: var(--leemie-deep-teal);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  margin: 0;
}

.public-check-in-error-dialog p,
.public-check-in-error-dialog ul {
  color: var(--clinic-muted);
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 650;
  margin: 0;
}

.public-check-in-error-dialog ul {
  list-style: none;
  padding: 0;
}

.public-check-in-error-dialog .btn {
  font-size: 1.45rem;
  font-weight: 800;
  min-height: 4.25rem;
}

.public-check-in-summary {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: grid;
  overflow: hidden;
}

.public-check-in-summary > div {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.1rem;
}

.public-check-in-summary > div + div {
  border-top: 1px solid var(--clinic-border);
}

.public-check-in-summary span {
  color: var(--clinic-muted);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
}

.public-check-in-summary strong {
  font-size: 1.35rem;
}

.public-check-in-help {
  align-items: center;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
}

.public-check-in-help .form-check-input {
  flex: 0 0 auto;
  height: 1.5rem;
  margin: 0;
  width: 1.5rem;
}

.public-check-in-help span {
  font-size: 1.15rem;
  font-weight: 700;
}

.public-check-in-touchpad {
  display: grid;
  gap: 0.9rem;
  justify-self: center;
  max-width: 560px;
  width: 100%;
}

.public-check-in-touchpad-label {
  color: var(--clinic-muted);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.public-check-in-touchpad-keys {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-check-in-touchpad-keys[data-mode="letters"] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.public-check-in-key {
  background: #ffffff;
  border: 2px solid #d8e5e3;
  border-radius: 12px;
  color: var(--clinic-ink);
  box-shadow: 0 8px 16px rgb(18 43 51 / 8%);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 800;
  min-height: 4.25rem;
  padding: 0.5rem;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
}

.public-check-in-key:active,
.public-check-in-key:focus {
  background: #e4f0ee;
  border-color: var(--clinic-accent);
  box-shadow: 0 6px 12px rgb(18 43 51 / 10%);
  outline: 4px solid rgb(57 130 123 / 18%);
  transform: translateY(1px);
}

.public-check-in-key-action {
  color: var(--clinic-muted);
  font-size: 1.1rem;
  grid-column: span 2;
}

@media (max-width: 760px) {
  .public-check-in-shell {
    padding: 1rem;
  }

  .public-check-in-card {
    min-height: calc(100vh - 2rem);
    padding: 1.25rem;
  }

  .public-check-in-touchpad-keys[data-mode="letters"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.check-in-preview-panel {
  align-items: center;
  background: #f8faf9;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.check-in-preview-panel h3 {
  font-size: 0.98rem;
  margin: 0 0 0.2rem;
}

.check-in-preview-panel p {
  color: var(--clinic-muted);
  font-size: 0.88rem;
  margin: 0;
}

.check-in-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.clinical-record-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.clinical-record-text {
  overflow-wrap: anywhere;
}

.status-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.35rem 0.55rem;
}

.status-active,
.status-success {
  background: #e6f4ec;
  color: var(--clinic-success);
}

.status-inactive,
.status-neutral {
  background: var(--clinic-surface-muted);
  color: var(--clinic-muted);
}

.status-warning {
  background: #fff4d6;
  color: var(--clinic-warning);
}

.status-danger {
  background: #fee4e2;
  color: var(--clinic-danger);
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 120ms ease-in;
}

.integration-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.integration-card {
  align-items: center;
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  color: var(--clinic-ink);
  display: flex;
  gap: 1rem;
  padding: 1rem;
  text-decoration: none;
}

.integration-card:hover,
.integration-card:focus {
  background: var(--leemie-mint);
  color: var(--clinic-ink);
}

.integration-card strong,
.integration-card small {
  display: block;
}

.integration-card small {
  color: var(--clinic-muted);
}

.integration-logo {
  align-items: center;
  border-radius: 12px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 800;
  height: 3rem;
  justify-content: center;
  width: 5rem;
}

.integration-logo-openai {
  background: #111827;
  color: #ffffff;
}

.integration-logo-xero {
  background: #13b5ea;
  color: #ffffff;
}

.ai-chatbot {
  bottom: 1.25rem;
  position: fixed;
  right: 1.25rem;
  z-index: 1040;
}

.ai-chatbot-toggle {
  background: var(--clinic-accent);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgb(11 59 58 / 24%);
  color: #ffffff;
  font-weight: 800;
  height: 3.5rem;
  width: 3.5rem;
}

.ai-chatbot-panel {
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  bottom: 4.4rem;
  box-shadow: 0 18px 44px rgb(11 59 58 / 24%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(72vh, 620px);
  overflow: hidden;
  position: absolute;
  right: 0;
  width: min(420px, calc(100vw - 2rem));
}

.ai-chatbot-panel[hidden] {
  display: none;
}

.ai-chatbot-header {
  align-items: center;
  background: var(--leemie-deep-teal);
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
}

.ai-chatbot-header span {
  color: #d3eae4;
  display: block;
  font-size: 0.78rem;
}

.ai-chatbot-header button {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
}

.ai-chatbot-header-actions {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}

.ai-chatbot-header-actions a {
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.45rem;
  text-decoration: none;
}

.ai-chatbot-header-actions a:hover,
.ai-chatbot-header-actions a:focus {
  background: rgb(255 255 255 / 12%);
  color: #ffffff;
}

.ai-chatbot-body {
  display: grid;
  gap: 0.8rem;
  max-height: calc(min(72vh, 620px) - 3.75rem);
  overflow-y: auto;
  padding: 1rem;
}

.ai-chatbot-messages {
  display: grid;
  gap: 0.65rem;
}

.ai-chatbot-message {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  padding: 0.65rem;
}

.ai-chatbot-message span {
  color: var(--clinic-muted);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.ai-chatbot-message p {
  margin: 0;
  white-space: pre-wrap;
}

.ai-chatbot-message-user {
  background: var(--leemie-mint);
}

.ai-chatbot-message-assistant,
.ai-chatbot-message-tool {
  background: #ffffff;
}

.ai-chatbot-proposals {
  display: grid;
  gap: 0.6rem;
}

.ai-chatbot-proposal {
  background: #f3faf7;
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  padding: 0.75rem;
}

.ai-chatbot-proposal dl {
  display: grid;
  gap: 0.2rem;
  margin: 0.5rem 0;
}

.ai-chatbot-proposal dt {
  color: var(--clinic-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.ai-chatbot-proposal dd {
  margin: 0;
}

.ai-chatbot-form {
  border-top: 1px solid var(--clinic-border);
  display: grid;
  gap: 0.5rem;
  padding-top: 0.8rem;
}

.ai-fullscreen-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  height: calc(100vh - 122px);
  min-height: 560px;
}

.ai-fullscreen-chat {
  display: grid;
  gap: 1rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
}

.ai-fullscreen-messages {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.ai-fullscreen-message,
.ai-fullscreen-empty {
  border: 1px solid var(--clinic-border);
  border-radius: 12px;
  padding: 0.85rem;
}

.ai-fullscreen-message-user {
  background: var(--leemie-mint);
}

.ai-fullscreen-message-assistant,
.ai-fullscreen-message-tool {
  background: #ffffff;
}

.ai-fullscreen-message p {
  margin: 0.5rem 0 0;
  white-space: pre-wrap;
}

.ai-fullscreen-form {
  border-top: 1px solid var(--clinic-border);
  padding-top: 1rem;
}

.ai-fullscreen-actions {
  max-height: calc(100vh - 122px);
  overflow-y: auto;
  position: sticky;
  top: 90px;
}

.ai-fullscreen-action-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.ai-fullscreen-action {
  border-top: 1px solid var(--clinic-border);
  padding-top: 0.9rem;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    border-bottom: 1px solid var(--clinic-border);
    border-right: 0;
    height: auto;
    min-height: auto;
    position: static;
  }

  .app-sidebar-note {
    display: none;
  }

  .app-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .settings-nav-group {
    align-content: start;
    border-top: 1px solid var(--clinic-border);
    padding-top: 0.65rem;
  }

  .location-filter {
    grid-template-columns: 1fr;
    min-width: 100%;
  }

  .contact-filter {
    grid-template-columns: 1fr;
    min-width: 100%;
  }

  .calendar-filter,
  .calendar-filter-toolbar {
    grid-template-columns: 1fr;
    min-width: 100%;
  }

  .calendar-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .calendar-filter-sidebar {
    grid-template-rows: auto;
    max-height: none;
    min-height: 0;
    position: static;
  }

  .calendar-sidebar-filters {
    grid-template-rows: auto;
  }

  .calendar-filter-options {
    max-height: 12rem;
  }

  .calendar-grid-month,
  .calendar-grid-week {
    grid-template-columns: 1fr;
  }

  .calendar-time-grid {
    background: transparent;
    border: 0;
    display: grid;
    gap: 0.85rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr !important;
    max-height: none;
    min-width: 100%;
    overflow: visible;
  }

  .calendar-time-grid-corner,
  .calendar-time-grid-ruler {
    display: none;
  }

  .calendar-time-grid-day-head,
  .calendar-time-grid-day-column {
    border: 1px solid var(--clinic-border);
    border-radius: 12px;
    grid-column: auto;
    grid-row: auto;
  }

  .calendar-time-grid-day-head {
    margin-top: 0.25rem;
    min-height: 0;
    position: static;
  }

  .calendar-day-resize-handle {
    display: none;
  }

  .calendar-time-grid-practitioner-heads {
    grid-template-columns: 1fr;
  }

  .calendar-time-grid-practitioner-heads span {
    border-left: 0;
    border-top: 1px solid var(--leemie-mint);
    white-space: normal;
  }

  .calendar-time-grid-day-column {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 0.65rem;
  }

  .calendar-time-grid-practitioner-column {
    display: grid;
    gap: 0.5rem;
    min-height: 0;
  }

  .calendar-time-grid-practitioner-column + .calendar-time-grid-practitioner-column {
    border-left: 0;
    border-top: 1px solid var(--clinic-border);
    padding-top: 0.5rem;
  }

  .calendar-time-grid-hour-lines {
    display: none;
  }

  .calendar-event-block {
    position: static;
    width: auto !important;
  }

  .appointment-detail-layout,
  .detail-list > div {
    grid-template-columns: 1fr;
  }

  .calendar-grid-head {
    display: none;
  }

  .calendar-section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .ai-fullscreen-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .ai-fullscreen-chat {
    height: min(78vh, 680px);
  }

  .ai-fullscreen-actions {
    max-height: none;
    position: static;
  }
}

@media (max-width: 560px) {
  .app-page-header {
    grid-template-columns: 1fr;
  }

  .app-user-summary {
    align-items: flex-start;
    justify-self: start;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: left;
  }

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

  .settings-nav {
    grid-template-columns: 1fr;
  }

  .app-content,
  .app-page-header,
  .app-messages {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .clinic-switcher {
    width: 100%;
  }

  .panel-heading-actions {
    display: grid;
  }

  .panel-action-group {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .calendar-table-desktop {
    display: none;
  }

  .calendar-card-list {
    display: grid;
    gap: 0.75rem;
  }

  .calendar-mobile-actionbar {
    background: var(--clinic-surface);
    border: 1px solid var(--clinic-border);
    border-radius: 12px;
    bottom: 0.75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    margin-bottom: 1rem;
    padding: 0.65rem;
    position: sticky;
    z-index: 10;
  }

  .form-action-bar {
    background: var(--clinic-surface);
    border-top: 1px solid var(--clinic-border);
    bottom: 0;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding: 0.75rem 1.25rem;
    position: sticky;
    z-index: 10;
  }

  .form-action-bar .btn {
    flex: 1 1 140px;
  }

  .clinical-record-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    width: 100%;
  }

  .clinical-record-actions .btn,
  .clinical-record-actions form,
  .clinical-record-actions button {
    width: 100%;
  }

  .clinical-record-table table,
  .clinical-record-table thead,
  .clinical-record-table tbody,
  .clinical-record-table tr,
  .clinical-record-table th,
  .clinical-record-table td {
    display: block;
  }

  .clinical-record-table table {
    margin-bottom: 0;
  }

  .clinical-record-table thead {
    display: none;
  }

  .clinical-record-table tr {
    border: 1px solid var(--clinic-border);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    padding: 0.7rem;
  }

  .clinical-record-table td {
    border: 0;
    padding: 0.35rem 0;
  }

  .clinical-record-table td::before {
    color: var(--clinic-muted);
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
  }

  .clinical-record-table td.text-end {
    text-align: start !important;
  }

  .appointment-history-header {
    flex-direction: column;
  }
}

/* Public legal documents share the app's quiet mint and white surfaces. */
.legal-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.78rem;
  gap: 0.4rem 1rem;
}

.legal-links a {
  color: var(--clinic-muted);
  text-underline-offset: 0.2em;
}

.app-sidebar-footer .legal-links {
  border-top: 1px solid var(--clinic-border);
  gap: 0.2rem 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.65rem;
}

.app-sidebar-footer .legal-links a {
  padding: 0.3rem 0.2rem;
  width: auto;
}

.auth-panel > .legal-links {
  border-top: 1px solid var(--clinic-border);
  justify-content: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
}

.legal-header,
.legal-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: auto;
  max-width: 960px;
  padding: 1.5rem 2rem;
}

.legal-header > a:last-child {
  font-size: 0.9rem;
  text-decoration: none;
}

.legal-document {
  background: var(--clinic-surface);
  border: 1px solid var(--clinic-border);
  border-radius: 20px;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 896px;
  overflow-wrap: anywhere;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.legal-document h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.5rem;
}

.legal-document h2 {
  font-size: 1.3rem;
  margin: 2rem 0 0.75rem;
}

.legal-version,
.legal-footer {
  color: var(--clinic-muted);
  font-size: 0.85rem;
}

.legal-operator p {
  margin: 0.4rem 0 0;
}

.legal-operator {
  border-bottom: 1px solid var(--clinic-border);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

.legal-intro {
  color: var(--clinic-muted);
  font-size: 1.1rem;
}

.legal-contents {
  background: var(--leemie-mint);
  border-radius: 12px;
  display: grid;
  gap: 0.5rem;
  margin: 1.5rem 0;
  padding: 1.25rem;
}

.legal-document section {
  scroll-margin-top: 1.5rem;
}

.legal-document li + li {
  margin-top: 0.6rem;
}

@media (max-width: 560px) {
  .legal-document {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .legal-header,
  .legal-footer {
    padding: 1.25rem;
  }
}

@media print {
  .legal-page {
    background: #ffffff;
  }

  .legal-header,
  .legal-footer,
  .legal-contents {
    display: none;
  }

  .legal-document {
    border: 0;
    max-width: none;
    padding: 0;
  }
}