:root {
  color-scheme: light;
  --ink: #251f21;
  --muted: #71676a;
  --paper: #faf8f5;
  --surface: #fff;
  --surface-soft: #f7f3ef;
  --wine: #7d263a;
  --wine-dark: #611b2c;
  --wine-soft: #f8e9ec;
  --saffron: #d99b20;
  --green: #34705a;
  --green-soft: #e6f4ee;
  --blue: #486e92;
  --line: #e7e0dc;
  --line-strong: #cbbdb8;
  --shadow: 0 12px 35px rgb(48 33 37 / 8%);
  --radius: 1rem;
  --sidebar: #2e2025;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family:
    Inter, "Noto Sans Arabic", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  line-height: 1.55;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgb(217 155 32 / 75%);
  outline-offset: 2px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(76rem, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: 1.25rem;
}

.brand {
  display: inline-flex;
  gap: 0.65rem;
  align-items: center;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  color: white;
  background: var(--wine);
  border-radius: 0.7rem;
  place-items: center;
}

.header-actions,
.workspace-actions,
.button-group,
.hero-actions {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  flex-wrap: wrap;
}

.language-form select {
  min-width: 5.7rem;
  padding-inline: 0.8rem 2.25rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236f6060' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.7rem auto;
}

[dir="rtl"] .language-form select {
  padding-inline: 2.25rem 0.8rem;
  background-position: left 0.8rem center;
}

.text-link {
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

select {
  padding: 0.6rem 2rem 0.6rem 0.75rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
}

[dir="rtl"] select {
  padding: 0.6rem 0.75rem 0.6rem 2rem;
}

body:not(.workspace) > main {
  display: grid;
  min-height: calc(100vh - 10rem);
  padding: 2rem 1rem 5rem;
  place-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgb(217 155 32 / 12%), transparent 25rem),
    radial-gradient(circle at 85% 80%, rgb(125 38 58 / 9%), transparent 24rem);
}

.hero {
  width: min(52rem, 100%);
  text-align: center;
}

.eyebrow {
  display: block;
  margin-block-end: 0.55rem;
  color: var(--wine);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[dir="rtl"] .eyebrow {
  letter-spacing: 0;
}

.hero h1,
.registration-copy h1,
.auth-intro h1 {
  max-width: 14ch;
  margin: 0 auto;
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 850;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

[dir="rtl"] .hero h1,
[dir="rtl"] .registration-copy h1,
[dir="rtl"] .auth-intro h1 {
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.hero p,
.registration-copy > p,
.auth-intro p {
  max-width: 42rem;
  margin: 1.5rem auto;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.8;
}

.hero-actions {
  justify-content: center;
}

.trust-note {
  font-size: 0.86rem !important;
}

.button {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  padding: 0.62rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  cursor: pointer;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

.button[aria-busy="true"] {
  cursor: wait;
}

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

.button-primary {
  color: white;
  background: var(--wine);
  border-color: var(--wine);
  box-shadow: 0 7px 18px rgb(125 38 58 / 18%);
}

.button-primary:hover {
  background: var(--wine-dark);
}

.button-secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.button-secondary:hover {
  border-color: #cfc3bd;
}

.button-danger {
  color: #85243a;
  background: #fff5f7;
  border-color: #edc7d0;
}

.button-large {
  min-height: 3.1rem;
  padding-inline: 1.35rem;
}

.button-small {
  min-height: 2.15rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
}

.button-with-count {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}

.button-count {
  display: inline-grid;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding-inline: 0.25rem;
  color: var(--blue);
  background: #eef3f8;
  border: 1px solid #d5e1ea;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  place-items: center;
}

.button-block {
  width: 100%;
}

.site-footer {
  padding: 1.5rem 1rem 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.site-footer a {
  font-weight: 750;
  text-decoration: none;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.settings-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.settings-hub-card {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.35rem;
}

.settings-hub-card h2 {
  margin: 0;
  font-size: 1.05rem;
}

.settings-hub-card p {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.settings-hub-card .button {
  justify-self: start;
}

.settings-hub-icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--wine);
  background: #fff4df;
  border: 1px solid #efd8ad;
  border-radius: 0.8rem;
  font-size: 1.25rem;
  font-weight: 800;
  place-items: center;
}

.messages {
  display: grid;
  gap: 0.5rem;
  width: min(72rem, 100%);
  margin: 0 auto 1rem;
}

.message {
  padding: 0.8rem 1rem;
  color: #174938;
  background: var(--green-soft);
  border: 1px solid #b8decf;
  border-radius: 0.7rem;
  font-weight: 650;
}

.message-error {
  color: #782032;
  background: var(--wine-soft);
  border-color: #efbec8;
}

/* Workspace shell */
.workspace {
  display: flex;
  overflow-x: hidden;
  background: #f7f5f2;
}

.sidebar {
  position: fixed;
  z-index: 30;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  width: 16.5rem;
  padding: 1.1rem;
  color: #f7eff1;
  background:
    radial-gradient(circle at 20% 10%, rgb(217 155 32 / 12%), transparent 15rem),
    var(--sidebar);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-inverse {
  color: white;
  min-width: 0;
}

.brand-mark-light {
  color: var(--wine-dark);
  background: #f6dbb0;
}

.sidebar-clinic-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-identity {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-block: 1.6rem 1.1rem;
  padding: 0.8rem;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 0.85rem;
}

.clinic-identity > span:last-child {
  display: grid;
  min-width: 0;
}

.clinic-identity strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clinic-identity small {
  color: #b9aaaf;
}

.clinic-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  color: white;
  background: var(--wine);
  border-radius: 0.65rem;
  font-weight: 800;
  place-items: center;
}

.primary-nav {
  display: grid;
  gap: 0.25rem;
  margin-block-start: 1.6rem;
}

.primary-nav a {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.7rem 0.8rem;
  color: #cfc2c6;
  border-radius: 0.65rem;
  font-size: 0.91rem;
  font-weight: 650;
  text-decoration: none;
}

.primary-nav a span {
  display: inline-grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: #ddcfd3;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 7%);
  border-radius: 0.55rem;
  font-size: 1rem;
  font-weight: 850;
  text-align: center;
  place-items: center;
}

.primary-nav a span .fa-solid {
  font-size: 1rem;
}

.primary-nav a:hover,
.primary-nav a.active {
  color: white;
  background: rgb(255 255 255 / 9%);
}

.primary-nav a:hover span,
.primary-nav a.active span {
  color: #2e2025;
  background: #f6dbb0;
  border-color: #f6dbb0;
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%);
}

.primary-nav a.active {
  box-shadow: inset 3px 0 var(--saffron);
}

[dir="rtl"] .primary-nav a.active {
  box-shadow: inset -3px 0 var(--saffron);
}

.sidebar-foot {
  margin-block-start: auto;
  padding: 0.7rem;
  color: #a9999e;
  font-size: 0.75rem;
}

.sidebar-foot a {
  color: #e9d6db;
}

.workspace-main {
  width: calc(100% - 16.5rem);
  min-width: 0;
  min-height: 100vh;
  margin-inline-start: 16.5rem;
}

.workspace-header {
  position: sticky;
  z-index: 15;
  top: 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.7rem clamp(1rem, 3vw, 2.25rem);
  background: rgb(255 255 255 / 92%);
  border-block-end: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.global-search {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  width: min(34rem, 100%);
  padding: 0.2rem 0.75rem;
  background: #f7f4f2;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
}

.global-search input {
  width: 100%;
  min-height: 2.2rem;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
}

.global-search kbd {
  padding: 0.1rem 0.38rem;
  color: var(--muted);
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.3rem;
  box-shadow: 0 1px 1px #ddd;
}

.workspace-today {
  display: grid;
  flex: 0 0 auto;
  gap: 0.05rem;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--line);
}

.workspace-today-label {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.workspace-today-value {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.workspace-today-value .clinic-date {
  font-weight: 700;
}

.clinic-date {
  font-weight: 400;
}

.workspace-actions {
  margin-inline-start: auto;
  flex: 0 0 auto;
  gap: 0.55rem;
  direction: ltr;
  flex-wrap: nowrap;
}

[dir="rtl"] .workspace-actions {
  direction: rtl;
}

.language-control {
  display: flex;
  flex: 0 0 7.4rem;
  gap: 0.25rem;
  align-items: center;
  direction: ltr;
  cursor: pointer;
  min-height: 2.65rem;
  padding: 0.2rem 0.25rem 0.2rem 0.45rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.language-control:focus-within {
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgb(217 155 32 / 18%);
}

.language-glyph {
  display: inline-grid;
  order: 1;
  flex: 0 0 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--wine);
  background: transparent;
  border: 0;
  border-radius: 0;
  direction: ltr;
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: -0.06em;
  line-height: 1;
  place-items: center;
}

.language-chevron {
  display: inline-grid;
  order: 3;
  flex: 0 0 0.85rem;
  pointer-events: none;
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 0.15s ease;
  place-items: center;
}

.language-control .language-form {
  display: flex;
  order: 2;
  min-width: 0;
  flex: 1 1 auto;
  cursor: pointer;
}

.language-control .language-form select {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.25rem;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
}

.language-control .language-form select:focus,
.language-control .language-form select:focus-visible {
  outline: none;
  box-shadow: none;
}

[dir="rtl"] .language-control .language-form {
  direction: rtl;
  order: 3;
}

[dir="rtl"] .language-glyph {
  order: 2;
}

[dir="rtl"] .language-chevron {
  order: 1;
}

.language-control.is-open .language-chevron {
  transform: rotate(180deg);
}

[dir="rtl"] .language-control .language-form select {
  padding-inline: 1.3rem 0.25rem;
  text-align: right;
}

.user-menu {
  position: relative;
  flex: 0 0 auto;
}

.user-menu summary {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.user-menu summary::-webkit-details-marker {
  display: none;
}

.user-menu-avatar {
  display: grid;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  color: var(--wine);
  font-size: 1.55rem;
  place-items: center;
}

.user-name {
  max-width: 10rem;
  overflow: hidden;
  font-size: 0.85rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-chevron {
  color: var(--muted);
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

.user-menu[open] .user-menu-chevron {
  transform: rotate(180deg);
}

.user-menu-popover {
  position: absolute;
  inset-block-start: calc(100% + 0.7rem);
  inset-inline-end: 0;
  display: grid;
  width: 15rem;
  padding: 0.85rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}

[dir="rtl"] .workspace-actions .user-menu-popover {
  direction: rtl;
}

.user-menu-popover small {
  overflow: hidden;
  margin-block-end: 0.5rem;
  color: var(--muted);
  text-overflow: ellipsis;
}

.user-menu-popover .menu-link {
  display: flex;
  width: calc(100% + 1.7rem);
  margin-inline: -0.85rem;
  padding-inline: 0.85rem;
  gap: 0.55rem;
  align-items: center;
}

.menu-link-icon {
  display: inline-grid;
  flex: 0 0 1rem;
  color: var(--muted);
  place-items: center;
}

.menu-link {
  display: block;
  width: 100%;
  padding: 0.55rem 0;
  color: var(--wine);
  background: transparent;
  border: 0;
  border-block-start: 1px solid var(--line);
  cursor: pointer;
  font-weight: 700;
  text-align: start;
  text-decoration: none;
}

.user-menu-popover .menu-link:hover,
.user-menu-popover .menu-link:focus-visible {
  color: var(--wine-dark);
  background: var(--wine-soft);
  border-radius: 0.45rem;
}

.icon-button {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1.35rem;
  place-items: center;
}

.content {
  width: min(90rem, 100%);
  min-width: 0;
  min-height: calc(100vh - 4.5rem);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.page-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: 1.5rem;
}

.page-heading > div:first-child {
  flex: 1 1 auto;
  min-width: min(100%, 18rem);
}

.page-heading > .button-group {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  max-width: 100%;
  padding-block-end: 0.15rem;
  overflow-x: auto;
}

.page-heading > .button-group .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.page-heading h1,
.patient-banner h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}

[dir="rtl"] .page-heading h1,
[dir="rtl"] .patient-banner h1 {
  letter-spacing: -0.015em;
}

.page-heading p,
.patient-banner p {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.compact-heading {
  max-width: none;
  margin-inline: 0;
}

.back-link {
  display: inline-block;
  margin-block-end: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.breadcrumb {
  max-width: 100%;
  margin-block-end: 0.55rem;
  overflow-x: auto;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  white-space: nowrap;
}

.breadcrumb li + li::before {
  inline-size: 0.42em;
  block-size: 0.42em;
  border-top: 1.5px solid var(--muted);
  border-right: 1.5px solid var(--muted);
  content: "";
  transform: rotate(45deg);
}

html[dir="rtl"] .breadcrumb li + li::before {
  transform: rotate(-135deg);
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--ink);
}

.breadcrumb li[aria-current="page"] {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-chevron-right {
  transform: scaleX(-1);
}

/* Dashboard */
.dashboard-heading h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.stat-card {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 1.1rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 5px 20px rgb(48 33 37 / 4%);
  text-decoration: none;
}

.stat-icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--wine);
  background: var(--wine-soft);
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 850;
  place-items: center;
}

.accent-saffron .stat-icon {
  color: #875906;
  background: #fff2d6;
}

.accent-blue .stat-icon {
  color: var(--blue);
  background: #eaf2f9;
}

.accent-green .stat-icon {
  color: var(--green);
  background: var(--green-soft);
}

.stat-card > span:last-child {
  display: grid;
}

.stat-card strong {
  font-size: 1.55rem;
  line-height: 1.1;
}

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

.quick-actions {
  margin-block-end: 1.5rem;
}

.quick-actions h2 {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quick-actions > div {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.quick-actions a {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.quick-actions a span {
  color: var(--wine);
  font-weight: 850;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.onboarding-panel {
  margin-block-end: 1.25rem;
}

.dashboard-appointments-panel {
  margin-block-end: 1.25rem;
}

.today-strip {
  margin-block-end: 1.25rem;
  padding: 0.9rem 1.25rem;
}

.today-strip h2 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.today-strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}

.today-strip-item {
  display: grid;
  gap: 0.1rem;
  color: inherit;
  text-decoration: none;
}

.today-strip-item strong {
  font-size: 1.35rem;
  line-height: 1.1;
}

.today-strip-item .today-strip-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.today-strip-item small {
  color: var(--muted);
  font-size: 0.78rem;
}

.dashboard-cash-summary {
  margin-block-end: 1.25rem;
  overflow: hidden;
}

.dashboard-cash-summary .panel-heading h2 i {
  margin-inline-end: 0.3rem;
  color: var(--wine);
}

.dashboard-cash-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block-start: 1px solid var(--line);
}

.dashboard-cash-metrics > a {
  display: flex;
  position: relative;
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
  padding: 1rem 1.15rem;
  color: var(--ink);
  border-inline-end: 1px solid var(--line);
  text-decoration: none;
}

.dashboard-cash-metrics > a:last-child {
  border-inline-end: 0;
}

.dashboard-cash-metrics > a:hover,
.dashboard-cash-metrics > a:focus-visible {
  background: var(--surface-soft);
  outline: none;
}

.dashboard-cash-metrics > a > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.dashboard-cash-metrics small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 750;
}

.dashboard-cash-metrics strong {
  overflow: hidden;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-cash-icon {
  display: grid;
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--wine);
  background: var(--wine-soft);
  border-radius: 0.65rem;
  place-items: center;
}

.dashboard-cash-icon.accent-blue {
  color: var(--blue);
  background: #eaf2f9;
}

.dashboard-cash-icon.accent-saffron {
  color: #8c5a05;
  background: #fff7df;
}

.dashboard-cash-chevron {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: 0.75rem;
}

.onboarding-list {
  margin: 0;
  padding: 0.25rem 1.25rem 1rem;
  list-style: none;
}

.onboarding-step {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.8rem 0;
  border-block-end: 1px solid var(--line);
}

.onboarding-step:last-child {
  border: 0;
}

.onboarding-check {
  display: grid;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  color: var(--blue);
  background: #eaf2f9;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 850;
  place-items: center;
}

.onboarding-step.is-done .onboarding-check {
  color: var(--green);
  background: var(--green-soft);
}

.onboarding-body {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
  flex: 1 1 auto;
}

.onboarding-body small {
  color: var(--muted);
  font-size: 0.82rem;
}

.support-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  gap: 1.25rem;
  margin-block-end: 1.25rem;
  align-items: start;
}

.faq-list {
  padding: 0 1.25rem 0.75rem;
}

.faq-list details {
  padding: 0.9rem 0;
  border-block-end: 1px solid var(--line);
}

.faq-list details:last-child {
  border: 0;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 760;
}

.faq-list p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.7;
}

.support-form-card {
  overflow: hidden;
}

.support-form {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.support-tickets {
  overflow: hidden;
}

.activity-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem 1.1rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
}

.table-panel {
  overflow: hidden;
}

.table-scroll {
  overflow-x: auto;
}

.two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}

.inline-form {
  display: flex;
  gap: 0.9rem;
  align-items: end;
  margin-block-end: 1.5rem;
  padding: 1rem 1.1rem;
}

.inline-form label {
  display: grid;
  gap: 0.35rem;
  min-width: 10rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.inline-form input {
  min-height: 2.7rem;
}

.inline-form .button {
  flex: 0 0 auto;
}

.cash-report-date-field {
  display: grid;
  flex: 1 1 12rem;
  gap: 0.35rem;
  min-width: 12rem;
}

.cash-report-filter {
  width: min(50rem, 100%);
}

.cash-report-date-field > label {
  min-width: 0;
}

.cash-report-date-field input:not([type="hidden"]) {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.58rem 0.7rem;
  color: var(--ink);
  background: #fdfcfa;
  border: 1px solid #dcd4d0;
  border-radius: 0.6rem;
  outline: none;
}

.cash-report-date-field .afghan-date-input input {
  padding-inline-end: 2.7rem;
}

.cash-report-date-field input:not([type="hidden"]):focus {
  background: white;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgb(125 38 58 / 10%);
}

.cash-report-date-field input:not([type="hidden"]):focus-visible {
  outline: 3px solid rgb(217 155 32 / 75%);
  outline-offset: 1px;
}

.cash-report-totals {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.cash-report-empty {
  grid-column: 1 / -1;
  padding: 1.25rem;
  color: var(--muted);
  text-align: center;
}

.cash-report-empty p {
  margin: 0;
}

.cash-report-tables {
  margin-block-start: 1.5rem;
}

.cash-ledger-detail {
  margin-block-start: 1.5rem;
}

.cash-ledger-detail .panel-heading p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.cash-report-print-header {
  display: none;
}

.cash-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr);
  gap: 1.25rem;
  width: 100%;
  margin-inline: 0;
  align-items: start;
}

.cash-payment-form {
  width: 100%;
  max-width: none;
}

.cash-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block-end: 1.25rem;
  padding: 0.9rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.cash-payment-summary > div {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.cash-payment-summary small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.cash-payment-summary strong {
  font-size: 1rem;
  white-space: nowrap;
}

.cash-payment-summary .cash-payment-balance {
  padding-inline-start: 0.75rem;
  color: var(--wine);
  border-inline-start: 2px solid var(--saffron);
}

.cash-pay-full {
  justify-self: start;
  margin-block-start: 0.35rem;
  padding: 0;
  color: var(--wine);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

.cash-pay-full:hover,
.cash-pay-full:focus-visible {
  color: var(--wine-dark);
  text-decoration: underline;
}

.cash-amount-control {
  position: relative;
  display: block;
  min-width: 0;
}

.cash-amount-control input {
  width: 100%;
  min-width: 0;
  padding-inline-end: 4.5rem;
  direction: ltr;
}

.cash-amount-currency {
  display: inline-flex;
  position: absolute;
  z-index: 1;
  inset-inline-end: 0.45rem;
  top: 50%;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  padding: 0.28rem 0.55rem;
  color: var(--wine);
  background: #f6eee8;
  border: 1px solid #e5d4ca;
  border-radius: 0.45rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  direction: ltr;
}

.cash-amount-control input:focus + .cash-amount-currency {
  background: var(--wine-soft);
  border-color: rgb(125 38 58 / 28%);
}

.cash-source-field[hidden] {
  display: none;
}

.receipt-card {
  width: 100%;
  margin: 0;
}

.receipt-layout {
  width: min(52rem, 100%);
  margin-inline: 0 auto;
}

.receipt-number {
  direction: ltr;
  text-align: start;
}

.receipt-payment-summary {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  text-align: end;
}

.receipt-status-badge {
  gap: 0.35rem;
}

.receipt-total-badge {
  white-space: nowrap;
}

.receipt-total-badge small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.receipt-total-badge strong {
  color: var(--green);
  font-size: 1.45rem;
  direction: ltr;
}

.receipt-sections strong {
  font-size: 0.95rem;
}

.receipt-amount-section strong {
  color: var(--green);
  font-size: 1.25rem;
}

.receipt-amount-section .status-positive {
  gap: 0.3rem;
  margin-block-start: 0.45rem;
}

.receipt-main-link {
  color: var(--ink);
  text-decoration: none;
}

.receipt-main-link:hover {
  color: var(--wine);
}

.receipt-payment-list {
  margin: 0;
}

.cash-charge-layout {
  width: min(68rem, 100%);
  margin-inline: 0 auto;
}

.cash-charge-sections strong {
  font-size: 1.05rem;
}

.cash-charge-notes {
  grid-column: 1 / -1;
}

.cash-charge-receipts {
  width: min(68rem, 100%);
  margin-block: 1.25rem 0;
  margin-inline: 0 auto;
}

.cash-charge-receipts .patient-cash-amount {
  margin-inline-start: auto;
}

.cash-charge-card .document-header h2 a:hover,
.cash-charge-card .document-header h2 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.cash-receipt-link {
  text-decoration: none;
}

.cash-charge-receipts .simple-list > a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(9rem, auto) auto;
  text-decoration: none;
}

.appointment-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  margin-block-end: 1.25rem;
  padding: 0.7rem 1rem;
}

.appointment-toolbar-date {
  display: grid;
  min-width: min(20rem, 60vw);
  text-align: center;
}

.appointment-toolbar-date small {
  color: var(--muted);
  font-size: 0.78rem;
}

.appointment-toolbar-divider {
  width: 1px;
  height: 1.8rem;
  margin-inline: 0.15rem;
  background: var(--line);
}

.appointment-view-buttons {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.appointment-view-buttons .is-active {
  color: var(--wine);
  background: #fffaf0;
  border-color: var(--saffron);
}

.appointment-calendar {
  overflow: hidden;
}

.appointment-calendar-header,
.appointment-calendar-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
}

.appointment-calendar-header {
  color: var(--muted);
  background: var(--surface-soft);
  border-block-end: 1px solid var(--line);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[dir="rtl"] .appointment-calendar-header {
  letter-spacing: 0;
}

.appointment-calendar-header span {
  padding: 0.8rem 1rem;
}

.appointment-calendar-row {
  min-height: 3.75rem;
  border-block-end: 1px solid var(--line);
}

.appointment-calendar-row:last-child {
  border: 0;
}

.appointment-time {
  padding: 0.9rem 0.7rem;
  color: var(--muted);
  border-inline-end: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: center;
}

.appointment-slot {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  min-width: 0;
  padding: 0.55rem 0.7rem;
}

.appointment-slot-empty {
  align-self: center;
  color: #b5a9a8;
  font-size: 0.78rem;
}

.appointment-slot-occupied {
  align-self: center;
  padding: 0.45rem 0.6rem;
  color: var(--muted);
  background: var(--surface-soft);
  border-radius: 0.55rem;
  font-size: 0.74rem;
}

.appointment-slot-past {
  align-self: center;
  padding: 0.45rem 0.6rem;
  color: #b5a9a8;
  font-size: 0.74rem;
}

.appointment-slot-link {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.45rem 0.6rem;
  color: var(--muted);
  border: 1px dashed #d9cfca;
  border-radius: 0.55rem;
  font-size: 0.76rem;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.appointment-slot-link span:first-child {
  color: var(--wine);
  font-size: 1rem;
  font-weight: 800;
}

.appointment-slot-link:hover {
  color: var(--wine);
  background: #fffaf0;
  border-color: var(--saffron);
}

.appointment-week-calendar {
  overflow-x: auto;
}

.appointment-calendar-hint {
  margin: 0;
  padding: 0.7rem 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.appointment-calendar-hint i {
  margin-inline-end: 0.25rem;
  color: var(--wine);
}

.appointment-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(9.5rem, 1fr));
  min-width: 66.5rem;
}

.appointment-week-day {
  min-width: 0;
  min-height: 28rem;
  border-inline-end: 1px solid var(--line);
}

.appointment-week-day:last-child {
  border: 0;
}

.appointment-week-day.is-friday,
.appointment-month-day.is-friday,
.appointment-toolbar.is-friday {
  background: #f3f1ef;
}

.appointment-week-day.is-friday .appointment-week-day-header,
.appointment-month-day.is-friday .appointment-month-day-header {
  background: #ebe9e7;
}

.appointment-week-day.is-today {
  background: #fffaf0;
}

.appointment-week-day.is-selected {
  box-shadow: inset 0 3px var(--wine);
}

.appointment-week-day-header {
  display: grid;
  min-width: 0;
  min-height: 5.2rem;
  background: var(--surface-soft);
  border-block-end: 1px solid var(--line);
}

.appointment-week-day-header a {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0.75rem;
  color: inherit;
  text-decoration: none;
}

.appointment-week-day-header a:hover strong,
.appointment-week-day-header a:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.appointment-week-day-header strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 400;
}

.appointment-week-day-header time {
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 400;
}

.appointment-week-day-header small {
  color: var(--wine);
  font-size: 0.66rem;
  font-weight: 400;
}

.appointment-week-day-list {
  display: grid;
  align-content: start;
  min-width: 0;
}

.appointment-week-slot {
  min-height: 2.65rem;
  border-block-end: 1px solid #eee9e5;
}

.appointment-week-slot:last-child {
  border-block-end: 0;
}

.appointment-week-slot-time {
  display: block;
  width: 100%;
  padding: 0.45rem 0.45rem 0.1rem;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 400;
  text-align: start;
}

.appointment-week-slot-time-link {
  color: var(--ink);
  text-decoration: none;
}

.appointment-week-slot-time-link:hover,
.appointment-week-slot-time-link:focus-visible {
  background: #fffaf0;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.appointment-week-slot-content {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.1rem 0.4rem 0.35rem;
}

.appointment-week-slot.is-taken .appointment-week-slot-content {
  background: #fffaf0;
}

.appointment-month-calendar {
  overflow-x: auto;
}

.appointment-month-weekdays,
.appointment-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(8rem, 1fr));
  min-width: 56rem;
}

.appointment-month-weekdays {
  color: var(--muted);
  background: var(--surface-soft);
  border-block-end: 1px solid var(--line);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

.appointment-month-weekdays span {
  padding: 0.75rem 0.5rem;
  border-inline-end: 1px solid var(--line);
}

.appointment-month-weekdays span:last-child {
  border: 0;
}

.appointment-month-day {
  min-height: 9rem;
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
}

.appointment-month-day:nth-child(7n) {
  border-inline-end: 0;
}

.appointment-month-day.is-outside {
  background: #faf8f6;
}

.appointment-month-day.is-today {
  background: #fffaf0;
  box-shadow: inset 0 3px var(--wine);
}

.appointment-week-day.is-friday.is-today,
.appointment-month-day.is-friday.is-today {
  background: #f3f1ef;
}

.appointment-month-day-header {
  display: grid;
  gap: 0.1rem;
  justify-items: start;
  padding: 0.55rem 0.65rem;
}

.appointment-month-day-header a {
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.appointment-month-day-header a:hover,
.appointment-month-day-header a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.appointment-month-day.is-outside .appointment-month-day-header a {
  color: #b5a9a8;
}

.appointment-month-day-header small {
  display: block;
  color: var(--wine);
  font-size: 0.66rem;
  white-space: nowrap;
}

.appointment-month-day-list {
  display: grid;
  gap: 0.28rem;
  align-content: start;
  padding: 0 0.45rem 0.55rem;
}

.appointment-month-card {
  display: grid;
  gap: 0.1rem;
  overflow: hidden;
  padding: 0.36rem 0.45rem;
  color: var(--ink);
  background: #fffdfb;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--saffron);
  border-radius: 0.42rem;
  text-decoration: none;
}

.appointment-month-card:hover {
  background: white;
  border-color: #cfc3bd;
}

.appointment-month-card.appointment-status-confirmed {
  border-inline-start-color: #5884a5;
}

.appointment-month-card.appointment-status-arrived {
  border-inline-start-color: #348064;
}

.appointment-month-card.appointment-status-completed {
  border-inline-start-color: #8e8584;
}

.appointment-month-card.appointment-status-cancelled,
.appointment-month-card.appointment-status-no_show {
  border-inline-start-color: #b86a6a;
  opacity: 0.75;
}

.appointment-month-card time,
.appointment-month-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appointment-month-card time {
  color: var(--wine);
  font-size: 0.66rem;
  font-weight: 800;
}

.appointment-month-card strong {
  font-size: 0.7rem;
}

.appointment-month-more {
  color: var(--wine);
  font-size: 0.68rem;
  font-weight: 750;
  text-decoration: none;
}

.appointment-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
  background: #fffdfb;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--saffron);
  border-radius: 0.7rem;
  box-shadow: 0 3px 12px rgb(53 35 39 / 4%);
}

.appointment-status-confirmed {
  border-inline-start-color: #5884a5;
}

.appointment-status-arrived {
  border-inline-start-color: #348064;
}

.appointment-status-completed {
  border-inline-start-color: #8e8584;
}

.appointment-status-cancelled,
.appointment-status-no_show {
  border-inline-start-color: #b86a6a;
  opacity: 0.78;
}

.appointment-card-main {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.appointment-card-title {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  flex-wrap: wrap;
}

.appointment-card-title a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.appointment-card-title a:hover {
  color: var(--wine);
  text-decoration: underline;
}

.appointment-card-main > small:not(.record-number) {
  color: var(--muted);
  font-size: 0.78rem;
}

.appointment-card-main p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.appointment-card-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.appointment-card-actions form {
  display: inline-flex;
}

@media (max-width: 48rem) {
  .appointment-calendar-header,
  .appointment-calendar-row {
    grid-template-columns: 4.4rem minmax(0, 1fr);
  }

  .appointment-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .appointment-card-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 34rem) {
  .appointment-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    justify-content: stretch;
  }

  .appointment-toolbar-divider {
    display: none;
  }

  .appointment-toolbar-date {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
  }

  .appointment-toolbar-previous {
    grid-column: 1;
    grid-row: 2;
  }

  .appointment-toolbar-next {
    grid-column: 2;
    grid-row: 2;
  }

  .appointment-toolbar-today {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    min-width: 6rem;
  }

  .appointment-toolbar-divider {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    height: 1px;
    margin: 0.25rem 0;
  }

  .appointment-view-buttons {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 5;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .appointment-view-buttons .button {
    min-width: 0;
    width: 100%;
  }
}

/* Busy state for submitting forms */
.button.is-busy {
  opacity: 0.7;
  pointer-events: none;
}

.button.is-busy::after {
  display: inline-block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  margin-inline-start: 0.45rem;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: middle;
  animation: button-spin 0.7s linear infinite;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Confirmation dialog */
.confirm-dialog-card {
  display: grid;
  gap: 1rem;
  min-width: min(22rem, calc(100vw - 3rem));
  padding: 1.4rem;
  background: #fff;
  border: 0;
  border-radius: 0.8rem;
}

.confirm-dialog-card p {
  margin: 0;
  font-weight: 700;
}

/* Patient documents */
.next-steps {
  display: grid;
  gap: 0.35rem;
  margin-block-end: 0.9rem;
  padding: 0.6rem 0.9rem;
  background: #eef3f8;
  border: 1px solid #b9c9d8;
  border-radius: 0.55rem;
  font-size: 0.85rem;
}

.next-steps strong {
  color: #31536f;
}

.next-steps-label {
  line-height: 1.35;
}

.next-steps-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
}

.next-step-link {
  color: #1d6f9f;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.next-step-link:hover,
.next-step-link:focus-visible {
  color: #155577;
}

.visit-cash-panel,
.visit-linked-records {
  margin-block-start: 1.25rem;
}

.panel-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-block-end: 1px solid var(--line);
}

.panel-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.panel-heading p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.panel-heading > a {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
}

.simple-list > a {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.8rem 1.1rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
  text-decoration: none;
}

.simple-list > a:last-child {
  border: 0;
}

.simple-list > a:hover {
  background: var(--surface-soft);
}

.patient-avatar,
.document-avatar,
.medication-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  color: var(--wine);
  background: var(--wine-soft);
  border-radius: 50%;
  font-weight: 850;
  place-items: center;
}

.document-avatar {
  color: var(--blue);
  background: #eaf2f9;
  border-radius: 0.7rem;
  font-size: 0.78rem;
}

.procedure-avatar {
  color: var(--green);
  background: var(--green-soft);
}

.list-primary {
  display: grid;
  min-width: 0;
}

.list-primary small,
.person-cell small,
.medication-name small,
.block {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.chevron,
.row-link {
  margin-inline-start: auto;
  color: #a5979b;
  font-size: 1.5rem;
  text-decoration: none;
}

.empty-compact {
  padding: 1.5rem;
  color: var(--muted);
  text-align: center;
}

.empty-compact p {
  margin: 0.2rem;
}

/* Finder and tables */
.finder {
  margin-block-end: 1rem;
  padding: 0.8rem;
}

.finder-form {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.finder-form > span {
  margin-inline-start: 0.4rem;
  color: var(--muted);
  font-size: 1.4rem;
}

.finder-form input {
  flex: 1;
  min-width: 0;
  min-height: 2.7rem;
  padding: 0.5rem;
  background: transparent;
  border: 0;
  outline: 0;
}

.finder-result {
  margin: 0.55rem 0 0 2.5rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.responsive-table {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}

th,
td {
  padding: 0.85rem 1rem;
  border-block-end: 1px solid var(--line);
  text-align: start;
  vertical-align: middle;
}

th {
  color: var(--muted);
  background: #fbfaf9;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

[dir="rtl"] th {
  letter-spacing: 0;
}

tbody tr:last-child td {
  border: 0;
}

.clickable-table tbody tr {
  cursor: pointer;
}

.clickable-table tbody tr:hover {
  background: var(--surface-soft);
}

.person-cell,
.medication-name {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.record-number {
  color: var(--wine);
  direction: ltr;
  unicode-bidi: plaintext;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 760;
}

.badge {
  display: inline-flex;
  padding: 0.25rem 0.55rem;
  color: #5e5356;
  background: #f0ecea;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
}

.badge-success,
.status-positive {
  color: #236048;
  background: var(--green-soft);
}

.badge-danger {
  color: #85243a;
  background: #fff5f7;
}

.status-positive {
  display: inline-flex;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
}

.badge-large {
  padding: 0.45rem 0.75rem;
}

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

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  color: var(--muted);
  font-size: 0.82rem;
  border-block-start: 1px solid var(--line);
}

.pagination a {
  font-weight: 700;
  text-decoration: none;
}

.empty-state {
  display: grid;
  justify-items: center;
  padding: clamp(2.5rem, 8vw, 5rem) 1rem;
  text-align: center;
}

.empty-icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  margin-block-end: 1rem;
  color: var(--wine);
  background: var(--wine-soft);
  border-radius: 1.2rem;
  font-size: 1.35rem;
  font-weight: 850;
  place-items: center;
}

.empty-state h2 {
  margin: 0;
}

.empty-state p {
  max-width: 30rem;
  margin: 0.45rem 0 1.2rem;
  color: var(--muted);
}

/* Forms */
.form-card,
.prescription-builder {
  width: 100%;
  margin-inline: 0;
  padding: clamp(1rem, 3vw, 1.7rem);
}

.form-stack {
  display: grid;
  gap: 1rem;
}

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

.field {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.afghan-date-input {
  position: relative;
}

.field .afghan-date-input input {
  padding-inline-end: 2.7rem;
}

.afghan-date-input-icon {
  position: absolute;
  inset-inline-end: 0.85rem;
  top: 50%;
  display: grid;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
  place-items: center;
}

.afghan-date-input-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.clinic-datetime-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 0.45rem;
  align-items: end;
}

.clinic-time-input {
  position: relative;
  display: grid;
  min-width: 0;
}

.clinic-time-input span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.clinic-datetime-input .afghan-date-input,
.clinic-datetime-input .clinic-time-input input,
.clinic-datetime-input .clinic-time-input select {
  min-width: 0;
}

@media (max-width: 38rem) {
  .clinic-datetime-input {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
  }
}

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

.field label {
  font-size: 0.82rem;
  font-weight: 760;
}

.field-label {
  display: block;
  margin-block-end: 0.35rem;
  font-size: 0.82rem;
  font-weight: 760;
}

.fixed-field-value {
  min-height: 2.75rem;
  padding: 0.58rem 0.7rem;
  color: var(--ink);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  font-weight: 700;
}

.field input:not([type="checkbox"]),
.field select,
.field textarea,
.live-search input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.58rem 0.7rem;
  color: var(--ink);
  background: #fdfcfa;
  border: 1px solid #dcd4d0;
  border-radius: 0.6rem;
  outline: none;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.live-search input:focus {
  background: white;
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgb(125 38 58 / 10%);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.live-search input:focus-visible,
.global-search input:focus-visible,
.rx-search-box input:focus-visible {
  outline: 3px solid rgb(217 155 32 / 75%);
  outline-offset: 1px;
}

.field input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--wine);
}

.field:has(input[type="checkbox"]) {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-height: 2.75rem;
  padding-block-start: 1.2rem;
}

.field:has(input[type="checkbox"]) label {
  order: 2;
}

.help-text,
.error-text {
  color: var(--muted);
  font-size: 0.74rem;
}

.error-text,
.errorlist {
  color: #a0273d;
}

.errorlist {
  margin: 0;
  padding-inline-start: 1.2rem;
  font-size: 0.78rem;
}

.field-error input,
.field-error select,
.field-error textarea {
  border-color: #c54860 !important;
}

.form-errors {
  margin-block-end: 1rem;
  padding: 0.8rem;
  color: #85243a;
  background: var(--wine-soft);
  border-radius: 0.6rem;
}

.form-section + .form-section {
  margin-block-start: 2rem;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--line);
}

.form-section-heading {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-block-end: 1rem;
}

.form-section-heading > span {
  display: grid;
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  color: white;
  background: var(--wine);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 800;
  place-items: center;
}

.form-section-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.form-section-heading p {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.form-actions {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: flex-end;
  margin-block-start: 1.7rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--line);
}

.form-foot {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.turnstile-field {
  display: grid;
  gap: 0.55rem;
  margin-block-start: 1.5rem;
}

.turnstile-field > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.turnstile-field .cf-turnstile {
  width: 100%;
  min-height: 4.1rem;
}

.registration-submit {
  margin-block-start: 1.25rem;
}

.registration-form > .form-foot {
  margin-block-start: 0.85rem;
}

.auth-card {
  display: grid;
  grid-template-columns: 1.1fr minmax(20rem, 0.75fr);
  gap: clamp(2rem, 8vw, 7rem);
  align-items: center;
  width: min(68rem, 100%);
}

.auth-intro h1,
.registration-copy h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

.auth-intro p,
.registration-copy > p {
  margin-inline: 0;
}

.auth-card form {
  padding: 1.5rem;
}

.registration-layout {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  width: min(76rem, 100%);
}

.registration-copy {
  position: sticky;
  top: 2rem;
  padding-block-start: 2rem;
}

.registration-form {
  padding: clamp(1rem, 3vw, 1.75rem);
}

.feature-checks {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
}

.feature-checks li::before {
  margin-inline-end: 0.5rem;
  color: var(--green);
  content: "✓";
  font-weight: 850;
}

.approval-card {
  display: grid;
  justify-items: center;
  width: min(38rem, 100%);
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

.approval-icon {
  display: grid;
  width: 4.2rem;
  height: 4.2rem;
  margin-block-end: 1.2rem;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid #b9dece;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 850;
  place-items: center;
}

.approval-card h1 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.approval-card h2 {
  margin: 1rem 0 0;
  font-size: 1.15rem;
}

.approval-card > p {
  max-width: 31rem;
  color: var(--muted);
}

.approval-email {
  display: grid;
  min-width: min(22rem, 100%);
  margin-block: 0.6rem;
  padding: 0.75rem 1rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
}

.approval-email small,
.approval-note {
  color: var(--muted);
  font-size: 0.78rem;
}

.clinic-switch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.clinic-switch-card {
  padding: 1rem;
}

.clinic-switch-card.current {
  border-color: #c99ca7;
  box-shadow: 0 0 0 2px rgb(125 38 58 / 8%), var(--shadow);
}

.clinic-switch-heading {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-block-end: 0.8rem;
  border-block-end: 1px solid var(--line);
}

.clinic-switch-heading > span {
  display: grid;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  color: white;
  background: var(--wine);
  border-radius: 0.75rem;
  font-weight: 850;
  place-items: center;
}

.clinic-switch-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.clinic-switch-heading small {
  display: block;
  color: var(--muted);
}

.clinic-switch-card dl {
  display: grid;
  margin: 0.8rem 0;
}

.clinic-switch-card dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.35rem;
}

.clinic-switch-card dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.clinic-switch-card dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.duplicate-check {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 1rem;
  align-items: center;
  width: min(64rem, 100%);
  margin: 0 auto 1rem;
  padding: 1rem;
}

.duplicate-check > div:first-child {
  display: grid;
}

.duplicate-check small {
  color: var(--muted);
}

.live-search {
  position: relative;
}

.patient-picker {
  position: relative;
}

.patient-picker-field {
  padding: 0.8rem;
  background: linear-gradient(135deg, rgb(248 233 236 / 88%), rgb(255 255 255 / 94%));
  border: 1px solid #dbc2c8;
  border-inline-start: 4px solid var(--wine);
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px rgb(68 38 45 / 8%);
}

[dir="rtl"] .patient-picker-field {
  background: linear-gradient(-135deg, rgb(248 233 236 / 88%), rgb(255 255 255 / 94%));
}

.patient-picker-field:focus-within {
  border-color: var(--wine);
  box-shadow: 0 0 0 4px var(--wine-soft);
}

.patient-picker-field > label,
.patient-picker-field > small:first-child {
  display: block;
  color: var(--wine);
  font-size: 0.76rem;
  font-weight: 850;
}

.patient-picker-field > small:first-child {
  margin-block-end: 0.4rem;
}

.patient-picker-field .patient-picker-input input[type="search"] {
  min-height: 3rem;
  border: 1px solid #c9acb3;
  box-shadow: 0 2px 8px rgb(68 38 45 / 6%);
}

.patient-picker-field .selected-patient-card {
  min-height: 3.5rem;
  background: white;
  border-color: #c9acb3;
}

.patient-picker-input,
.search-field {
  position: relative;
}

.patient-picker-icon,
.search-field-icon {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: 0.75rem;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
}

.patient-picker-input input[type="search"] {
  width: 100%;
  min-height: 2.65rem;
  padding-block: 0.52rem;
  padding-inline: 0.65rem;
  padding-inline-start: 2.35rem;
  color: var(--ink);
  background: white;
  border: 1px solid #dcd4d0;
  border-radius: 0.55rem;
}

.patient-picker-input input[type="search"]:focus,
.search-field input[type="search"]:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgb(125 38 58 / 10%);
  outline: none;
}

.patient-picker-invalid .patient-picker-input input[type="search"] {
  border-color: #c54860;
  box-shadow: 0 0 0 3px rgb(197 72 96 / 10%);
}

.patient-picker-invalid .patient-picker-status {
  color: #a0273d;
  font-weight: 700;
}

.search-field input[type="search"] {
  padding-inline-start: 2.35rem;
}

.patient-picker-results {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline: 0;
  max-height: min(22rem, calc(100vh - 12rem));
  overflow-y: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  box-shadow: var(--shadow);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.patient-picker-input > .patient-picker-results,
.search-field > .live-results {
  inset-block-start: calc(100% + 0.15rem);
}

.patient-picker-message {
  padding: 0.85rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.patient-picker-result {
  display: grid;
  gap: 0.15rem;
  width: 100%;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: white;
  border: 0;
  border-block-end: 1px solid var(--line);
  cursor: pointer;
  text-align: start;
}

.patient-picker-result:hover,
.patient-picker-result:focus {
  background: var(--surface-soft);
  outline: none;
}

.patient-picker-result small,
.patient-picker-status {
  color: var(--muted);
  font-size: 0.74rem;
}

.patient-picker-status {
  display: block;
  min-height: 1.2rem;
  margin-block-start: 0.25rem;
}

.selected-patient-card {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.55rem;
  background: var(--surface-soft);
}

.selected-patient-card[hidden] {
  display: none;
}

.selected-patient-card-content {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.selected-patient-card small {
  color: var(--muted);
  font-size: 0.74rem;
}

.patient-picker-change {
  flex: 0 0 auto;
}

.visit-context-chip {
  display: inline-block;
  margin-block-start: 0.35rem;
  color: var(--wine);
  font-size: 0.74rem;
  font-weight: 750;
}

.live-results {
  position: absolute;
  z-index: 10;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline: 0;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  box-shadow: var(--shadow);
}

.live-results a {
  display: grid;
  padding: 0.65rem 0.8rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
  text-decoration: none;
}

.live-results a:hover {
  background: var(--surface-soft);
}

.live-results small {
  color: var(--muted);
}

.two-column-form {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 1.25rem;
  width: min(64rem, 100%);
  margin-inline: auto;
}

.import-guide {
  align-self: start;
  padding: 1.4rem;
}

.import-guide h2 {
  margin: 0;
}

.import-guide code {
  display: block;
  overflow-x: auto;
  padding: 0.75rem;
  direction: ltr;
  color: #493d40;
  background: #f3efec;
  border-radius: 0.55rem;
  font-size: 0.75rem;
  text-align: left;
  white-space: nowrap;
}

/* Patient */
.patient-banner {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-block-end: 1.4rem;
}

.patient-banner > .button-group {
  flex-wrap: nowrap;
  flex: 0 0 auto;
  max-width: 100%;
  overflow-x: auto;
  padding-block-end: 0.15rem;
}

.patient-banner > .button-group .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.patient-title {
  display: flex;
  gap: 1rem;
  align-items: center;
  min-width: 0;
}

.patient-context-header {
  max-width: 74rem;
  margin: 0 auto 1.4rem;
  padding: 1rem 1.1rem;
}

.patient-context-main {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  justify-content: space-between;
}

.patient-context-identity {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  min-width: 0;
}

.patient-context-avatar {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
}

.patient-context-identity .back-link {
  margin-block-end: 0.2rem;
}

.patient-context-section {
  display: block;
  margin-block-end: 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

[dir="rtl"] .patient-context-section {
  letter-spacing: 0;
}

.patient-context-identity h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.15;
}

.patient-context-identity h1 a {
  color: inherit;
  text-decoration: none;
}

.patient-context-identity p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.patient-context-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  max-width: 100%;
  padding-block-end: 0.1rem;
  overflow-x: auto;
}

.patient-context-actions .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.patient-context-alert {
  margin: 0.9rem 0 0;
  padding: 0.65rem 0.8rem;
}

.patient-avatar-large,
.document-avatar-large {
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
}

.patient-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.5fr);
  gap: 1.25rem;
}

.patient-summary {
  align-self: start;
  padding: 1.2rem;
}

.patient-summary > .panel-heading {
  margin: -1.2rem -1.2rem 1rem;
}

.patient-summary > .panel-heading h2 {
  margin: 0;
}

.patient-summary h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.detail-list > div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0.7rem;
  padding-block: 0.58rem;
  border-block-end: 1px solid var(--line);
}

.detail-list dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.detail-list dd {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 650;
  text-align: end;
}

.patient-overview {
  margin-block-start: 1.1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}

.patient-overview h3 {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-size: 0.88rem;
}

.patient-overview-list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}

.patient-overview-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: var(--surface-soft);
  border-radius: 0.55rem;
}

.patient-overview-list dt {
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
}

.patient-overview-list dt i {
  width: 1.05rem;
  margin-inline-end: 0.3rem;
  color: var(--blue);
  text-align: center;
}

.patient-overview-list dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 750;
  text-align: end;
}

.patient-overview-balance dd {
  color: var(--wine);
  direction: ltr;
  unicode-bidi: plaintext;
}

.patient-allergies {
  margin-block-start: 1rem;
  padding: 0.85rem 0.9rem;
  color: #76521a;
  background: #fff8e8;
  border: 1px solid #eed7a7;
  border-inline-start: 3px solid var(--saffron);
  border-radius: 0.65rem;
}

.patient-allergies-heading {
  display: flex;
  gap: 0.45rem;
  align-items: center;
}

.patient-allergies-heading i {
  color: #b47716;
}

.patient-allergies h3 {
  margin: 0;
  color: #6d4a16;
  font-size: 0.84rem;
}

.patient-allergies p {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

.patient-notes {
  margin-block-start: 1rem;
  padding: 0.8rem;
  background: var(--surface-soft);
  border-radius: 0.6rem;
  font-size: 0.82rem;
}

.patient-notes p {
  margin: 0.3rem 0 0;
}

.clinical-timeline {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.patient-clinical-history-panel {
  overflow: hidden;
}

.patient-clinical-history-panel > .panel-heading {
  background: linear-gradient(110deg, #f8fbfd, #fff);
}

.patient-clinical-history-heading {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
}

.patient-clinical-history-heading > div {
  min-width: 0;
}

.patient-clinical-history-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--blue);
  background: #eaf2f9;
  border: 1px solid #d5e4ef;
  border-radius: 0.7rem;
  place-items: center;
}

.patient-clinical-history-panel .timeline-entry {
  transition: background 0.15s ease, padding-inline 0.15s ease;
}

.patient-clinical-history-panel .timeline-entry:hover,
.patient-clinical-history-panel .timeline-entry:focus-visible {
  background: #fbf8f6;
}

.patient-clinical-history-panel .timeline-marker {
  border: 1px solid rgb(72 110 146 / 12%);
  box-shadow: 0 0 0 3px var(--surface);
}

.patient-clinical-history-panel .timeline-procedure .timeline-marker {
  border-color: rgb(52 112 90 / 14%);
}

.panel-heading-actions {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.patient-appointment-list {
  display: grid;
}

/* Patient documents panel */
.document-page-heading {
  min-width: 0;
  max-width: 74rem;
  margin-inline: auto;
}

.document-page-heading > div:first-child,
.document-page-heading .breadcrumb {
  width: 100%;
  min-width: 0;
}

.document-page-heading p,
.document-page-heading .record-number {
  overflow-wrap: anywhere;
}

.document-center-layout,
.document-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr);
  gap: 1.25rem;
  align-items: start;
  width: 100%;
  min-width: 0;
  max-width: 74rem;
  margin-inline: auto;
  overflow-x: hidden;
}

.document-library,
.document-upload-card,
.document-viewer-card,
.document-details-card {
  min-width: 0;
}

.document-library-list {
  display: grid;
  min-width: 0;
}

.document-library-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  min-width: 0;
  padding: 0.9rem 1.1rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
  text-decoration: none;
}

.document-library-row:last-child {
  border-block-end: 0;
}

.document-library-row:hover,
.document-library-row:focus-visible {
  background: var(--surface-soft);
}

.document-library-row:hover strong,
.document-library-row:focus-visible strong {
  color: var(--blue);
}

.document-library-row .list-primary {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.document-library-row small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-upload-card {
  padding: 1.2rem;
}

.document-upload-intro {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.document-upload-intro > div {
  min-width: 0;
}

.document-upload-intro h2 {
  margin: 0;
  font-size: 1rem;
}

.document-upload-intro p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.document-upload-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--blue);
  background: #eaf2f9;
  border-radius: 0.75rem;
  font-size: 1.1rem;
  place-items: center;
}

.document-upload-form {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  margin-block-start: 1.2rem;
}

.document-upload-form .button {
  width: 100%;
}

.document-upload-form .file-select-button {
  width: 100%;
  justify-content: center;
}

.document-empty-state {
  padding-block: 3rem;
}

.document-viewer-card {
  overflow: hidden;
}

.document-viewer-heading {
  padding: 1rem 1.2rem;
  background: #fcfaf9;
  border-block-end: 1px solid var(--line);
}

.document-viewer-heading > div {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.document-viewer-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.document-viewer-heading p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.document-viewer-heading .document-avatar {
  width: 2.7rem;
  height: 2.7rem;
}

.document-preview {
  padding: 1rem;
}

.document-preview img {
  display: block;
  max-inline-size: 100%;
  max-block-size: 32rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
}

.document-preview-frame {
  display: block;
  width: 100%;
  height: min(72vh, 54rem);
  border: 0;
  background: #f4f5f6;
}

.document-preview-generic {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  padding: 3rem 1rem;
  color: var(--muted);
  text-align: center;
}

.document-preview-generic i {
  font-size: 2.2rem;
  color: var(--blue);
}

.document-details-card {
  padding: 1.2rem;
}

.patient-documents-panel {
  margin-block-end: 1.25rem;
}

.patient-documents-icon {
  color: var(--blue);
}

.patient-documents-title-link {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.patient-documents-title-link:hover,
.patient-documents-title-link:focus-visible {
  color: var(--blue);
}

.patient-document-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
  border-block-end: 1px solid var(--line);
}

.patient-document-row > a {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.patient-document-row > a:hover strong,
.patient-document-row > a:focus-visible strong {
  color: var(--blue);
}

.patient-document-row small {
  color: var(--muted);
  font-size: 0.76rem;
}

.patient-document-icon {
  display: grid;
  place-items: center;
  inline-size: 2.1rem;
  block-size: 2.1rem;
  color: var(--blue);
  background: #eef3f8;
  border-radius: 0.5rem;
}

.patient-document-upload input[type="file"] {
  max-width: 100%;
  font-size: 0.82rem;
  color: var(--muted);
}

.patient-document-upload input[type="file"]::file-selector-button {
  margin-inline-end: 0.6rem;
  padding: 0.45rem 0.75rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  cursor: pointer;
  font-weight: 700;
}

.patient-document-upload input[type="file"]::file-selector-button:hover {
  border-color: var(--muted);
}

.patient-document-upload {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 1rem 1.1rem 1.1rem;
  padding: 0.9rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.7rem;
}

.patient-document-upload-file {
  display: grid;
  flex: 1 1 14rem;
  gap: 0.35rem;
  min-width: 0;
}

.patient-document-upload .file-select-button {
  display: flex;
  gap: 0.7rem;
  min-height: 3.25rem;
  padding: 0.65rem 0.85rem;
  width: 100%;
  justify-content: center;
  color: var(--blue);
  background: white;
  border: 1px dashed #9eb6ca;
  border-radius: 0.7rem;
  box-shadow: 0 2px 8px rgb(48 33 37 / 4%);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.patient-document-upload .file-select-button:hover,
.patient-document-upload .file-select-button:focus-within {
  background: #f8fbfd;
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgb(72 110 146 / 12%);
}

.patient-document-upload .file-select-button i {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: white;
  background: var(--blue);
  border-radius: 0.55rem;
  place-items: center;
}

.patient-document-file-label {
  min-width: 0;
  overflow: hidden;
  direction: ltr;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-document-upload > .button {
  align-self: flex-start;
  flex: 0 0 auto;
  min-width: 9.5rem;
  min-height: 3.25rem;
  box-shadow: 0 7px 16px rgb(125 38 58 / 16%);
}

.patient-document-upload .file-select-name {
  padding-inline: 0.2rem;
  overflow-wrap: anywhere;
}

.patient-document-upload .file-select-name:empty {
  display: none;
}

.document-upload-limit {
  color: var(--muted);
  font-size: 0.76rem;
}

@media (max-width: 38rem) {
  .patient-document-upload {
    align-items: stretch;
    flex-direction: column;
  }

  .patient-document-upload > .button {
    align-self: stretch;
    width: 100%;
  }
}

.patient-appointment-row {
  display: grid;
  grid-template-columns: minmax(10rem, 0.85fr) minmax(10rem, 1.15fr) auto auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.8rem 1.1rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
  text-decoration: none;
}

.patient-appointment-row:last-child {
  border: 0;
}

.patient-appointment-row:hover {
  background: var(--surface-soft);
}

.patient-appointment-time,
.patient-appointment-details {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.patient-appointment-time time {
  color: var(--wine);
  font-size: 0.8rem;
  font-weight: 800;
}

.patient-appointment-time strong,
.patient-appointment-details span {
  font-size: 0.78rem;
}

.patient-appointment-details {
  color: var(--muted);
}

.patient-appointment-details small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-cash-panel {
  overflow: hidden;
}

.patient-cash-heading-icon {
  color: var(--wine);
  font-size: 0.9em;
}

.patient-cash-title-link {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.patient-cash-title-link:hover,
.patient-cash-title-link:focus-visible {
  color: var(--wine);
}

.patient-cash-list {
  display: grid;
}

.patient-cash-row {
  display: grid;
  grid-template-columns: auto minmax(9rem, 1fr) minmax(11rem, 1fr) auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 1.1rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
  text-decoration: none;
}

.patient-cash-row:last-child {
  border: 0;
}

.patient-cash-row:hover {
  background: var(--surface-soft);
}

.patient-cash-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  color: var(--wine);
  background: #fff3e1;
  border-radius: 0.55rem;
  place-items: center;
}

.patient-cash-details,
.patient-cash-amount {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.patient-cash-details strong,
.patient-cash-amount strong {
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-cash-details small,
.patient-cash-amount small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-cash-amount {
  text-align: end;
}

.patient-cash-row .chevron {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  margin-inline-start: 0;
  font-size: 1.1rem;
  line-height: 1;
  place-items: center;
}

.patient-cash-status-paid {
  color: #17623d;
  background: #e7f4eb;
}

.patient-cash-status-partial {
  color: #8a5b00;
  background: #fff3d8;
}

.patient-cash-status-unpaid {
  color: #8a2c42;
  background: #fff0f3;
}

.timeline-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-entry {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.95rem 1.1rem;
  color: var(--ink);
  border-block-end: 1px solid var(--line);
  text-decoration: none;
}

.timeline-entry:last-child {
  border: 0;
}

.timeline-entry:hover {
  background: var(--surface-soft);
}

.timeline-group > .timeline-entry {
  border-block-end: 0;
}

.timeline-child-list {
  margin: 0 1.1rem 0.9rem;
  padding: 0;
  padding-inline-start: 3.35rem;
  list-style: none;
}

.timeline-child-list .timeline-entry {
  padding: 0.7rem 0.8rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.timeline-child-list li + li .timeline-entry {
  border-block-start: 0;
}

.timeline-child-list li:first-child .timeline-entry {
  border-radius: 0.75rem 0.75rem 0 0;
}

.timeline-child-list li:last-child .timeline-entry {
  border-block-end: 1px solid var(--line);
  border-radius: 0 0 0.75rem 0.75rem;
}

.timeline-child-list li:only-child .timeline-entry {
  border-radius: 0.75rem;
}

.timeline-child-list .timeline-marker {
  width: 2rem;
  height: 2rem;
}

.timeline-marker {
  display: grid;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  margin-block-start: 0.1rem;
  color: var(--blue);
  background: #eaf2f9;
  border-radius: 0.7rem;
  font-size: 0.72rem;
  font-weight: 850;
  place-items: center;
}

.timeline-procedure .timeline-marker {
  color: var(--green);
  background: var(--green-soft);
}

.timeline-laboratory .timeline-marker {
  color: var(--wine);
  background: var(--wine-soft);
}

.timeline-body {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
  flex: 1 1 auto;
}

.timeline-top {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  justify-content: space-between;
}

.timeline-top small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
}

.timeline-detail {
  color: var(--muted);
  font-size: 0.85rem;
}

.timeline-context {
  color: var(--wine);
  font-size: 0.76rem;
  font-weight: 750;
}

.timeline-actor {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Prescription */
.prescription-heading {
  max-width: 70rem;
}

.rx-clinic-chip {
  display: flex;
  flex: 0 0 auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
}

.rx-clinic-chip > span {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  color: white;
  background: var(--wine);
  border-radius: 0.65rem;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 850;
  place-items: center;
}

.rx-clinic-chip > div {
  display: grid;
}

.rx-clinic-chip small {
  color: var(--muted);
  font-size: 0.72rem;
}

.rx-builder {
  width: min(70rem, 100%);
  padding: clamp(1rem, 3vw, 2rem);
}

.rx-patient-card {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem;
  background: linear-gradient(100deg, #fcf6f7, white);
  border: 1px solid #ead7dc;
  border-radius: 0.8rem;
}

.rx-patient-card > div {
  display: grid;
}

.rx-patient-card small {
  color: var(--muted);
}

.rx-patient-card a {
  margin-inline-start: auto;
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}

.rx-reason-grid {
  margin-block-start: 1rem;
}

.rx-medication-finder {
  position: relative;
  z-index: 8;
  padding: 1rem;
  background: #f8f4f1;
  border: 1px dashed #cdbeba;
  border-radius: 0.85rem;
}

.rx-medication-finder > label {
  display: block;
  margin-block-end: 0.45rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.rx-medication-finder > small {
  display: block;
  margin-block-start: 0.45rem;
  color: var(--muted);
  font-size: 0.74rem;
}

.rx-search-box {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: white;
  border: 1px solid #d7ccc8;
  border-radius: 0.7rem;
  box-shadow: 0 4px 15px rgb(48 33 37 / 4%);
}

.rx-search-box:focus-within {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgb(125 38 58 / 10%);
}

.rx-search-box input {
  flex: 1;
  min-width: 0;
  min-height: 2.6rem;
  background: transparent;
  border: 0;
  outline: 0;
}

.rx-search-clear {
  display: grid;
  flex: 0 0 auto;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  color: var(--muted);
  background: var(--surface-soft);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  place-items: center;
}

.rx-search-clear[hidden] {
  display: none;
}

.rx-search-clear:hover,
.rx-search-clear:focus-visible {
  color: var(--wine);
  background: var(--wine-soft);
}

.rx-search-box kbd {
  color: var(--muted);
  font-size: 0.7rem;
}

.rx-search-results {
  position: absolute;
  z-index: 20;
  inset-block-start: calc(100% - 0.7rem);
  inset-inline: 1rem;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  box-shadow: 0 18px 45px rgb(47 31 36 / 16%);
}

.rx-search-result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  background: white;
  border: 0;
  border-block-end: 1px solid var(--line);
  cursor: pointer;
  text-align: start;
}

.rx-search-result:last-child {
  border: 0;
}

.rx-search-result:hover,
.rx-search-result:focus,
.rx-search-result.is-highlighted {
  background: #fcf7f8;
  outline: none;
}

.rx-search-result:disabled,
.rx-search-result.is-already-added {
  color: var(--muted);
  background: #f5f1ef;
  cursor: not-allowed;
  opacity: 0.72;
}

.rx-search-result.is-already-added .rx-result-add {
  color: var(--muted);
}

.rx-search-result > span:nth-child(2) {
  display: grid;
}

.rx-search-result small {
  color: var(--muted);
}

.rx-result-add {
  color: var(--wine);
  font-size: 0.75rem;
  font-weight: 800;
}

.rx-no-results {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.rx-no-results a {
  font-weight: 750;
}

.rx-medication-list-message {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.rx-medication-list-message.is-error {
  color: var(--wine);
}

.rx-medicine-list {
  display: grid;
  gap: 0.85rem;
  margin-block-start: 1rem;
}

.rx-medicine-card.prescription-item {
  display: block;
  padding: 0;
  overflow: hidden;
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 6px 20px rgb(48 33 37 / 5%);
}

.rx-medicine-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  background: linear-gradient(90deg, #fbf1f3, #fff);
  border-block-end: 1px solid #eadde0;
}

[dir="rtl"] .rx-medicine-header {
  background: linear-gradient(-90deg, #fbf1f3, #fff);
}

.rx-medicine-identity {
  display: grid;
}

.rx-medicine-identity small {
  color: var(--muted);
  font-size: 0.75rem;
}

.rx-medication-select {
  padding: 0.8rem 0.9rem 0;
}

.rx-routine-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
}

.rx-extra-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1.6fr);
  gap: 0.75rem;
  padding: 0 0.9rem 0.8rem;
}

.rx-routine-preview {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.65rem 0.9rem;
  color: #4f4548;
  background: #faf8f5;
  border-block-start: 1px solid var(--line);
}

.rx-routine-preview > span {
  color: var(--wine);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 850;
}

.rx-routine-preview p {
  margin: 0;
  font-size: 0.79rem;
}

.rx-finish {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 1.5rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--line);
}

.rx-finish > div:first-child {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.rx-finish > div:first-child > div {
  display: grid;
}

.rx-finish small {
  color: var(--muted);
}

.rx-finish-icon {
  display: grid;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  color: var(--green);
  background: var(--green-soft);
  border-radius: 50%;
  font-weight: 850;
  place-items: center;
}

/* Live prescription canvas */
.rx-compose {
  width: 100%;
}

.rx-compose-toolbar,
.rx-compose-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: min(70rem, 100%);
  margin-inline: auto;
}

.rx-compose-toolbar {
  margin-block-end: 1rem;
  padding: 0.8rem 1rem;
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  box-shadow: 0 8px 30px rgb(53 39 43 / 8%);
}

.rx-compose-toolbar > div:first-child,
.rx-compose-actions > span {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.rx-compose-toolbar > div:first-child > span,
.rx-compose-actions > span {
  display: grid;
}

.rx-compose-toolbar small,
.rx-compose-actions small {
  color: var(--muted);
}

.rx-compose-errors {
  width: min(70rem, 100%);
  margin: 0 auto 1rem;
}

.rx-paper-stage {
  overflow: auto;
  margin-inline: calc(clamp(1.25rem, 3vw, 2.5rem) * -1);
  padding: 1.5rem;
  background:
    radial-gradient(circle at 20% 0%, rgb(125 38 58 / 5%), transparent 24rem),
    #e9e5e2;
  border-block: 1px solid #ddd5d1;
}

.rx-compose-paper.prescription-paper {
  margin: 0 auto;
  box-shadow: 0 16px 55px rgb(45 34 37 / 17%);
}

.rx-editor-safe-area {
  position: relative;
  z-index: 1;
  min-height: 0;
}

@media screen and (min-width: 64.01rem) {
  .rx-compose-paper.prescription-paper > .rx-editor-safe-area {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
}

.rx-compose-meta select,
.rx-compose-diagnosis textarea,
.rx-compose-notes textarea {
  width: 100%;
  color: var(--ink);
  background: rgb(252 249 247 / 75%);
  border: 0;
  border-block-end: 1px dashed #c8b8b4;
  border-radius: 0.25rem;
  outline: none;
}

.rx-compose-meta {
  position: relative;
  z-index: 2;
}

.rx-compose-meta select {
  min-height: 2rem;
  padding: 0.2rem;
  font-weight: 750;
}

.rx-compose-diagnosis label,
.rx-compose-notes label {
  flex: 0 0 auto;
  font-weight: 760;
}

.rx-compose-diagnosis:focus-within,
.rx-compose-notes:focus-within {
  box-shadow: inset 3px 0 var(--saffron);
}

.rx-compose-rx-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  direction: ltr;
}

.rx-paper-add {
  margin-block-end: 0.45rem;
  padding: 0.45rem 0.7rem;
  color: var(--wine);
  background: #fff8f9;
  border: 1px dashed #d6aab5;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.rx-compose-items {
  min-height: 2rem;
}

.rx-compose-item {
  position: relative;
}

.rx-compose-item.is-empty,
.rx-compose-item.removed {
  display: none;
}

.rx-compose-item.has-errors {
  background: #fff7f8;
  outline: 1px solid #e2a7b4;
}

.rx-paper-medication {
  position: relative;
  padding-inline-end: 7rem;
}

.rx-paper-item-actions {
  position: absolute;
  inset-block-start: 0.6rem;
  inset-inline-end: 0.2rem;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.rx-compose-item:hover .rx-paper-item-actions,
.rx-compose-item:focus-within .rx-paper-item-actions {
  opacity: 1;
}

.rx-paper-item-actions button {
  padding: 0.25rem 0.4rem;
  color: var(--wine);
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  cursor: pointer;
  font-size: 0.68rem;
}

.rx-paper-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.5rem 2rem;
  padding: 0.7rem 0.9rem;
  color: var(--muted);
  background: #fcfaf8;
  border: 1px dashed #d8cfca;
  border-radius: 0.55rem;
  text-align: center;
}

.rx-paper-empty[hidden] {
  display: none;
}

.rx-paper-empty p {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 0.92rem;
}

.rx-paper-empty > span {
  color: var(--wine);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 850;
}

.rx-paper-empty .button {
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
}

.rx-compose-notes-option {
  margin-block: 1rem;
  overflow: hidden;
  background: white;
  border: 1px solid #d6aab5;
  border-radius: 0.6rem;
}

.rx-notes-toggle {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 0.8rem;
  color: var(--wine);
  background: #fff8f9;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-weight: 800;
  text-align: start;
}

.rx-notes-toggle:hover {
  background: var(--wine-soft);
}

.rx-optional-panel-label {
  display: grid;
  gap: 0.12rem;
}

.rx-optional-panel-label small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
}

.rx-optional-panel-label small.is-saving {
  color: var(--saffron-dark);
}

.rx-optional-panel-label small.is-saved {
  color: var(--green);
}

.rx-optional-panel-label small.is-error {
  color: var(--danger);
}

.rx-compose-notes[hidden] {
  display: none;
}

.rx-notes-chevron {
  transition: transform 0.15s ease;
}

.rx-notes-toggle[aria-expanded="true"] .rx-notes-chevron {
  transform: rotate(180deg);
}

.rx-notes-toggle[aria-expanded="true"] {
  background: var(--wine-soft);
  border-block-end: 1px solid #e2c9cf;
}

.rx-compose-notes {
  display: grid;
  margin: 0;
}

.rx-compose-notes-option > .rx-compose-notes {
  margin: 0;
  background: white;
  border-radius: 0;
}

.rx-compose-diagnosis textarea,
.rx-compose-notes textarea {
  min-height: 4rem;
  padding: 0.45rem;
  resize: vertical;
}

.rx-compose-signature {
  pointer-events: none;
}

.rx-compose-actions {
  padding-block-start: 1.2rem;
}

.rx-mobile-add {
  display: none;
}

.rx-medication-editor {
  width: min(38rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 3rem);
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  overflow: visible;
}

.rx-medication-editor:not([open]) {
  display: none;
}

.rx-medication-editor::backdrop {
  background: rgb(25 17 20 / 58%);
  backdrop-filter: blur(2px);
}

.rx-medication-editor.is-fallback-modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 1rem;
  background: rgb(25 17 20 / 58%);
  overflow-y: auto;
}

.rx-medication-editor.is-fallback-modal .rx-medication-modal-card {
  width: min(38rem, 100%);
  margin: auto;
}

body.rx-modal-open {
  overflow: hidden;
}

.rx-medication-modal-card {
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  background: #fffdfb;
  border: 1px solid #d9c8c2;
  border-radius: 0.9rem;
  box-shadow: 0 20px 65px rgb(28 19 22 / 28%);
}

.rx-editor-header,
.rx-editor-footer,
.rx-selected-medication {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
}

.rx-editor-header {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--sidebar);
  border-radius: 0.9rem 0.9rem 0 0;
}

.rx-editor-header > div:first-child {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.rx-editor-number {
  display: grid;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  color: white;
  background: var(--wine);
  border-radius: 0.65rem;
  font-size: 1.2rem;
  font-weight: 850;
  place-items: center;
}

.rx-editor-header h2 {
  margin: 0;
  color: white;
  font-size: 1rem;
}

.rx-editor-header p,
.rx-editor-status {
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.rx-editor-header p {
  color: #cdbfc3;
}

.rx-modal-close {
  display: grid;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  color: white;
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 0.55rem;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  place-items: center;
}

.rx-modal-close:hover,
.rx-modal-close:focus-visible {
  background: rgb(255 255 255 / 18%);
}

.rx-editor-search {
  margin: 1rem 1rem 0;
  padding: 0.8rem;
}

.rx-editor-search .rx-search-results {
  position: static;
  max-height: 14rem;
  margin-block-start: 0.65rem;
  border-radius: 0.65rem;
  overflow-y: auto;
}

.rx-selected-medication {
  justify-content: flex-start;
  margin-block-start: 0.8rem;
  padding: 0.65rem 0.8rem;
  background: var(--wine-soft);
  border: 1px solid #e7cbd2;
  border-radius: 0.65rem;
}

.rx-selected-medication[hidden] {
  display: none;
}

.rx-selected-medication > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.rx-selected-medication small {
  color: var(--muted);
}

.text-button {
  margin-inline-start: auto;
  padding: 0.35rem 0.5rem;
  color: var(--wine);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.rx-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem;
}

.rx-editor-more-options {
  margin: 0 1rem;
  border-block-start: 1px solid var(--line);
}

.rx-editor-more-options > summary {
  padding: 0.8rem 0.1rem 0.2rem;
  color: var(--wine);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  list-style-position: inside;
}

.rx-editor-more-options[open] > summary {
  padding-block-end: 0;
}

.rx-editor-more-options .rx-editor-fields {
  margin: 0.8rem 0 1rem;
}

.rx-editor-fields .field-wide {
  grid-column: 1 / -1;
}

.rx-editor-fields input,
.rx-editor-fields select {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.52rem 0.65rem;
  color: var(--ink);
  background: white;
  border: 1px solid #dcd4d0;
  border-radius: 0.55rem;
}

.rx-editor-fields input:focus,
.rx-editor-fields select:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgb(125 38 58 / 10%);
  outline: none;
}

.rx-editor-footer {
  margin: 0;
  padding: 0.9rem 1.1rem 1rem;
  border-block-start: 1px solid var(--line);
}

.rx-editor-footer > span {
  min-width: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.rx-editor-actions {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.rx-row-fields[hidden] {
  display: none;
}

.rx-paper-medication {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding-inline-end: 0;
}

.rx-paper-medication-body {
  min-width: 0;
}

.rx-paper-item-actions {
  position: static;
  align-self: start;
  opacity: 1;
}

.rx-paper-item-actions button {
  min-height: 2rem;
  padding: 0.35rem 0.45rem;
  font-size: 0.72rem;
}

.rx-row-errors {
  display: grid;
  gap: 0.2rem;
  margin: 0.65rem 0 0 2.75rem;
  color: #a0273d;
  font-size: 0.78rem;
}

.live-search-status {
  min-height: 1.2rem;
  margin: 0.4rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.rx-finish .form-actions {
  margin: 0;
  padding: 0;
  border: 0;
}

.rx-detail-clinic {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  padding: 0.8rem 1.4rem;
  color: white;
  background: var(--sidebar);
}

.rx-detail-clinic > span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  color: var(--wine-dark);
  background: #f6dbb0;
  border-radius: 0.6rem;
  font-weight: 850;
  place-items: center;
}

.rx-detail-clinic > div {
  display: grid;
}

.rx-detail-clinic small {
  color: #cdbfc3;
}

.prescription-item {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  gap: 0.75rem;
  padding: 1rem 0;
  border-block-end: 1px solid var(--line);
}

.item-number,
.rx-number {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--wine);
  background: var(--wine-soft);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 850;
  place-items: center;
}

.item-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.item-fields .field:first-of-type,
.item-fields .field:last-of-type {
  grid-column: span 2;
}

.delete-field {
  display: none;
}

.remove-row {
  align-self: start;
  width: 1.8rem;
  height: 1.8rem;
  color: #9b6f79;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
}

.remove-row:hover {
  color: white;
  background: var(--wine);
}

.prescription-item.removed {
  display: none;
}

.add-row {
  margin-block-start: 1rem;
}

.document-card {
  width: min(64rem, 100%);
  margin-inline: 0;
  overflow: hidden;
}

.document-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.4rem;
  background: #fcfaf9;
  border-block-end: 1px solid var(--line);
}

.document-header > div {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

.document-header h2 {
  margin: 0;
}

.document-header h2 a {
  color: var(--ink);
  text-decoration: none;
}

.document-header small,
.document-header p {
  margin: 0;
  color: var(--muted);
}

.diagnosis,
.document-note {
  display: grid;
  gap: 0.25rem;
  margin: 1.2rem;
  padding: 0.8rem 1rem;
  background: var(--surface-soft);
  border-radius: 0.65rem;
}

.diagnosis small,
.document-note small,
.document-footer small {
  color: var(--muted);
}

.prescribed-list {
  padding-inline: 1.4rem;
}

.prescribed-list article {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--line);
}

.prescribed-list h3,
.prescribed-list p {
  margin: 0;
}

.prescribed-list p {
  margin-block-start: 0.2rem;
  color: #4e4346;
}

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

.instruction-note {
  margin-block-start: 0.5rem;
  color: var(--wine);
  font-size: 0.83rem;
  font-weight: 650;
}

.document-note p {
  margin: 0;
}

.document-footer {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  padding: 1.2rem 1.4rem;
  background: #fcfaf9;
  border-block-start: 1px solid var(--line);
}

.document-footer span {
  display: grid;
}

/* Procedure */
.procedure-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.5fr);
  gap: 1.25rem;
  align-items: start;
}

.procedure-layout .document-card {
  width: 100%;
}

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

.appointment-detail-card {
  width: 100%;
}

.appointment-detail-content {
  display: flex;
  align-items: stretch;
}

[dir="rtl"] .appointment-detail-content {
  flex-direction: row-reverse;
}

.appointment-detail-list {
  margin: 0;
  padding: 1.2rem 1.4rem;
  flex: 1;
}

.appointment-detail-actions {
  display: grid;
  flex: 0 0 min(14rem, 30%);
  gap: 0.45rem;
  align-content: start;
  padding: 1rem 1.4rem;
  border-inline-start: 1px solid var(--line);
}

.appointment-detail-actions form {
  display: grid;
}

.appointment-detail-actions .button {
  width: 100%;
}

.appointment-edit-card {
  width: 100%;
  margin: 0;
}

.appointment-edit-card .form-grid {
  grid-template-columns: 1fr;
}

.appointment-readonly-note {
  align-self: start;
}

.appointment-readonly-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

@media (max-width: 48rem) {
  .appointment-detail-content,
  [dir="rtl"] .appointment-detail-content {
    flex-direction: column;
  }

  .appointment-detail-actions {
    flex-basis: auto;
    border-block-start: 1px solid var(--line);
    border-inline-start: 0;
  }
}

.procedure-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 1.2rem;
}

.procedure-sections section {
  padding: 1rem;
  border-block-end: 1px solid var(--line);
}

.procedure-sections h3 {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.procedure-sections p {
  margin: 0;
}

.warning-section {
  color: #7b263a;
  background: #fff7f8;
}

/* Print */
.print-page {
  background: #e7e3e0;
}

.print-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.print-option-hint {
  max-width: 42rem;
  color: var(--muted);
  text-align: center;
}

.prescription-paper {
  position: relative;
  display: block;
  width: 210mm;
  height: 297mm;
  min-height: 297mm;
  margin: 0 auto 2rem;
  padding: 18mm;
  background: white;
  box-shadow: 0 12px 45px rgb(0 0 0 / 15%);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.prescription-paper-stationery {
  --prescription-header-space: 63.5mm;
  --prescription-patient-area-height: 0mm;
  --prescription-footer-space: 32.4mm;
  --prescription-side-margin: 20mm;
  padding: var(--prescription-header-space) var(--prescription-side-margin) var(--prescription-footer-space);
}

.prescription-stationery-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.print-clinic-fallback {
  position: relative;
  z-index: 1;
  padding-block: 0.8rem 0.25rem;
  color: var(--wine);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.prescription-paper-stationery > :not(.prescription-stationery-background):not(.print-signature):not(.rx-compose-meta) {
  position: relative;
  z-index: 1;
}

.prescription-paper-stationery > .print-signature {
  z-index: 1;
  bottom: 35mm;
}

.rx-editor-document {
  display: grid;
  gap: 1.5rem;
}

.rx-editor-page.prescription-paper {
  margin-block: 0;
}

.rx-editor-continuation-page .print-continuation {
  margin-block-start: 0;
}

body:not(.workspace) > main.prescription-paper {
  display: block;
  width: 210mm;
  height: 297mm;
  min-height: 297mm;
  margin: 0 auto 2rem;
  padding: 18mm;
  background: white;
  place-items: initial;
}

body:not(.workspace) > main.prescription-paper-stationery {
  padding: var(--prescription-header-space) var(--prescription-side-margin) var(--prescription-footer-space);
}

.prescription-paper-stationery > .print-meta,
.prescription-paper-stationery > .rx-editor-safe-area > .print-meta {
  min-height: var(--prescription-patient-area-height);
  box-sizing: border-box;
}

.print-clinic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 1rem;
  border-block-end: 3px solid var(--wine);
}

.print-clinic-header > div:first-child {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.print-clinic-header h1 {
  margin: 0;
  font-size: 1.6rem;
}

.print-clinic-header address {
  margin: 0;
  font-style: normal;
}

.print-clinic-header p {
  margin: 0;
  color: var(--muted);
}

.print-clinic-header .print-custom-header {
  max-width: 33rem;
  color: var(--ink);
  font-weight: 650;
}

.prescription-branding {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 45mm;
  margin: -18mm -18mm 0;
  padding: 8mm 18mm 12mm;
  color: white;
  background: var(--prescription-primary, var(--wine));
  border-block-end: 0;
}

.prescription-branding-red-wave {
  background: var(--prescription-primary, #a90f17);
}

.prescription-branding-red-wave::before,
.prescription-branding-red-wave::after {
  position: absolute;
  inset-inline: -5%;
  pointer-events: none;
  content: "";
}

.prescription-branding-red-wave::before {
  bottom: -1.55rem;
  z-index: 0;
  height: 3.4rem;
  background: var(--prescription-accent, #d9c8c2);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-2deg);
}

.prescription-branding-red-wave::after {
  bottom: -1.35rem;
  z-index: 0;
  height: 3.15rem;
  background: white;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: rotate(-2deg);
}

.prescription-branding .prescription-design-header-art,
.prescription-design-reference .prescription-design-footer-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prescription-design-header-content {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.prescription-branding .print-brand {
  color: var(--prescription-primary, var(--wine));
  background: white;
}

.prescription-branding h1,
.prescription-branding p,
.prescription-branding address,
.prescription-branding .print-custom-header,
.prescription-branding .clinic-contact {
  color: white;
}

.prescription-branding h1 {
  font-size: 1.35rem;
}

.prescription-branding .clinic-contact {
  position: relative;
  z-index: 2;
}

.prescription-design-logo {
  display: block;
  flex: 0 0 auto;
  width: 16mm;
  height: 16mm;
  object-fit: contain;
  background: rgb(255 255 255 / 90%);
  border-radius: 0.4rem;
}

.prescription-design-watermark {
  position: absolute;
  z-index: 0;
  inset: 30% 25% auto;
  width: 50%;
  max-height: 42%;
  object-fit: contain;
  opacity: 0.3;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.print-brand {
  display: grid;
  width: 3rem;
  height: 3rem;
  color: white;
  background: var(--wine);
  border-radius: 0.8rem;
  place-items: center;
}

.clinic-contact {
  display: grid;
  gap: 0.1rem;
  text-align: end;
}

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

.print-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  padding-block: 0.9rem;
  font-size: 0.82rem;
  border-block-end: 1px solid var(--line);
}

.print-meta > div {
  display: grid;
  min-width: 0;
  text-align: start;
}

.print-meta-rtl > div {
  direction: rtl;
  text-align: right;
}

.print-meta small {
  color: var(--muted);
  font-size: 0.72rem;
}

.print-meta strong {
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.rx-compose-meta {
  display: block;
}

.rx-compose-patient-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 0.9rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px dashed var(--line);
}

.rx-compose-patient-details > div {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.rx-compose-patient-details strong {
  overflow-wrap: anywhere;
}

.print-diagnosis,
.print-notes {
  margin-block: 1rem;
  padding: 0.65rem 0.8rem;
  background: var(--surface-soft);
  border-radius: 0.4rem;
}

.print-continuation {
  margin-block-start: 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.print-rx {
  margin-block-start: 1rem;
  color: var(--wine);
  font-family: Georgia, serif;
  font-size: 2.7rem;
  font-style: italic;
  font-weight: bold;
  direction: ltr;
  text-align: left;
}

.print-items {
  display: grid;
  gap: 0;
  margin: 0;
  padding-inline-start: 2rem;
}

.print-items li {
  padding: 0.85rem 0.4rem;
  border-block-end: 1px solid var(--line);
}

.print-medication {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  justify-content: space-between;
  direction: ltr;
  text-align: left;
}

.print-medication strong {
  font-size: 0.95rem;
}

.print-medication span,
.print-directions,
.print-items small {
  color: var(--muted);
}

.print-items p {
  margin: 0.3rem 0 0;
}

.print-page-number {
  margin-block-start: 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.print-signature {
  position: absolute;
  inset-inline: 18mm;
  bottom: 24mm;
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.print-signature > div:first-child {
  display: grid;
}

.print-signature span,
.print-signature small {
  color: var(--muted);
}

.signature-line {
  width: 13rem;
  padding-block-start: 0.5rem;
  color: var(--muted);
  border-block-start: 1px solid #777;
  text-align: center;
}

.print-reference {
  position: absolute;
  inset-inline: 18mm;
  bottom: 10mm;
  color: #9a9093;
  font-size: 0.72rem;
  text-align: center;
}

.print-reference strong {
  color: #6e6265;
  font-weight: 700;
}

.prescription-design-reference {
  inset-inline: 0;
  bottom: 0;
  min-height: 13mm;
  padding: 1.5mm 18mm;
  overflow: hidden;
  color: white;
  background: var(--prescription-primary, var(--wine));
}

.prescription-design-reference .prescription-design-footer-art {
  opacity: 0.95;
  object-fit: fill;
}

.prescription-design-footer-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  align-items: center;
  justify-content: center;
  color: white;
}

.prescription-design-footer-content span {
  display: inline-block;
}

.prescription-design-reference strong {
  color: white;
}

.prescription-design-reference .prescription-design-footer-art
  ~ .prescription-design-footer-content,
.prescription-design-reference .prescription-design-footer-art
  ~ .prescription-design-footer-content strong {
  color: var(--prescription-primary, var(--wine));
}

.sidebar-backdrop {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 70rem) {
  .patient-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .patient-context-main {
    align-items: stretch;
    flex-direction: column;
  }

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

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

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

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

  .item-fields .field:first-of-type,
  .item-fields .field:last-of-type {
    grid-column: 1 / -1;
  }
}

@media (max-width: 38rem) {
  .two-column {
    grid-template-columns: 1fr;
  }

  .inline-form {
    align-items: stretch;
    flex-direction: column;
  }

  .inline-form label {
    min-width: 0;
  }

  .cash-report-date-field {
    min-width: 0;
  }

  .cash-payment-summary {
    grid-template-columns: 1fr;
  }

  .cash-payment-summary .cash-payment-balance {
    padding-block-start: 0.75rem;
    padding-inline-start: 0;
    border-block-start: 2px solid var(--saffron);
    border-inline-start: 0;
  }

  .inline-form .button {
    width: 100%;
  }

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

  .receipt-payment-summary {
    justify-items: start;
    text-align: start;
  }

  .cash-charge-receipts .simple-list > a {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .cash-charge-receipts .patient-cash-amount {
    grid-column: 2 / -1;
    margin-inline-start: 0;
    text-align: start;
  }

  .cash-charge-receipts .chevron {
    grid-column: 3;
    grid-row: 1;
  }

  .panel-heading-actions {
    justify-content: flex-start;
  }

  .timeline-child-list {
    margin-inline: 0.7rem;
    padding-inline-start: 1.35rem;
  }

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

  .patient-appointment-details {
    grid-column: 1 / -1;
  }

  .patient-cash-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "icon details status chevron"
      "icon amount amount chevron";
    column-gap: 0.65rem;
    row-gap: 0.45rem;
  }

  .patient-cash-icon {
    grid-area: icon;
    align-self: start;
  }

  .patient-cash-details {
    grid-area: details;
  }

  .patient-cash-amount {
    grid-area: amount;
    text-align: end;
  }

  .patient-cash-status {
    grid-area: status;
    justify-self: end;
    white-space: nowrap;
  }

  .patient-cash-row .chevron {
    grid-area: chevron;
    margin-inline-start: 0;
  }

  .patient-document-upload {
    gap: 0.65rem;
  }

  .patient-document-upload-file {
    flex: 0 1 auto;
    gap: 0.25rem;
  }
}

@media (max-width: 605px) {
  .patient-cash-amount {
    text-align: end;
  }
}

@media (max-width: 583px) {
  .patient-cash-add-button {
    display: none;
  }

  .patient-cash-status {
    align-self: start;
  }
}

@media (max-width: 58rem) {
  .sidebar {
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

  [dir="rtl"] .sidebar {
    transform: translateX(105%);
  }

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

  .sidebar-close,
  .menu-button {
    display: grid;
  }

  .sidebar-backdrop {
    position: fixed;
    z-index: 25;
    inset: 0;
    background: rgb(18 12 14 / 45%);
  }

  body.sidebar-is-open .sidebar-backdrop {
    display: block;
  }

  .workspace-main {
    width: 100%;
    margin: 0;
  }

  .dashboard-cash-metrics {
    grid-template-columns: 1fr;
  }

  .dashboard-cash-metrics > a,
  .dashboard-cash-metrics > a:last-child {
    border-inline-end: 0;
    border-block-end: 1px solid var(--line);
  }

  .dashboard-cash-metrics > a:last-child {
    border-block-end: 0;
  }

  .patient-layout,
  .procedure-layout,
  .document-center-layout,
  .document-detail-layout,
  .cash-payment-layout,
  .registration-layout,
  .auth-card,
  .two-column-form {
    grid-template-columns: 1fr;
  }

  .registration-copy {
    position: static;
    padding: 0;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }

  .duplicate-check {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 64rem) {
  .rx-paper-stage {
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
  }

  .rx-editor-document {
    display: block;
  }

  .rx-compose-paper.prescription-paper {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    box-shadow: none;
  }

  .rx-compose-paper .prescription-stationery-background {
    display: none;
  }
}

@media (max-width: 42rem) {
  .site-header {
    width: calc(100% - 1.25rem);
    gap: 0.55rem;
    padding-block: 0.8rem;
  }

  .site-header .brand {
    min-width: 0;
    gap: 0.5rem;
    font-size: 0.95rem;
  }

  .site-header .header-actions {
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-inline-start: auto;
  }

  .site-header .text-link {
    min-height: 2.65rem;
    padding: 0.55rem 0.7rem;
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0.7rem;
  }

  .site-header .public-profile-link {
    display: none;
  }

  .workspace-header {
    gap: 0.5rem;
  }

  .global-search kbd,
  .workspace-today,
  .user-name {
    display: none;
  }

  .language-control {
    flex-basis: 5.7rem;
    padding-inline: 0.25rem;
  }

  .language-glyph {
    display: none;
  }

  .workspace-actions .language-form select {
    max-width: none;
  }

  .content {
    padding: 1rem;
  }

  .patient-picker-input input[type="search"] {
    min-height: 3rem;
    border: 2px solid rgb(125 38 58 / 55%);
    box-shadow: 0 3px 12px rgb(48 33 37 / 7%);
  }

  .patient-picker-input input[type="search"]:focus {
    border-color: var(--wine);
    box-shadow: 0 0 0 4px var(--wine-soft);
  }

  .patient-picker-icon {
    color: var(--wine);
  }

  .patient-picker-results {
    border: 2px solid rgb(125 38 58 / 45%);
  }

  .selected-patient-card {
    min-height: 4.5rem;
    padding: 0.75rem;
    background: white;
    border: 2px solid rgb(125 38 58 / 55%);
    box-shadow: 0 0 0 3px var(--wine-soft);
  }

  .selected-patient-card-content strong {
    font-size: 0.95rem;
  }

  .patient-picker-change {
    min-height: 2.5rem;
    color: var(--wine);
    background: var(--wine-soft);
    border-color: rgb(125 38 58 / 35%);
  }

  .patient-picker-status {
    color: var(--ink);
  }

  .rx-compose-toolbar,
  .rx-compose-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .rx-compose {
    padding-block-end: 9rem;
  }

  .rx-compose-toolbar {
    gap: 0;
    margin-block-end: 0.75rem;
    padding: 0.7rem 0.8rem;
    box-shadow: none;
  }

  .rx-compose-toolbar > div:first-child {
    justify-content: space-between;
    width: 100%;
  }

  .rx-compose-toolbar > div:first-child > span {
    display: block;
  }

  .rx-compose-toolbar small,
  .rx-compose-toolbar > .form-actions {
    display: none;
  }

  .rx-compose-actions {
    position: fixed;
    z-index: 14;
    inset-block-end: 0;
    inset-inline: 0;
    width: 100%;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgb(255 255 255 / 96%);
    border-block-start: 1px solid var(--line);
    box-shadow: 0 -8px 28px rgb(45 34 37 / 12%);
    backdrop-filter: blur(12px);
  }

  .rx-compose-actions > span {
    display: none;
  }

  .rx-compose-actions .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .rx-compose-actions .form-actions.rx-saved-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rx-compose-actions .button {
    min-width: 0;
    width: 100%;
    padding-inline: 0.55rem;
    font-size: 0.8rem;
    text-align: center;
    white-space: normal;
  }

  .rx-compose-actions .rx-mobile-add {
    display: inline-flex;
  }

  .rx-compose-actions .rx-footer-cancel {
    display: inline-flex;
  }

  .rx-compose-actions .form-actions:not(.rx-saved-actions) .rx-footer-save {
    grid-column: 1 / -1;
  }

  .rx-compose-paper .print-clinic-fallback {
    padding-block: 0.2rem 0.7rem;
    font-size: 0.9rem;
  }

  .rx-compose-paper .print-clinic-header {
    align-items: start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .rx-compose-paper .prescription-branding {
    min-height: 9rem;
    margin: -1rem -1rem 0;
    padding: 1rem;
  }

  .rx-compose-paper .clinic-contact {
    text-align: start;
  }

  .rx-compose-paper .print-signature,
  .rx-compose-paper .print-reference {
    position: static;
    margin-block-start: 3rem;
  }

  .rx-paper-medication {
    padding-inline-end: 0;
  }

  .rx-paper-item-actions {
    position: static;
    margin-block-start: 0.5rem;
    opacity: 1;
  }

  .rx-compose-rx-heading {
    align-items: center;
  }

  .rx-compose-rx-heading .print-rx {
    margin-block-start: 0.5rem;
    font-size: 2.25rem;
  }

  .rx-paper-add {
    display: none;
  }

  .rx-paper-empty {
    margin-block: 0.35rem;
    padding: 0.4rem 0.55rem;
  }

  .rx-paper-empty .button {
    display: none;
  }

  .rx-compose-notes-option {
    margin-block: 0.75rem 0;
  }

  .page-heading,
  .patient-banner {
    align-items: stretch;
    flex-direction: column;
  }

.profile-card {
  max-width: 56rem;
}

.profile-card .field:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 48rem) {
  .profile-card .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.patient-context-header {
    margin-block-end: 1rem;
    padding: 0.85rem;
  }

  .patient-context-identity {
    align-items: flex-start;
  }

  .patient-context-avatar {
    width: 2.75rem;
    height: 2.75rem;
  }

  .patient-context-actions {
    margin-inline: -0.85rem;
    padding-inline: 0.85rem;
  }

  .rx-finish {
    align-items: stretch;
    flex-direction: column;
  }

  .rx-finish .form-actions {
    justify-content: stretch;
  }

  .rx-finish .button {
    flex: 1;
  }

  .page-heading > .button {
    flex: 1;
  }

  .stat-grid,
  .form-grid,
  .procedure-sections,
  .clinic-switch-grid,
  .settings-hub-grid {
    grid-template-columns: 1fr;
  }

  .form-grid .field {
    grid-column: 1;
  }

  .stat-card {
    padding: 0.8rem;
  }

  .finder-form {
    flex-wrap: wrap;
  }

  .finder-form input {
    width: calc(100% - 3rem);
  }

  .finder-form .button {
    width: 100%;
  }

  .item-fields {
    grid-template-columns: 1fr;
  }

  .rx-routine-grid,
  .rx-extra-grid,
  .rx-editor-fields {
    grid-template-columns: 1fr;
  }

  .rx-editor-footer {
    position: sticky;
    z-index: 3;
    inset-block-end: 0;
    align-items: stretch;
    flex-direction: column;
    margin-block-start: auto;
    padding-block-end: calc(0.9rem + env(safe-area-inset-bottom));
    background: #fffdfb;
  }

  .rx-editor-footer > span {
    display: none;
  }

  .rx-editor-footer .button {
    width: 100%;
  }

  .rx-editor-actions {
    width: 100%;
  }

  .rx-editor-actions .button {
    flex: 1;
  }

  .rx-search-box kbd,
  .rx-clinic-chip {
    display: none;
  }

  .item-fields .field {
    grid-column: 1 !important;
  }

  .prescription-item {
    grid-template-columns: 1.7rem 1fr 1.7rem;
    gap: 0.4rem;
  }

  .rx-paper-medication {
    grid-template-columns: 1.7rem minmax(0, 1fr);
  }

  .rx-paper-item-actions {
    grid-column: 2;
  }

  .rx-row-errors {
    margin-inline-start: 2.1rem;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  .document-footer,
  .print-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .rx-compose-meta {
    display: block;
  }

  .rx-compose-patient-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  .rx-compose-patient-details > div:last-child {
    grid-column: 1 / -1;
    padding-block-start: 0.55rem;
    border-block-start: 1px dashed var(--line);
  }

  .rx-medication-editor {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
  }

  .rx-medication-modal-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .rx-editor-header {
    position: sticky;
    z-index: 3;
    inset-block-start: 0;
    padding: 0.8rem;
    border-radius: 0;
  }

  .rx-editor-header p {
    display: none;
  }

  .rx-editor-search {
    margin: 0.75rem 0.75rem 0;
    padding: 0.75rem;
  }

  .rx-editor-search .rx-search-results {
    max-height: min(19rem, 42dvh);
  }

  .rx-selected-medication,
  .rx-editor-more-options {
    margin-inline: 0.75rem;
  }

  .hero h1 {
    font-size: clamp(3rem, 15vw, 4.5rem);
  }
}

@media (max-width: 30rem) {
  .site-header .brand > span:last-child {
    display: none;
  }
}

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    min-height: 297mm;
    margin: 0;
    background: white;
  }

  .print-toolbar {
    display: none;
  }

  .receipt-page .sidebar,
  .receipt-page .workspace-header,
  .receipt-page .receipt-page-heading,
  .receipt-page .sidebar-backdrop {
    display: none;
  }

  .cash-report-page .sidebar,
  .cash-report-page .workspace-header,
  .cash-report-page .sidebar-backdrop,
  .cash-report-page .cash-report-heading,
  .cash-report-page .cash-report-filter {
    display: none;
  }

  .cash-report-page .workspace-main,
  .cash-report-page .content {
    width: 100%;
    min-height: 0;
    margin: 0;
  }

  .cash-report-page .content {
    padding: 10mm;
  }

  .cash-report-page .cash-report-print-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-block-end: 6mm;
    padding-block-end: 3mm;
    border-block-end: 1px solid #222;
  }

  .cash-report-page .cash-report-totals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cash-report-page .panel,
  .cash-report-page .stat-card {
    box-shadow: none;
  }

  .cash-report-page .table-scroll {
    overflow: visible;
  }

  .cash-report-page table {
    font-size: 8pt;
  }

  .cash-report-page th,
  .cash-report-page td {
    padding: 2.5mm;
  }

  .cash-report-page a {
    color: inherit;
    text-decoration: none;
  }

  .receipt-page .workspace-main {
    width: 100%;
    margin: 0;
  }

  .receipt-page .content {
    width: 100%;
    min-height: 0;
    padding: 12mm;
  }

  .receipt-page .receipt-card {
    width: 100%;
    margin: 0;
    border: 1px solid #222;
    border-radius: 0;
    box-shadow: none;
  }

  .receipt-page .receipt-layout {
    display: block;
    width: 100%;
  }

  .print-page {
    background: white;
  }

  body.print-page {
    min-height: 0;
    padding: 0;
  }

  body.print-page > main.prescription-paper {
    display: block;
    width: 210mm;
    height: 297mm;
    min-height: 0;
    max-height: 297mm;
    margin: 0;
    overflow: hidden;
    box-shadow: none;
    break-inside: avoid-page;
    page-break-inside: avoid;
  }

  body.print-page > main.prescription-paper-stationery {
    padding:
      var(--prescription-header-space) var(--prescription-side-margin)
      var(--prescription-footer-space);
  }

  body.print-page > main.prescription-print-page:not(:last-of-type) {
    page-break-after: always;
    break-after: page;
  }

  .rx-editor-continuation-page {
    page-break-before: always;
    break-before: page;
  }

  .rx-compose-toolbar,
  .rx-medication-editor,
  .rx-compose-actions {
    display: none;
  }

  .rx-compose-meta {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 1rem;
  }

  .rx-compose-meta > .rx-compose-patient,
  .rx-compose-patient-details {
    display: contents;
  }

  .rx-compose-patient-details {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .rx-compose-meta .rx-patient-name,
  .rx-compose-meta .rx-compose-patient-details > div {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Laboratory */
.laboratory-finder .finder-form select {
  min-width: 10rem;
  min-height: 2.7rem;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
}

.laboratory-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.75fr);
  gap: 1.25rem;
  align-items: start;
}

.laboratory-order-card {
  width: 100%;
}

.laboratory-avatar {
  color: var(--wine);
  background: var(--wine-soft);
}

.laboratory-order-actions {
  align-items: center;
}

.laboratory-order-actions form {
  margin: 0;
}

.laboratory-order-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 1rem 1.4rem;
  background: var(--surface-soft);
  border-block-end: 1px solid var(--line);
}

.laboratory-order-meta > div,
.laboratory-result > div {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.laboratory-order-meta span,
.laboratory-result span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.laboratory-order-meta strong,
.laboratory-result strong {
  overflow-wrap: anywhere;
  font-size: 0.84rem;
}

.laboratory-order-meta a {
  color: var(--wine);
}

.laboratory-items {
  padding: 1.25rem 1.4rem;
}

.laboratory-items-heading {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 0.8rem;
}

.laboratory-items-heading h2 {
  margin: 0;
  font-size: 1rem;
}

.laboratory-items-heading > span {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--wine);
  background: var(--wine-soft);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 800;
  place-items: center;
}

.laboratory-item {
  padding: 1rem 0;
  border-block-start: 1px solid var(--line);
}

.laboratory-item-heading {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.laboratory-item-heading h3 {
  display: inline;
  margin: 0;
  font-size: 0.98rem;
}

.laboratory-item-heading .record-number {
  margin-inline-start: 0.5rem;
}

.lab-item-status {
  flex: 0 0 auto;
  color: #31536f;
  background: #eef3f8;
}

.lab-status-ordered {
  color: #31536f;
  background: #eef3f8;
}

.lab-status-sample_collected {
  color: #765400;
  background: #fff3d8;
}

.lab-status-result_entered,
.lab-status-result_received,
.lab-status-reviewed {
  color: #236048;
  background: var(--green-soft);
}

.lab-status-cancelled {
  color: #85243a;
  background: #fff0f3;
}

.laboratory-item-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0.85rem 0 0;
}

.laboratory-item-meta > div {
  min-width: 0;
}

.laboratory-item-meta dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.laboratory-item-meta dd {
  margin: 0.15rem 0 0;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  font-weight: 650;
}

.laboratory-result {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.8fr));
  gap: 0.8rem;
  margin-block-start: 1rem;
  padding: 0.9rem;
  background: #f4faf5;
  border: 1px solid #cfe7d6;
  border-radius: 0.65rem;
}

.laboratory-result-notes {
  grid-column: 1 / -1;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid #cfe7d6;
}

.laboratory-result-notes p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
}

.laboratory-order-sidebar {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.laboratory-result-form-panel,
.laboratory-status-panel {
  overflow: hidden;
}

.laboratory-result-form {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem 1.25rem;
}

.laboratory-result-fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
  margin: 0;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
}

.laboratory-result-fieldset legend {
  padding-inline: 0.35rem;
  color: var(--wine);
  font-size: 0.82rem;
  font-weight: 800;
}

.laboratory-result-fieldset .field-wide {
  grid-column: 1 / -1;
}

.laboratory-result-form > .button {
  justify-self: start;
}

.laboratory-workflow {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  padding: 1rem 1.25rem;
  list-style: none;
}

.laboratory-workflow li {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.5rem 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.laboratory-workflow li > span {
  display: grid;
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
  place-items: center;
}

.laboratory-workflow li.is-done {
  color: var(--ink);
  font-weight: 750;
}

.laboratory-workflow li.is-done > span {
  color: white;
  background: var(--green);
  border-color: var(--green);
}

.laboratory-review-note {
  margin: 0;
  padding: 0.85rem 1.25rem 1rem;
  color: var(--muted);
  border-block-start: 1px solid var(--line);
  font-size: 0.76rem;
}

.lab-test-selection {
  min-width: 0;
}

.lab-test-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.lab-test-option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  min-width: 0;
  padding: 0.85rem;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  cursor: pointer;
}

.lab-test-option:hover,
.lab-test-option:has(input:focus-visible) {
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgb(125 38 58 / 10%);
}

.lab-test-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-block-start: 0.1rem;
  accent-color: var(--wine);
}

.lab-test-option strong {
  overflow-wrap: anywhere;
  font-size: 0.84rem;
  line-height: 1.4;
}

@media (max-width: 70rem) {
  .laboratory-order-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 38rem) {
  .laboratory-finder .finder-form select,
  .laboratory-finder .finder-form .button {
    width: 100%;
  }

  .laboratory-order-meta,
  .laboratory-item-meta,
  .laboratory-result,
  .lab-test-options {
    grid-template-columns: 1fr;
  }

  .laboratory-result-notes,
  .laboratory-result-fieldset .field-wide {
    grid-column: auto;
  }

  .laboratory-item-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .laboratory-order-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .laboratory-order-actions form,
  .laboratory-order-actions form .button {
    width: 100%;
  }
}

/* Document center */
.file-select-button {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.5rem 0.8rem;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
}

.file-select-button:hover {
  border-color: var(--muted);
}

.file-select-button input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.file-select-button i {
  color: var(--blue);
}

.file-select-name {
  color: var(--muted);
  font-size: 0.82rem;
  direction: ltr;
}

.document-rename-form {
  display: grid;
  gap: 0.4rem;
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}

.document-rename-details {
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--line);
}

.document-rename-details summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.document-rename-details summary::-webkit-details-marker {
  display: none;
}

.document-rename-details[open] summary {
  margin-block-end: 0.1rem;
}

.document-rename-details .document-rename-form {
  margin-block-start: 0.7rem;
  padding-block-start: 0;
  border-block-start: 0;
}

.document-rename-form label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.document-rename-form input {
  min-height: 2.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.45rem;
}

.clinical-attachments {
  border-top: 1px solid var(--line);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}

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

.xray-gallery-item {
  align-items: center;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.75rem;
  text-align: center;
  text-decoration: none;
}

.xray-gallery-item img {
  background: #101418;
  border-radius: 0.55rem;
  height: 210px;
  object-fit: contain;
  width: 100%;
}

.xray-gallery-item small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.clinical-file-caution {
  align-items: flex-start;
  background: #fff8e6;
  border: 1px solid #efd38b;
  border-radius: 0.7rem;
  color: #6c5011;
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.8rem;
}

.clinical-request-paper {
  min-height: 297mm;
  padding: 28mm 24mm 24mm;
}

.clinical-request-title {
  align-items: center;
  border-bottom: 2px solid #202a30;
  display: flex;
  font-size: 1.4rem;
  justify-content: space-between;
  margin-bottom: 1.1rem;
  padding-bottom: 0.65rem;
}

.clinical-request-list {
  margin-top: 1.5rem;
}

.clinical-request-list h2 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.clinical-request-list ol {
  display: grid;
  gap: 0.55rem;
  padding-inline-start: 1.5rem;
}

.clinical-request-list li {
  border-bottom: 1px solid #d8dee1;
  padding: 0.55rem 0;
}

.clinical-request-list li small {
  display: block;
  margin-top: 0.2rem;
}

.clinical-request-details {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.clinical-request-details div {
  border-bottom: 1px solid #d8dee1;
  padding-bottom: 0.55rem;
}

.clinical-request-details dt {
  color: #64727a;
  font-size: 0.78rem;
}

.clinical-request-details dd {
  font-weight: 700;
  margin: 0.2rem 0 0;
}

@media (max-width: 760px) {
  .xray-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .clinical-request-paper {
    margin: 0;
  }
}