.ts-dropdown {
  max-height: 1000px;
  /* adjust to taste */
}

.ts-dropdown-content {
  max-height: 1000px;
}

.ts-dropdown-content {
  overflow-y: auto;
  scrollbar-width: thin;
}

.ts-wrapper {
  width: 100%;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  border: 1px solid #bbf7d0;
  /* green-200 */
  border-radius: 0.375rem;
  /* rounded-md */
  padding: 0.5rem;
  min-height: 2.5rem;
  box-shadow: none;
  background: #fff;
}

.ts-wrapper.single .ts-control:focus-within,
.ts-wrapper.multi .ts-control:focus-within {
  border-color: #16a34a;
  /* green-600 */
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.ts-wrapper.single,
.ts-wrapper.multi {
  border: none;
  box-shadow: none;
}

#main-loading.htmx-indicator {
  pointer-events: none;
}

#main-loading.htmx-indicator.htmx-request {
  pointer-events: auto;
}

a.cursor-pointer,
a[href],
[hx-get].cursor-pointer {
  color: #15803d !important; /* green-700 */
}

a.cursor-pointer:hover,
a[href]:hover,
[hx-get].cursor-pointer:hover {
  text-decoration: underline;
}

.btn-orange {
  background-color: #f97316;
  color: #fff;
}
.btn-orange:hover {
  background-color: #ea580c;
}


.force-scrollbar { overflow-y: auto !important; }
.force-scrollbar::-webkit-scrollbar { -webkit-appearance: none; width: 8px; }
.force-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.3); border-radius: 4px; }
.force-scrollbar::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 4px; }

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

/* Mail preview modal: 800px on desktop, capped to the viewport on small screens.
   A definite width is required because the shared modal wrapper uses
   width:max-content, against which w-full/min-width collapse to content size. */
.mail-modal { width: min(800px, 90vw); }

/* Mobile (phone) chrome: when the server detects a phone (User-Agent) it adds the
   `mobile` body class and starts in the mobile flow (/m/...), which renders its own
   compact top bar inside #main-div. Hide the desktop nav + task-pane sidebar there. */
body.mobile #app-header { display: none; }
body.mobile #task-pane { display: none !important; }
/* #main-div is a flex-1 item; flexbox default min-width:auto stops it shrinking below its
   content's intrinsic width, so on phones narrower than that width the mobile screens spilled
   off the right edge (status badges, "+ Scan" button, etc. clipped). Let it shrink to the
   viewport; the mobile screens already use truncate/min-w-0 for their inner content. */
body.mobile #main-div { min-width: 0; }

/* Dossier highlight: after creating/changing an appointment (or sending its mail) the
   client dossier scrolls the row into view and briefly flashes it. Applied to the row
   element and (for table rows) its cells, since <tr> background can be painted over by
   <td> backgrounds. Fades yellow-300 → transparent over 2s. */
@keyframes mr-flash-fade { from { background-color: #fcd34d; } to { background-color: transparent; } }
.mr-flash, .mr-flash > td { animation: mr-flash-fade 2s ease-out; }

/* Rendered Markdown (release notes). Tailwind v2 preflight strips list markers and
   heading sizes; restore them here since the Typography plugin isn't loaded. */
.markdown-body h1 { font-size: 1.25rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #111827; }
.markdown-body h2 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .5rem; color: #111827; }
.markdown-body h3 { font-size: .95rem; font-weight: 600; margin: 1rem 0 .4rem; color: #111827; }
.markdown-body p { margin: .5rem 0; line-height: 1.5; }
.markdown-body ul { list-style: disc; margin: .5rem 0; padding-left: 1.5rem; }
.markdown-body ol { list-style: decimal; margin: .5rem 0; padding-left: 1.5rem; }
.markdown-body ul ul { list-style: circle; }
.markdown-body li { margin: .25rem 0; line-height: 1.5; }
.markdown-body a { color: #059669; text-decoration: underline; }
.markdown-body strong { font-weight: 600; }
.markdown-body code { background: #f3f4f6; padding: .1rem .3rem; border-radius: .25rem; font-size: .85em; }

/* Selected row in a master-detail inbox: stays highlighted (with a left accent) while its
   detail shows in the lower pane. The :hover variant + !important beat Tailwind's hover:bg-*. */
.inbox-selected, .inbox-selected:hover {
  background-color: #ecfdf5 !important; /* green-50 */
  box-shadow: inset 3px 0 0 #16a34a;    /* green-600 accent */
}