/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Variables ─────────────────────────────────────────────── */
:root {
  --blue-dark:   #003899;
  --blue-mid:    #0055cc;
  --blue-accent: #1a7fe0;
  --blue-bright: #3399ff;
  --blue-light:  #e6f0ff;
  --blue-grad:   linear-gradient(135deg, #1a7fe0 0%, #003899 100%);
  --green:       #1a7a4a;
  --green-light: #e8f5ee;
  --red:         #c0392b;
  --red-light:   #fdf0ee;
  --purple:      #6d4aad;
  --purple-light:#f1ecfa;
  --yellow-light:#fffbea;
  --amber:       #f0b429;
  --amber-dark:  #d69a1a;
  --amber-light: #fff3d6;
  --amber-text:  #4d3800;
  --grey-50:     #f5f7fb;
  --grey-100:    #edf0f7;
  --grey-200:    #d8dce8;
  --grey-500:    #8a92a3;
  --grey-700:    #4a5468;
  --grey-900:    #1a1f2e;
  --radius:      6px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,56,153,.12);
}

/* ─── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Author rules for elements like `form` can otherwise override the browser's
   default [hidden] { display: none } — pin it so `hidden` always wins. */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey-900);
  background: var(--grey-50);
}

a { color: var(--blue-mid); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Base element styles the app has always rendered with. They used to reach it by accident from
   marketing.css (stylesheet_link_tag :app bundles every stylesheet); now that marketing.css is
   scoped to the home page they live here, with identical values, so app screens don't change. */
html { scroll-behavior: smooth; }

h1, h2, h3 {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0d1b3e;
  line-height: 1.22;
  font-weight: 700;
}

h2 { font-size: 30px; margin-bottom: 16px; letter-spacing: -.5px; }

p { margin-bottom: 12px; }

/* ─── Header ─────────────────────────────────────────────────── */
.app-header {
  background: var(--blue-grad);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}

.app-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .3px;
  text-decoration: none;
}

.app-header__logo svg { opacity: .9; }

.app-header__nav a {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
  text-decoration: none;
}

.app-header__nav a:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* ─── Main layout ────────────────────────────────────────────── */
.app-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 24px 64px;
}

/* ─── Page header ────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-mid);
  letter-spacing: -.3px;
}

/* ─── Buttons ────────────────────────────────────────────────── */
.button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blue-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, box-shadow .15s;
  box-shadow: var(--shadow-sm);
}

.button:hover,
input[type="submit"]:hover {
  background: var(--blue-mid);
  text-decoration: none;
  color: #fff;
}

.button:disabled,
input[type="submit"]:disabled {
  background: var(--grey-200);
  color: var(--grey-500);
  cursor: not-allowed;
  box-shadow: none;
}

.button--danger { background: var(--red); }
.button--danger:hover { background: #a5301f; }

.button--secondary {
  background: #fff;
  color: var(--grey-700);
  box-shadow: inset 0 0 0 1px var(--grey-200), var(--shadow-sm);
}

.button--secondary:hover {
  background: var(--grey-50);
  color: var(--grey-900);
}

.button--large { padding: 11px 22px; font-size: 15px; }

.button--success { background: var(--green); }
.button--success:hover { background: #145f3a; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ─── Table ──────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

thead {
  background: var(--blue-grad);
  color: #fff;
}

thead th {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  text-align: left;
}

tbody tr {
  border-bottom: 1px solid var(--grey-100);
  transition: background .1s;
}

tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--blue-light); }

tbody td {
  padding: 13px 16px;
  font-size: 14px;
  color: var(--grey-700);
}

tbody td:first-child {
  font-weight: 600;
  color: var(--grey-900);
}

.uploads-table__actions { width: 1%; text-align: right; }

.uploads-table__delete {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--grey-500);
  transition: color .1s;
}

.uploads-table__delete:hover { color: var(--red); }

.uploads-table__delete svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* ─── Status badges ──────────────────────────────────────────── */
.status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.status--pending    { background: var(--yellow-light); color: #856404; }
.status--collecting { background: var(--yellow-light); color: #856404; }
.status--processing { background: var(--blue-light);   color: var(--blue-mid); }
.status--processed  { background: var(--green-light);  color: var(--green); }
.status--failed     { background: var(--red-light);    color: var(--red); }

/* ─── Form ───────────────────────────────────────────────────── */
form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 640px;
}

fieldset {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}

legend {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--blue-accent);
  padding: 0 6px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 16px;
}

.field:first-of-type { margin-top: 12px; }

label, .field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-700);
}

input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--grey-900);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}

input[type="text"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(45,125,210,.15);
}

/* A native <select>'s own UA chrome renders a few px taller than a same-padding <input> even
   with identical box-model rules above — stripping its default appearance and drawing our own
   chevron makes its height governed purely by the shared padding/border, same as every other
   field, instead of the browser's own select rendering. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234a5468' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

input[type="file"] {
  font-size: 13px;
  color: var(--grey-700);
}

textarea { resize: vertical; }

.or-divider {
  text-align: center;
  color: var(--grey-500);
  font-size: 13px;
  margin: 14px 0 0;
}

.optional {
  font-weight: 400;
  color: var(--grey-500);
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.locked-patient {
  font-size: 14px;
  color: var(--grey-700);
  margin-top: 12px;
}

.locked-patient strong { color: var(--grey-900); }

.locked-patient a {
  margin-left: 8px;
  font-size: 13px;
  color: var(--grey-500);
}

.locked-patient a:hover { color: var(--grey-900); }

.actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.actions a {
  font-size: 14px;
  color: var(--grey-500);
}

.actions a:hover { color: var(--grey-900); }

.actions button[type="reset"] {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  color: var(--grey-500);
  cursor: pointer;
}

.actions button[type="reset"]:hover { color: var(--grey-900); }

.template-picker {
  position: relative;
  align-self: flex-end;
  margin-bottom: 8px;
}

.template-picker__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
  color: var(--grey-700);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.template-picker__trigger:hover {
  border-color: var(--blue-accent);
  background: var(--blue-light);
  color: var(--blue-accent);
}

.template-picker__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: 280px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Two classes so this beats the global input[type="text"] rule's border/padding/radius — an
   attribute selector alone outweighs one class, per CSS specificity. */
.template-picker .template-picker__search {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--grey-100);
  font-size: 13px;
  outline: none;
}

.template-picker__list {
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}

.template-picker__item {
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--grey-900);
  cursor: pointer;
}

.template-picker__item:hover,
.template-picker__item--active {
  background: var(--blue-light);
  color: var(--blue-mid);
}

.template-picker__empty {
  padding: 12px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--grey-500);
}

/* ─── Diary title/template combobox (diaries/_form) ─────────────── */
.template-combobox { position: relative; }

.template-combobox__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.template-combobox__list {
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.template-combobox__item {
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--grey-900);
  cursor: pointer;
}

.template-combobox__item:hover,
.template-combobox__item--active {
  background: var(--blue-light);
  color: var(--blue-mid);
}

.template-combobox__empty {
  padding: 12px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--grey-500);
}

/* ─── Diary editor (Diary#fields form/questionnaire builder) ──── */
.diary-form__row {
  display: flex;
  gap: 16px;
}

/* Overrides .field:first-of-type's different margin-top — inside this row, only the first of
   the two divs actually matches that selector, which otherwise throws the two labels out of
   vertical alignment with each other. */
.diary-form__row .field { flex: 1; margin-top: 16px; }

.diary-fields { margin-top: 24px; }

.diary-fields__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diary-fields__header h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-700);
}

.diary-fields__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
  color: var(--grey-700);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.diary-fields__add:hover {
  border-color: var(--blue-accent);
  background: var(--blue-light);
  color: var(--blue-accent);
}

.diary-fields__empty {
  margin-top: 12px;
  font-size: 13px;
  color: var(--grey-500);
}

.diary-field-list {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diary-field-row {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 12px;
  background: #fff;
}

.diary-field-row__main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.diary-field-row__label { flex: 1; }

.diary-field-row__type { width: auto; flex: 0 0 160px; }

.diary-field-row__required {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--grey-700);
  white-space: nowrap;
}

.diary-field-row__config {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--grey-100);
}

.diary-field-row__config label {
  display: block;
  font-size: 12px;
  color: var(--grey-500);
  margin-bottom: 4px;
}

.diary-field-row__config--scale {
  display: flex;
  gap: 16px;
}

.diary-field-row__config--scale label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--grey-700);
}

.diary-field-row__config--scale input { width: 80px; }

.diary-fields--nested {
  padding-left: 14px;
  border-left: 2px solid var(--grey-100);
}

.diary-fields--nested .diary-fields__header h4 {
  font-size: 11px;
}

.diary-field-list--nested { margin-top: 8px; }

.diary-field-row__actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
}

.diary-field-row__actions button {
  border: none;
  background: none;
  color: var(--grey-500);
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.diary-field-row__actions button:hover {
  background: var(--grey-100);
  color: var(--grey-900);
}

.diary-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.diary-status-badge {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.diary-status-badge--draft { background: var(--yellow-light); color: #856404; }
.diary-status-badge--active { background: var(--blue-light); color: var(--blue-mid); }
.diary-status-badge--ended { background: var(--green-light); color: var(--green); }

.diary-editor-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--grey-100);
}

.diary-readonly__meta {
  font-size: 13px;
  color: var(--grey-700);
  margin-bottom: 16px;
}

.diary-readonly__meta p { margin-top: 6px; }
.diary-readonly__meta p:first-child { margin-top: 0; }

.diary-field-row--readonly .diary-field-row__main { gap: 8px; }

.diary-field-row__label-text { font-size: 14px; color: var(--grey-900); flex: 1; }

.diary-field-row__type-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--grey-100);
  color: var(--grey-700);
  font-size: 12px;
}

.diary-field-row__required-badge {
  flex: none;
  font-size: 12px;
  color: var(--grey-500);
}

.diary-readonly__link-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.copy-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--grey-500);
  cursor: pointer;
}

.copy-button:hover { background: var(--grey-100); color: var(--grey-900); }
.copy-button--copied { color: var(--green); }

.copy-button__toast {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--grey-900);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}

.diary-entries-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.diary-entry {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 12px;
}

.diary-entry__date {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-900);
  margin-bottom: 8px;
}

.diary-entry__values {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.diary-entry__value-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.diary-entry__value-label { color: var(--grey-500); }
.diary-entry__value { color: var(--grey-900); text-align: right; }

.diary-entry__group-instance {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--grey-200);
}

.diary-entry__group-instance-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-700);
  margin-bottom: 4px;
}

/* Read-only preview of the patient-facing form (diaries/_preview) — reuses
   patient_diary/entries/_fields, which itself is styled by patient_diary.css (deliberately not
   loaded here, see that file's own comment) — these are duplicated, scoped copies of just the
   handful of rules it needs to render with the same look inside the doctor dashboard. */
.diary-preview__hint { margin-bottom: 4px; }

.diary-preview {
  border: none;
  padding: 0;
  margin: 0;
}

.diary-preview .patient-field-note {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--blue-light);
  color: var(--blue-mid);
  font-size: 13px;
  font-style: italic;
  white-space: pre-line;
}

.diary-preview .patient-field-section {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 2px solid var(--grey-200);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue-mid);
}

.diary-preview .patient-field-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.diary-preview .patient-field {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--grey-100);
}

.diary-preview .patient-field__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-900);
  margin-bottom: 10px;
}

.diary-preview .patient-field__required { color: var(--red); margin-left: 3px; }

.diary-preview .patient-field__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--grey-900);
  background: var(--grey-50);
}

.diary-preview .patient-field__choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.diary-preview .patient-field__choices label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--grey-50);
}

.diary-preview .patient-field__choices input { width: 16px; height: 16px; flex: none; }

.diary-preview .patient-field-group {
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--grey-100);
}

.diary-preview .patient-field-group__instance {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
}

.diary-preview .patient-field--nested { margin-top: 14px; }
.diary-preview .patient-field-group__instance .patient-field--nested:first-child { margin-top: 0; }

.diary-preview .patient-field-group__add {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 1px dashed var(--grey-200);
  border-radius: var(--radius);
  background: none;
  color: var(--blue-accent);
  font-size: 13px;
  font-weight: 600;
}

.diary-preview .patient-field-group__remove {
  display: block;
  margin-top: 10px;
  margin-left: auto;
  border: none;
  background: none;
  color: var(--red);
  font-size: 12px;
}

/* ─── Notices ────────────────────────────────────────────────── */
.notice {
  background: var(--green-light);
  color: var(--green);
  border: 1px solid #b7dfc8;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 24px;
}

/* ─── Toast (JS-driven async-save feedback) ─────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: var(--grey-900);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  z-index: 1000;
}

.toast--visible { opacity: 1; transform: translateY(0); }
.toast--error { background: var(--red); }

.empty-state {
  text-align: center;
  color: var(--grey-500);
  padding: 64px 0;
  font-size: 15px;
}

/* ─── Upload show layout ─────────────────────────────────────── */
.show-layout {
  display: grid;
  /* minmax(0, 1fr), not a plain 1fr: a grid track's default minimum is auto, i.e. the min-content
     size of whatever's inside it — for a long title with no spaces to break on, that's the whole
     word's rendered width. Without the explicit 0 floor, a title like that pushes this column (and
     the whole grid) wider than the pane, showing up as a horizontal scrollbar. */
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.show-layout--single { grid-template-columns: minmax(0, 1fr); }

/* .portal-main (unlike the old .app-main) has no max-width cap — the cap keeps very wide screens
   readable instead of stretching the detail panel edge-to-edge. */
.portal-main .show-layout {
  max-width: 1400px;
}

/* ─── Document list (left panel) ────────────────────────────── */
.doc-list {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: sticky;
  top: 76px;
}

/* Inside the clinic portal shell there's no top navbar to clear — stick flush with .portal-main's
   own top padding instead of the 76px tuned for the old app-header bar. */
.portal-main .doc-list {
  top: 36px;
}

.doc-list__header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--grey-100);
}

.doc-list__header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--grey-900);
}

.doc-list__meta {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 4px;
}

.doc-list__nav {
  display: flex;
  flex-direction: column;
}

.doc-list__item {
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  border-bottom: 1px solid var(--grey-100);
  text-decoration: none;
  transition: background .1s;
  cursor: pointer;
}

.doc-list__item:last-child { border-bottom: none; }

.doc-list__item:hover { background: var(--blue-light); text-decoration: none; }

.doc-list__item--summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-accent);
}

.doc-list__type {
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-900);
}

.doc-list__subtitle {
  font-size: 12px;
  font-style: italic;
  color: var(--grey-500);
  margin-top: 2px;
}

/* ─── Detail panel (right panel) ────────────────────────────── */
.detail-panel {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 28px 32px;
}

.detail-panel__header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--grey-100);
}

.detail-panel__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-mid);
  /* A title with no spaces (one long word) has no natural break point — without this it just
     keeps going, widening the panel instead of wrapping to a second line. */
  overflow-wrap: break-word;
}

.detail-panel__subtitle {
  font-size: 14px;
  font-style: italic;
  color: var(--grey-500);
  margin-top: 4px;
}

.detail-panel__date {
  font-size: 13px;
  color: var(--grey-500);
  margin-top: 4px;
}

.detail-panel__summary {
  font-size: 15px;
  line-height: 1.7;
  color: var(--grey-700);
  margin-bottom: 24px;
}

.prose h1, .prose h2, .prose h3 {
  color: var(--blue-mid);
  font-weight: 700;
  margin: 24px 0 8px;
  line-height: 1.3;
}

.prose h1 { font-size: 20px; }
.prose h2 { font-size: 17px; }
.prose h3 { font-size: 15px; }

.prose p { margin-bottom: 14px; }

.prose strong { color: var(--grey-900); font-weight: 600; }

.prose em { font-style: italic; }

.prose ul, .prose ol {
  margin: 8px 0 14px 20px;
}

.prose li { margin-bottom: 4px; }

.prose p:last-child { margin-bottom: 0; }

.prose > :first-child { margin-top: 0; }

.prose table {
  margin: 14px 0;
}

.prose table:last-child { margin-bottom: 0; }

.detail-panel__section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--blue-accent);
  margin: 24px 0 12px;
}

/* ─── Tabs ───────────────────────────────────────────────────── */
.tabs {
  padding-top: 16px;
}

/* Left pane's header row — just a label + the "+" menu now (see patients/_add_document_trigger),
   there's nothing to switch between since Lista was dropped in favor of the timeline being the
   only view. */
/* Shared by every collapsible section label in the left panel (Sažetak, U izradi, Istorija —
   see patients/_summary, _drafts_panel, _left_panel) so they read as one consistent set. Each
   heading is an <h4> wrapping a real <button> (collapsible#toggle) with a caret + this text. */
.doc-list__section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
}

.doc-list__section-heading {
  margin-bottom: 8px;
}

/* Sits directly in the doc-list's own flow (not nested in a padded section like "U izradi"/
   Sažetak are), so it needs its own horizontal padding to line up with the timeline below it. Also
   the only section heading with a second action (Organizuj) alongside the collapse toggle, hence
   the flex row — .doc-list__section-toggle's own width: 100% (shared with every other section
   heading) is overridden here so it shares the row instead of filling it. */
.doc-list__section-heading--timeline {
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.doc-list__section-heading--timeline .doc-list__section-toggle {
  width: auto;
  flex: 1;
  min-width: 0;
}

.doc-list__section-action {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--grey-500);
  transition: color .15s;
}

.doc-list__section-action:hover { color: var(--grey-900); }

/* Same margin-bottom as the other two left-panel sections (.patient-summary--compact,
   .drafts-panel) — consistent gap whether it's the last one or not. */
.doc-list__timeline-section {
  margin-bottom: 20px;
}

.doc-list__section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.doc-list__section-toggle:hover .doc-list__section-title { color: var(--grey-700); }

.section-caret {
  flex-shrink: 0;
  color: var(--grey-500);
  transition: transform .15s;
}

.section-caret--collapsed { transform: rotate(-90deg); }

.tabs__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 2px solid var(--grey-200);
  margin-bottom: 20px;
}

.tabs__tab {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grey-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.tabs__tab:hover { color: var(--grey-900); }

.tabs__tab--active {
  color: var(--blue-accent);
  border-bottom-color: var(--blue-accent);
}

.tabs__panel { display: none; }
.tabs__panel--active { display: block; }

/* ─── Lab results filter ─────────────────────────────────────── */
.lab-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.lab-filter__search {
  flex: 1;
  min-width: 140px;
}

.lab-filter__search input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--grey-900);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.lab-filter__search input:focus {
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(45,125,210,.15);
}

.lab-filter__flags {
  display: flex;
  gap: 4px;
}

.lab-filter__flag {
  background: none;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-700);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.lab-filter__flag:hover { border-color: var(--blue-accent); color: var(--blue-accent); }

.lab-filter__flag--active {
  background: var(--blue-accent);
  border-color: var(--blue-accent);
  color: #fff;
}

.lab-table__empty {
  text-align: center;
  color: var(--grey-500);
  padding: 16px;
}

/* ─── Lab results table ──────────────────────────────────────── */
.lab-panel-heading {
  margin: 20px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-mid);
}

[data-lab-filter-target="group"]:first-child .lab-panel-heading {
  margin-top: 0;
}

.lab-table {
  font-size: 13px;
}

.lab-table th {
  font-size: 11px;
}

.lab-row--high td, .lab-row--critical_high td { background: #fff8f0; }
.lab-row--low td, .lab-row--critical_low td   { background: #f0f4ff; }

.ref-range { color: var(--grey-500); font-size: 12px; }

.flag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.flag--high, .flag--critical_high { background: #fff0e0; color: #c05000; }
.flag--low, .flag--critical_low   { background: #e8edff; color: #2244aa; }

/* ─── Findings list ──────────────────────────────────────────── */
.findings-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finding {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--grey-100);
}

/* Jumped to from a chat citation (see highlight_controller.js) — a transient background pulse,
   not a persistent style, so it fades back out on its own once it's done its job of catching the
   eye at the scroll destination. */
@keyframes highlight-flash {
  0%, 100% { background-color: transparent; }
  15%, 55% { background-color: var(--yellow-light); }
}

.highlight-flash { animation: highlight-flash 1.8s ease; }

.finding:last-child { border-bottom: none; }

.finding__category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--blue-accent);
}

.finding__text {
  font-size: 14px;
  color: var(--grey-700);
  line-height: 1.6;
}

/* ─── File viewer ────────────────────────────────────────────── */
.file-viewer__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.file-viewer__btn {
  background: var(--blue-light);
  color: var(--blue-mid);
  border: none;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.file-viewer__btn:hover:not(:disabled) { background: var(--grey-200); }
.file-viewer__btn:disabled { opacity: .4; cursor: default; }

.file-viewer__btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.file-viewer__counter {
  font-size: 13px;
  color: var(--grey-500);
  min-width: 48px;
  text-align: center;
}

.file-viewer__divider {
  width: 1px;
  height: 20px;
  background: var(--grey-200);
  margin: 0 4px;
}

.file-viewer__slide { display: none; flex-direction: column; gap: 8px; }
.file-viewer__slide--active { display: flex; }

.file-preview__scroll {
  overflow: auto;
  max-height: 700px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--grey-50);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* Any file-viewer instance (documents/_files — the document pane's own preview, and reused as-is
   for a single page in uploads/_organize_page_panel) — no cap of its own, same reasoning as
   .timeline-panel: the surrounding pane already scrolls, so a second nested scrollbar for a tall
   page is redundant, and the image should just take the full width instead of being squeezed into
   a fixed box. Zoom (up to 300%, see file_viewer_controller.js) can still push it wider than the
   pane — overflow-x keeps that reachable by drag/scroll without also clipping vertically. Review's
   own plain (non-.file-viewer) preview (uploads/_review_page_panel) keeps the cap above, since that
   one still sits in a fixed-height sidebar layout. */
.file-viewer .file-preview__scroll {
  max-height: none;
  overflow-x: auto;
  overflow-y: visible;
}

.file-preview__scroll--grabbing { cursor: grabbing; }

.file-preview__image {
  width: 100%;
  display: block;
  transition: width .2s;
  -webkit-user-drag: none;
}

.file-preview__image--instant { transition: none; }

/* ─── File viewer: fullscreen popup (native <dialog>) ───────────
   Same margin/border/padding reset as .portal-modal — see its comment — but sized to fill most of
   the viewport instead of a fixed form-dialog width, since this is an image, not form content. */
.file-viewer__fullscreen {
  margin: auto;
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: 92vw;
  height: 92vh;
  max-width: none;
  background: transparent;
}

.file-viewer__fullscreen::backdrop {
  background: rgba(10,16,30,.85);
}

.file-viewer__fullscreen-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

.file-viewer__fullscreen-close:hover { background: rgba(255,255,255,.2); }

.file-viewer__fullscreen-scroll {
  width: 100%;
  height: 100%;
  max-height: none;
  border: none;
  border-radius: 0;
  background: transparent;
}

.file-preview__pdf {
  width: 100%;
  height: 600px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
}

.file-preview__download {
  font-size: 13px;
  color: var(--blue-accent);
  align-self: flex-start;
}

.transcript {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--grey-900);
  margin: 0;
  padding: 4px 0;
}

/* ─── Wizard box (steps + step controls) ────────────────────── */
.wizard-box {
  padding: 0;
  overflow: hidden;
}

.wizard-box__steps {
  padding: 16px 24px;
  background: var(--grey-50);
  border-bottom: 1px solid var(--grey-200);
}

.wizard-box__steps .wizard-steps { margin-bottom: 0; }

.wizard-box__controls {
  padding: 24px;
}

/* button_to's wrapping <form> is block-level by default (full width) — shrink it to its content. */
.wizard-box__controls .button_to {
  display: inline-block;
}

.wizard-box__hint {
  margin-top: 10px;
  font-size: 13px;
  color: var(--red);
  text-align: right;
}

.wizard-box__hint .error-badge {
  margin: 0 2px;
  vertical-align: -2px;
}

/* ─── Dropzone ───────────────────────────────────────────────── */
.dropzone {
  border: 2px dashed var(--grey-200);
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.dropzone:hover { border-color: var(--blue-accent); }

.dropzone--active {
  border-color: var(--blue-accent);
  background: var(--blue-light);
}

.dropzone__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--grey-700);
}

.dropzone__browse {
  color: var(--blue-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dropzone__hint {
  font-size: 12px;
  color: var(--grey-500);
  margin-top: 4px;
}

/* "Take photo with your phone" (see Upload#camera_token!, UploadCamera::*) — the QR modal sits
   right below the dropzone, since it's an alternative way to get pages into the same list. */
.camera-qr-trigger {
  margin-top: 10px;
  text-align: center;
}

.camera-qr-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.camera-qr-modal__hint {
  font-size: 13px;
  color: var(--grey-700);
  max-width: 320px;
}

.qr-code {
  width: 200px;
  height: 200px;
}

.camera-qr-modal__link {
  font-size: 12px;
  color: var(--grey-500);
  word-break: break-all;
  max-width: 280px;
}

/* The intake screen's paired-phone panel (patient_uploads/_scan_phone, see ScanPhone) */
.scan-phone { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--grey-200); border-radius: 10px; }
.scan-phone--connected { background: var(--green-light); border-color: #b9dfc9; }
.scan-phone__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--green); }
.scan-phone__qr { flex: none; }
.scan-phone__qr .qr-code { width: 132px; height: 132px; display: block; }
.scan-phone__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13.5px; color: var(--grey-700); }
.scan-phone__text strong { font-size: 15px; color: var(--grey-900); }
.scan-phone__meta { font-size: 12.5px; color: var(--grey-500); }
.scan-phone__inline-form { display: inline; margin: 0; }
.scan-phone__meta .link-button { font-size: 12.5px; }
@media (max-width: 640px) { .scan-phone { flex-direction: column; align-items: flex-start; } }

.wizard-box__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.wizard-box__next {
  display: block;
  max-width: none;
  margin-top: 20px;
  text-align: right;
}

/* Already spaced by .wizard-box__actions itself (flex row with Cancel) — its own margin-top would
   just push it out of alignment with the Cancel button next to it. */
.wizard-box__actions .wizard-box__next { margin-top: 0; }

.wizard-box__next .button {
  padding: 14px 30px;
  font-size: 16px;
  border-radius: 8px;
}

/* ─── Processing status ──────────────────────────────────────── */
.processing-status {
  padding: 32px 24px;
  text-align: center;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 500;
}

.processing-status--collecting,
.processing-status--pending { background: var(--yellow-light); color: #856404; }
.processing-status--processing { background: var(--blue-light); color: var(--blue-mid); }
.processing-status--complete { background: var(--green-light); color: var(--green); }
.processing-status--failed { background: var(--red-light); color: var(--red); }

/* ─── Annotate progress ──────────────────────────────────────── */
.annotate-progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
}

.annotate-progress__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
}

.annotate-progress__item:hover { background: var(--grey-50); }

.annotate-progress__title {
  font-size: 14px;
  color: var(--grey-900);
}

.annotate-progress__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.annotate-progress__icon--spinner {
  border-radius: 50%;
  border: 2px solid var(--blue-light);
  border-top-color: var(--blue-accent);
  animation: annotate-spin .7s linear infinite;
}

.annotate-progress__icon--done {
  color: var(--green);
}

.annotate-progress__icon--failed {
  color: var(--red);
}

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

/* ─── Wizard steps ───────────────────────────────────────────── */
.wizard-steps {
  margin-bottom: 20px;
}

.wizard-steps ol {
  list-style: none;
  display: flex;
  align-items: center;
}

.wizard-steps__step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wizard-steps__step:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--grey-200);
  margin-left: 12px;
}

.wizard-steps__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.wizard-steps__label {
  font-size: 13px;
  font-weight: 600;
}

.wizard-steps__step--current .wizard-steps__number { background: var(--blue-accent); color: #fff; }
.wizard-steps__step--current .wizard-steps__label { color: var(--grey-900); }

.wizard-steps__step--upcoming .wizard-steps__number {
  background: var(--grey-100);
  color: var(--grey-500);
  border: 1px solid var(--grey-200);
}

.wizard-steps__step--upcoming .wizard-steps__label { color: var(--grey-500); }

/* ─── Page list (upload wizard, step 1) ─────────────────────── */
.wizard-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wizard-step__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

.wizard-step__intro .doc-list__meta { margin-top: -8px; }

.page-list {
  list-style: none;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.page-list:empty { display: none; }

.page-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--grey-100);
  font-size: 14px;
  cursor: pointer;
  transition: background .1s;
}

.page-list__item:last-child { border-bottom: none; }

.page-list__item:hover { background: var(--blue-light); }

.page-list__item--active {
  background: var(--blue-light);
  box-shadow: inset 3px 0 0 var(--blue-accent);
}

.page-list__name {
  color: var(--grey-900);
  word-break: break-all;
}

.page-list__remove {
  background: none;
  border: none;
  color: var(--grey-500);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  flex-shrink: 0;
  margin-left: 12px;
}

.page-list__remove:hover { color: var(--red); }

.page-list--errors {
  margin-top: 12px;
  border-color: #f3c9c2;
}

/* Marks a page that failed OCR (see PageReader/uploads/review.html.erb) in the review step's page
   list — a small, unmissable indicator next to the title, not a full-row tint (that's
   .page-list__item--error, used for a different purpose — failed file uploads during intake). */
.error-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.tabs__tab--error { color: var(--red); }
.tabs__tab--error.tabs__tab--active { color: var(--red); border-bottom-color: var(--red); }

/* Same shape as .error-badge, amber instead of red — a non-blocking notice (Document#
   organize_warnings), not something that has to be fixed before continuing. */
.warning-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--amber-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.review-error__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.review-error {
  padding: 14px;
  background: var(--red-light);
  border: 1px solid #f3c9c2;
  border-radius: var(--radius);
  color: var(--red);
  font-size: 13px;
  white-space: pre-wrap;
}

/* Same shape as .review-error, amber instead of red — see .warning-badge's own comment. */
.review-warning {
  padding: 14px;
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  color: var(--amber-text);
  font-size: 13px;
  margin-bottom: 12px;
}

.review-warning ul {
  margin: 0;
  padding-left: 18px;
}

.page-list__item--error {
  color: var(--red);
  background: var(--red-light);
  cursor: default;
}

.page-list__item--error:hover { background: var(--red-light); }

/* ─── Organize tree (wizard step 4) ─────────────────────────── */
/* The tree (Documents) and the Unassigned box below it are two separate boxes stacked in one
   sticky column, rather than one growing list — a long document tree used to push Unassigned (and
   the whole page's scroll height) far below the fold, making drag-and-drop between the two nearly
   impossible on a patient with many documents. Capping the tree box's own height and scrolling
   *inside* it keeps Unassigned always on-screen just below it, and keeps the preview panel in the
   right-hand column from scrolling out of view as the tree grows. */
.organize-tree-column {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 76px;
}

/* patients/organize.html.erb, opened as a tab in the center pane — no wizard step bar above
   .show-layout there to clear, so the 76px above just needs to not apply. */
.organize-tree-column--embedded { top: 0; }

.organize-tree-box {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 65vh;
}

.organize-tree-box__scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* lets this actually shrink (and thus scroll) inside a flex column parent */
}

.organize-tree__unassigned-box {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Replaces the old always-visible "Ponovo obradi izmenjene dokumente" button (see
   patients/organize.html.erb) — sits between the tree box and Unassigned, appearing only once a
   drag actually moves a page (organizer#drop/#trackMove), square-cornered on both edges like they
   are, so the three read as one continuous panel while it's showing. */
.organize-confirm-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--blue-light);
  border: 1px solid var(--grey-200);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.organize-confirm-bar__text {
  flex: 1;
  font-size: 13px;
  color: var(--grey-700);
}

.organize-confirm-bar__btn {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.organize-confirm-bar__btn--cancel { background: var(--grey-100); color: var(--grey-700); }
.organize-confirm-bar__btn--cancel:hover { background: var(--grey-200); color: var(--grey-900); }

.organize-confirm-bar__btn--confirm { background: var(--green-light); color: var(--green); }
.organize-confirm-bar__btn--confirm:hover { background: var(--green); color: #fff; }

.organize-confirm-bar__btn--confirm:disabled {
  background: var(--grey-100);
  color: var(--grey-500);
  cursor: not-allowed;
}
.organize-confirm-bar__btn--confirm:disabled:hover { background: var(--grey-100); color: var(--grey-500); }

.organize-tree {
  padding: 6px 0;
  font-size: 13px;
}

.organize-tree__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grey-100);
  margin-bottom: 4px;
}

/* patient_uploads/organize.html.erb only — always visible (unlike .organize-confirm-bar, which
   stays hidden until a drag actually changes something) since finishing a fresh import is always
   the next required step, not an optional cleanup action. */
.organize-finish-bar {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-bottom: none;
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
}

/* Sits flush under .organize-finish-bar (no gap, no double border between them) — square top to
   match, square bottom as it already was. Scoped to only when it's actually right after a finish
   bar (patient_uploads/organize.html.erb) — patients/organize.html.erb's own tree-box has nothing
   above it and keeps its normal rounded top. */
.organize-finish-bar + .organize-tree-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.organize-tree__toolbar-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
}

.organize-tree__new-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue-accent);
  cursor: pointer;
}

.organize-tree__new-btn:hover { color: var(--blue-mid); }

.organize-tree__row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--grey-700);
  transition: background .1s;
}

.organize-tree__row:hover { background: var(--blue-light); }

.organize-tree__row--active {
  background: var(--blue-light);
  box-shadow: inset 3px 0 0 var(--blue-accent);
}

.organize-tree__row--folder {
  font-weight: 700;
  color: var(--grey-900);
}

.organize-tree__row--file {
  padding-left: 34px;
  color: var(--grey-500);
}

.organize-tree__row--current { color: var(--grey-900); }

.organize-tree__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--blue-accent);
}

.organize-tree__row--file .organize-tree__icon { color: var(--grey-500); }
.organize-tree__row--current .organize-tree__icon { color: var(--blue-accent); }

.organize-tree__pages {
  list-style: none;
  min-height: 6px;
}

.organize-tree__document--dragover {
  background: var(--blue-light);
  outline: 2px dashed var(--blue-accent);
  outline-offset: -2px;
}

.organize-tree__empty-hint {
  padding: 6px 34px;
  font-size: 12px;
  color: var(--grey-500);
  font-style: italic;
}

.organize-tree__name {
  flex: 1;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.organize-tree__date {
  margin-left: auto;
  padding-left: 10px;
  font-size: 11px;
  font-weight: 400;
  color: var(--grey-500);
  flex-shrink: 0;
  cursor: text;
}

.organize-tree__delete-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-left: 8px;
  color: var(--grey-500);
  opacity: 0;
  cursor: pointer;
  transition: opacity .1s, color .1s;
}

.organize-tree__row--folder:hover .organize-tree__delete-icon,
.organize-tree__row--file:hover .organize-tree__delete-icon,
.organize-tree__unassigned-box .organize-tree__row:hover .organize-tree__delete-icon { opacity: 1; }
.organize-tree__delete-icon:hover { color: var(--red); }

.organize-tree__rename-input {
  width: 90%;
  padding: 2px 6px;
  border: 1px solid var(--blue-accent);
  border-radius: 4px;
  font: inherit;
  color: inherit;
  background: #fff;
}

.organize-tree__rename-input--date {
  -webkit-appearance: none;
  appearance: none;
  width: 68px;
  min-width: 62px;
  height: 16px;
  flex-shrink: 1;
  margin-left: auto;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 400;
  line-height: 16px;
}

.organize-tree__rename-input--date::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.organize-tree__rename-input--date::-webkit-datetime-edit {
  padding: 0;
}

.organize-tree__rename-input--date::-webkit-inner-spin-button {
  display: none;
}

/* ─── Organize detail panel ──────────────────────────────────── */
.organize-edit-form { max-width: 480px; }

.ocr-list {
  list-style: none;
  max-height: 500px;
  overflow-y: auto;
}

.ocr-list__item {
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-100);
  font-size: 14px;
  line-height: 1.6;
  color: var(--grey-700);
  white-space: normal;
}

.ocr-list__item:last-child { border-bottom: none; }

/* ─── Timeline ───────────────────────────────────────────────── */
.timeline-panel {
  /* No cap/scroll of its own anymore — .left-panel__scroll is already the one scroll area for the
     whole panel (patient info, Sažetak, U izradi, and this), so a second nested scrollbar just for
     the timeline was redundant and confusing. */
  /* Extra bottom padding — without it the last item sits flush with the panel's true bottom edge,
     right where the browser's own link-hover preview overlay renders, making it hard to see/click. */
  padding: 16px 18px 40px;
}

.timeline {
  position: relative;
  margin-left: 64px;
}

.timeline__line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--grey-200);
}

.timeline__tick {
  position: absolute;
  left: -64px;
  width: 52px;
  transform: translateY(-50%);
  text-align: right;
  white-space: nowrap;
}

.timeline__tick::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--grey-200);
}

.timeline__tick-label {
  font-size: 11px;
  color: var(--grey-500);
}

/* A discharge document's admission-to-discharge span. Drawn over the tick dashes rather than
   reserving its own space — it doesn't need to avoid them, just sit visually above. The top/bottom
   pseudo-elements turn the plain vertical line into a bracket, capped toward the main dot column. */
.timeline__stay {
  position: absolute;
  left: -14px;
  width: 3px;
  border-radius: 1.5px;
  background: var(--blue-accent);
  z-index: 1;
  transition: background .1s;
}

.timeline__stay::before,
.timeline__stay::after {
  content: "";
  position: absolute;
  left: 0;
  height: 3px;
  border-radius: 1.5px;
  background: var(--blue-accent);
  transition: background .1s;
}

.timeline__stay::before { top: -1.5px; width: 12px; } /* reaches .timeline__stay-anchor's left edge */
.timeline__stay::after { bottom: -1.5px; width: 10px; } /* reaches .timeline__dot's left edge */

.timeline__stay--active,
.timeline__stay--active::before,
.timeline__stay--active::after {
  background: var(--blue-mid);
}

/* Closes off the bracket's top end at the admission date — same fill as a real dot, but smaller,
   since it isn't a separate clickable document. Lights up like a dot on hover, though. */
.timeline__stay-anchor {
  position: absolute;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-accent);
  border: 1.5px solid var(--blue-accent);
  transform: translateY(-50%);
  z-index: 1;
  transition: transform .1s, background .1s, border-color .1s;
}

.timeline__stay-anchor--active {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
  transform: translateY(-50%) scale(1.4);
}

.timeline__dot {
  position: absolute;
  left: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blue-accent);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--blue-accent);
  transform: translateY(-50%);
  z-index: 1;
  transition: transform .1s, box-shadow .1s;
}

.timeline__dot--active {
  transform: translateY(-50%) scale(1.5);
  box-shadow: 0 0 0 1px var(--blue-accent), 0 0 0 4px var(--blue-light);
}

/* The document's exact date, shown to the left of its dot only while that document is hovered — the
   tick labels alone are too coarse (month/year) to give the real date without opening the document.
   Fixed positioning (top/left set from JS, from the dot's real screen rect) rather than absolute
   within the gutter — that gutter isn't wide enough for the bubble without overlapping the dot, and
   .timeline-panel's overflow-y: auto implicitly clips overflow-x too, so anything positioned outside
   the gutter would just get cut off instead of floating over the content. */
.timeline__dot-date {
  position: fixed;
  transform: translate(-100%, -50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--grey-700);
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 4px;
  padding: 2px 6px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s;
  pointer-events: none;
  z-index: 300;
}

.timeline__dot-date--active {
  opacity: 1;
  visibility: visible;
}

/* "+" (patients/_add_document_trigger, opens the new-document picker), pinned to the tab nav's
   right edge — margin-left: auto, same flex row as the Istorija/Lista tabs. */
.tabs__nav-add-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--grey-500);
  text-decoration: none;
  transition: color .15s, background .15s;
}

.tabs__nav-add-trigger:hover {
  color: var(--blue-accent);
  background: var(--blue-light);
  text-decoration: none;
}

/* "U izradi" — drafts (the visit paper, a hand-written nalaz not yet finished), pinned to the
   bottom of the doc-list, same spot "Dodaj dokument" used to sit. Empty renders no box at all —
   see patients/_drafts_panel. Title truncates to one line with an ellipsis and the "izmenjen"
   meta sits on its own line below, same as a timeline marker (.timeline__title/__subtitle) —
   the default .patient-overview__item grid (title + meta side by side, title free to wrap)
   looks fine for the overview's own use but wraps a long draft title across 2-3 lines here. */
/* No border, no top/bottom padding — same bare margin-bottom as every other left-panel section
   (Sažetak: .patient-summary--compact, Istorija: .doc-list__timeline-section) so the gap
   between any two of them reads the same regardless of which is collapsed/expanded. */
.drafts-panel {
  padding: 0 18px;
  margin-bottom: 20px;
}

.drafts-panel__heading {
  display: flex;
  align-items: center;
}

/* Sits next to the "+" menu in the same row — the list-stacking margin below it (see
   .doc-list__section-heading) isn't wanted here, .patient-overview__list's own margin-top covers
   the gap instead, only when there's actually a list to space out from. */
.drafts-panel__heading .doc-list__section-heading {
  margin-bottom: 0;
}

/* No cap/scroll of its own — .left-panel__scroll is already the one scroll area for the whole
   panel (same reasoning as .timeline-panel below), so a second nested scrollbar just for the
   drafts list was redundant. */
.drafts-panel .patient-overview__list {
  margin-top: 10px;
  border: none;
  border-radius: 0;
}

/* Reads as a plain file list, not a boxed/bordered card — no per-item divider, no outer border,
   just a light neutral hover instead of the overview list's blue "selected" look. The pencil
   badge (drafts used to reuse patients/_draft_badge, still used in the timeline) is gone too;
   the date stays, but inline next to the title rather than its own bolder line, same subdued
   treatment "last edited" gets everywhere else (e.g. .doctor-home__dob). */
.drafts-panel .patient-overview__item {
  display: block;
  padding: 6px 10px;
  border-bottom: none;
}

.drafts-panel .patient-overview__item:hover {
  background: var(--grey-50);
}

/* Same contained "currently open" treatment .timeline__undated's own items use — see
   active_document_controller.js, which now also tracks U izradi's own rows (drafts, Reprocess,
   Upload), not just dated documents. */
.drafts-panel .patient-overview__item.is-open-document {
  background: var(--blue-accent);
  border-radius: 4px;
}

.drafts-panel .patient-overview__item.is-open-document .patient-overview__item-title-text,
.drafts-panel .patient-overview__item.is-open-document .patient-overview__item-date {
  color: #fff;
}

.drafts-panel .patient-overview__item-title {
  min-width: 0;
}

.drafts-panel .patient-overview__item-date {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--grey-500);
}

.drafts-panel .patient-overview__item-title-text {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline__marker {
  position: absolute;
  left: 20px;
  right: 0;
  height: 46px;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.timeline__label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  background: var(--grey-50);
  border-radius: 4px;
  padding: 4px 8px;
}

.timeline__title {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--grey-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Marks a nalaz written in the app (an editable "draft" document) wherever it's listed — timeline,
   undated list, List tab — so it's clear at a glance it opens on the paper for editing. */
.draft-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  border-radius: 4px;
  background: var(--yellow-light);
  color: #856404;
  vertical-align: -3px;
}

.timeline__marker:hover { text-decoration: none; }
.timeline__marker:hover .timeline__title { color: var(--blue-mid); }

.timeline__subtitle {
  font-size: 11px;
  line-height: 14px;
  font-style: italic;
  color: var(--grey-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timeline__marker.timeline__label--active .timeline__label,
.timeline__group-item.timeline__label--active {
  background: var(--blue-light);
}

.timeline__marker.timeline__label--active .timeline__title,
.timeline__group-item.timeline__label--active .timeline__title {
  color: var(--blue-mid);
}

/* Persistent "this is the document currently open in the detail panel" marker — set by
   active_document_controller, distinct from the transient hover state above (timeline__label--active)
   which clears on mouseleave. Shared across the timeline dots/labels and the List tab's rows. */
.timeline__dot.is-open-document {
  background: var(--blue-mid);
  box-shadow: 0 0 0 1px var(--blue-mid), 0 0 0 4px var(--blue-light);
}

.timeline__marker.is-open-document .timeline__label,
.timeline__group-item.is-open-document {
  background: var(--blue-accent);
}

.timeline__marker.is-open-document .timeline__title,
.timeline__marker.is-open-document .timeline__subtitle,
.timeline__group-item.is-open-document .timeline__title,
.timeline__group-item.is-open-document .timeline__subtitle {
  color: #fff;
}

.doc-list__item.is-open-document {
  background: var(--blue-accent);
}

.doc-list__item.is-open-document .doc-list__type,
.doc-list__item.is-open-document .doc-list__subtitle {
  color: #fff;
}

/* ─── Timeline: clustered labels ─────────────────────────────── */
.timeline__group {
  position: absolute;
  left: 20px;
  right: 0;
  border: 1px solid var(--grey-200);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  background: var(--grey-50);
}

.timeline__group-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 42px;
  padding: 0 8px;
  text-decoration: none;
  border-bottom: 1px solid var(--grey-100);
}

.timeline__group-item:last-child { border-bottom: none; }

.timeline__group-item:hover { text-decoration: none; }
.timeline__group-item:hover .timeline__title { color: var(--blue-mid); }

.timeline__undated {
  margin: 16px 16px 0;
  padding-top: 12px;
  border-top: 1px solid var(--grey-100);
}

/* Same contained, rounded "badge" look .timeline__label gives a dated document, rather than
   .doc-list__item's own plain flush-edge list-row style (borrowed from a different context,
   uploads/show.html.erb's wizard sidebar) — a full-bleed sharp-cornered blue fill read as a much
   bigger change than how an open document looks anywhere else in this same sidebar. */
.timeline__undated .doc-list__item {
  background: var(--grey-50);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 4px;
}

.timeline__undated .doc-list__item:hover { background: var(--blue-light); }

.timeline__undated .doc-list__item.is-open-document { background: var(--blue-accent); }

.timeline__undated-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
  margin-bottom: 4px;
  padding: 0 2px;
}

/* ─── Patient workspace ──────────────────────────────────────────
   patients/show: header + sažetak + (timeline | detail panel) on the left, and the side panel
   (Asistent | Beleške, see side_panel_controller.js) as a full-height column on the right, flush
   with the window's top, right and bottom edges. From 1280px up it's docked and open; collapsed
   (or on a narrower window) it's a rail of icons, and there it opens as an overlay instead. */
/* The whole grid bleeds through .portal-main's own padding (36px/40px/64px) once here, rather
   than each of the three columns cancelling it separately — the middle column's 1fr track just
   absorbs the extra width/height this frees up, so all three sit flush against each other and
   against the true viewport edges, no gap anywhere. */
.patient-page {
  --side-panel-w: clamp(340px, 26vw, 460px);
  --side-rail-w: 56px;
  --left-panel-w: clamp(300px, 22vw, 380px);
  --left-rail-w: 56px;
  --left-col: var(--left-rail-w);
  --right-col: var(--side-rail-w);
  display: grid;
  grid-template-columns: var(--left-col) minmax(0, 1fr) var(--right-col);
  gap: 0;
  align-items: start;
  margin: calc(-1 * var(--main-pad-top, 36px)) calc(-1 * var(--main-pad-x, 40px)) calc(-1 * var(--main-pad-bottom, 64px));
}

.patient-page__main {
  /* Sticky + full-height, same trick as .left-panel/.side-panel, so the tab strip (a normal,
     non-shrinking flex child) stays put while .detail-tabs__frame — the only flex-growing
     child — becomes the sole scrolling region below it. */
  position: sticky;
  top: 0;
  height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.patient-summary {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 14px 20px;
}

.patient-summary__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.patient-summary__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--grey-700);
}

.patient-summary__source {
  font-size: 12px;
  color: var(--grey-700);
}

/* One item per line, read as a sentence: "Dijagnoze: …" — label and value flow together rather
   than being aligned into columns. */
.patient-summary__row {
  padding: 2px 0;
  font-size: 14px;
  line-height: 1.5;
}

.patient-summary__row dt,
.patient-summary__row dd { display: inline; }

.patient-summary__row dt {
  font-weight: 600;
  color: var(--grey-900);
}

.patient-summary__row dt::after { content: ": "; }

.patient-summary__row dd { color: var(--grey-700); }

.patient-summary--compact {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0 18px;
  margin-bottom: 20px;
}

.patient-summary--compact .patient-summary__row {
  padding: 1px 0;
  font-size: 12.5px;
  line-height: 1.4;
}

/* The one way back to the patients list, now that the portal's own nav is hidden on this page —
   patients/_left_panel, the very first thing in the scrollable content, level with
   .left-panel__collapse (.left-panel__scroll's own padding-top puts it there directly — see
   .left-panel__patient below for where the old 36px of clearance moved to instead). */
.left-panel__back {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 18px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grey-700);
}

.left-panel__back:hover { color: var(--grey-900); }

/* Patient name/meta, right under .left-panel__back now — patients/_left_panel, replacing what
   used to be its own full-width header bar in the main column. */
.left-panel__patient {
  padding: 0 18px;
  margin-top: 22px;
  margin-bottom: 20px;
}

.left-panel__patient-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0; /* overrides the global h2's own 16px */
  color: var(--blue-mid);
  letter-spacing: -.2px;
}

.left-panel__patient-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--grey-700);
}

.left-panel__patient-actions {
  margin-top: 8px;
}

/* Just .detail-tabs now — the doc-list moved out to .left-panel, a top-level column of
   .patient-page instead of nested here (experimental, see left_panel_controller.js). */
.workspace {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Mirrors .side-panel below almost exactly, just docked on the opposite edge, and with a single
   pane (the doc-list) rather than tabbed ones — see left_panel_controller.js. */
.left-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #fff;
  border-right: 1px solid var(--grey-200);
}

.left-panel__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
}

.left-panel__rail-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grey-100);
  border: none;
  border-radius: 10px;
  color: var(--grey-700);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.left-panel__rail-btn:hover { background: var(--grey-200); color: var(--grey-900); }

.left-panel__body {
  position: relative;
  display: none;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

/* Everything below the collapse button, as one scroll area — the patient name/sažetak are tall
   enough now, on top of the doc-list's own content, that the panel as a whole needs to scroll
   sometimes, not just the timeline within it (which still caps itself separately, see
   .timeline-panel's own max-height). */
.left-panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  /* No horizontal padding here — .doc-list's own content (drafts-panel, the Istorija title,
     .timeline-panel) already carries its own 18px inset; .left-panel__patient and the compact
     summary below match that same 18px themselves instead, so everything lines up. */
  padding: 14px 0 20px; /* top level with .left-panel__collapse, floating over this corner */
}

/* .doc-list's own card look (border/shadow/sticky) is for sitting beside the detail panel — here
   it fills the panel body flush instead, same as the right side's own panes (chat/notes) do. */
.left-panel__body .doc-list {
  position: static;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.patient-page.workspace--left-open .left-panel__body { display: flex; }

.left-panel__collapse {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 6px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--grey-700);
  line-height: 0;
  cursor: pointer;
}

.left-panel__collapse:hover {
  color: var(--grey-900);
  background: var(--grey-100);
}

@media (min-width: 1280px) {
  .patient-page.workspace--left-open { --left-col: var(--left-panel-w); }
  .patient-page.workspace--left-open .left-panel__rail { display: none; }
}

@media (max-width: 1279px) {
  .patient-page.workspace--left-open .left-panel__body {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: min(420px, 92vw);
    height: 100vh;
    border-right: 1px solid var(--grey-200);
    box-shadow: var(--shadow-md);
  }
}

/* .patient-page itself bleeds through .portal-main's padding now — this just needs to fill its
   own grid column, full height. */
.side-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--grey-200);
}

.side-panel__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
}

.side-panel__rail-btn {
  width: 40px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .15s;
}

.side-panel__rail-btn--expand { background: var(--grey-100); color: var(--grey-700); }
.side-panel__rail-btn--expand:hover { background: var(--grey-200); color: var(--grey-900); }

.side-panel__body {
  display: none;
  flex-direction: column;
  height: 100%;
  background: #fff;
}

.patient-page.workspace--panel-open .side-panel__body { display: flex; }

@media (min-width: 1280px) {
  .patient-page.workspace--panel-open { --right-col: var(--side-panel-w); }
  .patient-page.workspace--panel-open .side-panel__rail { display: none; }
}

@media (max-width: 1279px) {
  .patient-page.workspace--panel-open .side-panel__body {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    width: min(520px, 92vw);
    height: 100vh;
    border-left: 1px solid var(--grey-200);
    box-shadow: var(--shadow-md);
  }
}

.side-panel__tabs {
  display: flex;
  align-items: stretch;
  min-height: 49px; /* a tab's own height (padding + content) — reserved even with every tab closed */
  padding: 0 10px 0 8px;
  border-bottom: 1px solid var(--grey-100);
}

/* The tabs themselves — scrolls horizontally on its own once there are enough of them (see
   .side-panel__tab's own flex-shrink: 0), same idea as the center pane's own tab strip
   (.detail-tabs__bar). .side-panel__collapse, a sibling rather than a child of this, stays outside
   it and always reachable regardless of how many tabs there are. */
.side-panel__tab-list {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  /* Without this, the spec coerces overflow-y to auto too (since overflow-x isn't "visible") — and
     the tabs' own margin-bottom: -1px is just enough vertical overflow to actually trigger it. */
  overflow-y: hidden;
  scrollbar-width: thin;
}

.side-panel__tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 7px;
  margin-bottom: -1px;
  padding: 16px 12px 13px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--grey-700);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.side-panel__tab:hover { color: var(--grey-900); }

.side-panel__tab--assistant.side-panel__tab--active {
  color: var(--blue-mid);
  border-bottom-color: var(--blue-accent);
}

.side-panel__tab--notes.side-panel__tab--active {
  color: var(--amber-text);
  border-bottom-color: var(--amber);
}

.side-panel__tab--ddx.side-panel__tab--active {
  color: var(--green);
  border-bottom-color: var(--green);
}

.side-panel__tab--validation.side-panel__tab--active {
  color: var(--purple);
  border-bottom-color: var(--purple);
}

.side-panel__tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--grey-500);
}

.side-panel__tab-close:hover {
  background: var(--grey-200);
  color: var(--grey-900);
}

/* "+" itself: always here, right after the last tab, same as the center pane's own "+"
   (detail_tabs_controller.js#newTabEl) — its own content is the picker pane below, not a popup
   menu. .side-panel__collapse's own margin-left: auto is what pushes it all the way to the strip's
   far right instead. */
.side-panel__tab--picker {
  flex: 0 0 auto;
  justify-content: center;
  margin-left: 4px;
  padding: 0;
  width: 32px;
}

.side-panel__tab--picker.side-panel__tab--active {
  color: var(--grey-900);
  border-bottom-color: var(--grey-500);
}

/* The "+" tab's own content (side_panel_controller.js#openPicker) — every widget, open or not,
   reusing patients/new_document's own option-card grid (naturally collapses to one column at this
   panel's width). */
.side-panel__pane--picker .new-document-picker__grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 0;
  padding: 16px;
}

.side-panel__collapse {
  align-self: center;
  margin-left: auto;
  padding: 6px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--grey-700);
  line-height: 0;
  cursor: pointer;
}

.side-panel__collapse:hover {
  color: var(--grey-900);
  background: var(--grey-100);
}

.side-panel__pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.side-panel__pane[hidden] { display: none; }

/* Default detail panel content (patients/_detail_panel_placeholder) */
.patient-overview__section + .patient-overview__section { margin-top: 24px; }

.patient-overview__list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--grey-100);
  border-radius: var(--radius);
}

.patient-overview__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--grey-100);
  color: inherit;
  text-decoration: none;
}

.patient-overview__item:last-child { border-bottom: none; }
.patient-overview__item:hover { background: var(--blue-light); text-decoration: none; }

.patient-overview__item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--grey-900);
}

.patient-overview__item-meta {
  font-size: 12px;
  color: var(--grey-700);
  white-space: nowrap;
}

.patient-overview__item-summary {
  grid-column: 1 / -1;
  font-size: 13px;
  font-style: italic;
  color: var(--grey-500);
}

.patient-overview .empty-state { padding: 40px 0 20px; }

.patient-overview__cta {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ─── New-document picker (patients/new_document, opened from the tab strip's "+") ───────────── */
.new-document-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.new-document-picker__option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.new-document-picker__option:hover {
  border-color: var(--blue-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

/* "Uvezi dokument" wraps a modal (data-controller="modal quick-upload-modal") around its card —
   display: contents so that wrapper doesn't itself become an extra grid item alongside the two
   plain <a> options either side of it; the actual card is the trigger <button> inside it. */
.new-document-picker__option-wrapper {
  display: contents;
}

.new-document-picker__icon {
  color: var(--blue-accent);
  margin-bottom: 4px;
}

.new-document-picker__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--grey-900);
}

.new-document-picker__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-700);
}

/* ─── Quick upload modal (patients/new_document.html.erb + quick_uploads/*) ──────────────────── */
.upload-modal {
  max-width: 420px;
}

.upload-modal__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 20px;
  border: 1.5px dashed var(--grey-200);
  border-radius: var(--radius);
  color: var(--grey-700);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.upload-modal__dropzone:hover {
  border-color: var(--blue-accent);
  background: var(--blue-light);
}

.upload-modal__dropzone-text {
  font-size: 13.5px;
}

.upload-modal__camera-trigger {
  display: block;
  margin: 10px auto 0;
  text-align: center;
}

/* Still a real, focusable, keyboard-operable input — just visually hidden (the classic
   clip-rect technique) rather than `hidden`, which is less reliably click-through-label in every
   browser. Its native change event is the whole interaction (see quick_upload_trigger_controller.js) —
   no visible "choose file" button/filename anywhere. */
.new-document-picker__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.upload-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 36px 20px;
  text-align: center;
}

.upload-processing__spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border: 3px solid var(--blue-light);
  border-top-color: var(--blue-accent);
  border-radius: 50%;
  animation: annotate-spin .8s linear infinite;
}

.upload-processing__text {
  font-size: 14px;
  color: var(--grey-700);
}

.upload-processing--error .detail-panel__title {
  margin-bottom: 8px;
}

.upload-processing__error {
  max-width: 420px;
  font-size: 13.5px;
  color: var(--red);
}

.upload-processing__actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ─── Middle-column tabs (detail_tabs_controller.js) ─────────────
   VS Code style, over the panel's left edge: any number of tabs, all equal, shrinking as more
   open (down to a floor, past which the bar scrolls horizontally rather than shrink further) —
   same as a browser's own tab strip. The active tab is white and sits over the panel's top
   border, so it and the sheet below read as one piece. An unpinned ("preview") tab's title is
   italic; double-clicking a tab pins it. */
.detail-tabs {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* One flex row, exactly as before — "+" (detail_tabs_controller.js's #newTabEl) is just the last
   thing #render appends after this.tabs, not a separate element outside this scroll area, so it
   sits right after the last tab and the one scrollbar (only once tabs actually overflow) stays
   exactly where it always was, at the row's own right edge. */
.detail-tabs__bar {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  overflow-x: auto;
  /* Without this, the spec coerces overflow-y to auto too (since overflow-x isn't "visible") — and
     .detail-tab--active's own margin-bottom: -1px/height: 41px is just enough vertical overflow to
     actually trigger it (same fix as .side-panel__tab-list). */
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* A turbo-frame with no display rule of its own defaults to inline, which breaks the flex/scroll
   math below — force it to behave as a normal block-level flex child. */
.detail-tabs__frame {
  display: block;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.detail-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Sized to its own title by default (flex-basis: auto, no grow) — like VS Code, a lone short tab
     stays short rather than stretching to fill the bar. Only shrinks (down to min-width, past
     which the title ellipsizes) once there are enough tabs to run out of room; never grows past
     its own content, even with plenty of empty bar to the right. */
  flex: 0 1 auto;
  min-width: 84px;
  max-width: 220px;
  height: 40px;
  padding: 0 8px 0 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0; /* square, now that everything sits flush with no gaps around it */
  background: transparent;
  color: var(--grey-700);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.detail-tab:hover { background: var(--grey-100); color: var(--grey-900); }

.detail-tab--active,
.detail-tab--active:hover {
  z-index: 2;
  margin-bottom: -1px;
  height: 41px;
  background: #fff;
  border-color: var(--grey-200);
  color: var(--grey-900);
}

.detail-tab--preview .detail-tab__title { font-style: italic; }

/* No color of its own — inherits .detail-tab's, same as every other idle/hover/active tab. */
.detail-tab--new {
  flex: 0 0 auto;
  min-width: 0;
  width: 36px;
  padding: 0;
  justify-content: center;
}

.detail-tab__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-tab__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--grey-700);
  cursor: pointer;
}

.detail-tab__close:hover { background: var(--grey-200); color: var(--grey-900); }

/* The sheet under the tabs: whatever the active tab loaded into the frame. min-height: 100% so a
   short document (or the placeholder/picker) still spans the full frame instead of leaving bare
   grey below it — matching the timeline and side panel, which are always full-height. box-sizing:
   border-box so the 100% includes this element's own border, same as the frame's content box. */
.detail-tabs__frame > .detail-panel {
  position: relative;
  z-index: 1;
  border-top-left-radius: 0;
  min-height: 100%;
  box-sizing: border-box;
}

/* patients/organize.html.erb opened as a tab (see organize-tree-column--embedded above): same
   full-height intent as .detail-panel just above, reached through the extra
   .wizard-step > .show-layout nesting this view has instead of being a .detail-panel itself. The
   left and right halves also read as one continuous panel here — no gap between them, square
   where they actually touch — rather than the two separate boxes they are in the upload wizard's
   own organizing.html.erb (untouched, scoped out by this selector requiring detail-tabs__frame). */
.detail-tabs__frame > .wizard-step {
  min-height: 100%;
  box-sizing: border-box;
}

.detail-tabs__frame .show-layout {
  flex: 1;
  min-height: 0;
  gap: 0;
  align-items: stretch;
}

/* The column's own two boxes keep their natural heights except Unassigned (the last one), which
   grows to reach the stretched column's bottom edge — otherwise its corner below wouldn't land on
   the same line as the detail panel's. */
.detail-tabs__frame .organize-tree__unassigned-box {
  flex: 1;
  border-bottom-right-radius: 0;
}

.detail-tabs__frame .organize-tree-box {
  border-top-right-radius: 0;
}

.detail-tabs__frame .detail-panel-wrapper {
  display: flex;
  flex-direction: column;
}

.detail-tabs__frame .detail-panel-wrapper > .detail-panel {
  flex: 1;
  box-sizing: border-box;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ─── The paper (manual_documents/_paper) ───────────────────────
   The visit and every hand-written nalaz: one full-width page, saved as the doctor types. */
.paper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 120px);
}

.paper__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.paper__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}

/* Reads as a plain heading at rest (readonly, no border/background, default cursor — nothing
   hints it's an input until you look for it); double-click (paper#editTitle) drops readonly and
   switches it into an obviously-active text field, same as any inline-rename control. Enter or
   clicking away (paper#titleKeydown/#commitTitle) saves and reverts the look; Escape cancels. */
/* A plain heading, exactly like any other document's title, wrapping across lines the same way
   (min-width: 0 on a flex item, so it can actually shrink and wrap instead of overflowing) — not
   an input of any kind, so there's nothing to look "disabled" at rest. Double-click
   (paper#editTitle) turns it into a real contenteditable text field, only then showing any edit
   affordance (border); Enter or clicking away commits it and turns contenteditable back off,
   Escape cancels. */
.paper__title {
  min-width: 0;
  flex: 1 1 auto;
  padding: 2px 4px;
  margin: -2px -4px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--blue-mid);
}

.paper__title--editing {
  cursor: text;
  border-color: var(--blue-accent);
  background: #fff;
  outline: none;
}

.paper__meta {
  font-size: 13px;
  color: var(--grey-700);
}

.paper__status {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green);
}

.paper__updated {
  font-size: 12.5px;
  color: var(--grey-500);
}

.paper__tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.paper__tools .template-picker { margin: 0; }

/* MKB-10 diagnosis search on the paper — the template picker's popup, wider for long names */
.template-picker__panel.mkb-picker__panel { width: min(460px, calc(100vw - 32px)); }
.mkb-picker .template-picker__list { max-height: 340px; }

.mkb-picker__item {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--grey-900);
  cursor: pointer;
}

.mkb-picker__item:hover,
.mkb-picker__item--active {
  background: var(--blue-light);
  color: var(--blue-mid);
}

.mkb-picker__code {
  flex: 0 0 48px;
  font-variant-numeric: tabular-nums;
}

.mkb-picker__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mkb-picker__latin {
  color: var(--grey-500);
  font-size: 12px;
}

.paper__inserts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.paper__inserts-label {
  margin-right: 4px;
  font-size: 13px;
  color: var(--grey-700);
}

.paper__insert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  background: #fff;
  color: var(--grey-700);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.paper__insert:hover {
  border-color: var(--blue-accent);
  color: var(--blue-mid);
  background: var(--blue-light);
}

.paper__error {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--red-light);
  color: var(--red);
  font-size: 13.5px;
}

.paper trix-toolbar { position: sticky; top: 0; z-index: 1; background: #fff; }

.paper__editor {
  flex: 1;
  min-height: 55vh;
  padding: 16px 18px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 15.5px;
  line-height: 1.75;
}

.paper__editor:focus { outline: none; border-color: var(--blue-accent); }


/* The Asistent's proposed, not-yet-saved rewrite sits here side by side with what's currently
   in the editor (hidden while this shows, see paper_controller.js#showProposal) — two plain
   read-only columns, no diff highlighting, just enough to compare and decide. */
.paper-proposal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.paper-proposal__hint {
  font-size: 13px;
  color: var(--grey-700);
}

.paper-proposal__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 760px) {
  .paper-proposal__columns { grid-template-columns: 1fr; }
}

.paper-proposal__column-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
}

.paper-proposal__content {
  min-height: 55vh;
  padding: 16px 18px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font-size: 15.5px;
  line-height: 1.75;
  background: var(--grey-50);
  overflow-y: auto;
}

/* The proposed side reads as the "new" one — a tinted border, on top of the diff highlighting
   below, is enough to tell the columns apart at a glance. */
.paper-proposal__column:last-child .paper-proposal__content {
  background: #fff;
  border-color: var(--blue-accent);
}

/* Word-level diff highlighting (see ProposalDiff) — del on the "Trenutno" side, ins on "Predlog".
   diff-break marks a paragraph split/merge inline, right where it happened, rather than as a
   whole extra paragraph in each column's color — see ProposalDiff's own class comment for why. */
.paper-proposal__content del.diff-del {
  background: var(--red-light);
  color: var(--red);
  text-decoration: line-through;
}

.paper-proposal__content ins.diff-ins {
  background: var(--green-light);
  color: var(--green);
  text-decoration: none;
}

.paper-proposal__content .diff-break {
  display: inline-block;
  margin: 0 2px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.75em;
  vertical-align: middle;
}

.paper-proposal__content .diff-break.diff-del { background: var(--red-light); color: var(--red); }
.paper-proposal__content .diff-break.diff-ins { background: var(--green-light); color: var(--green); }

.paper-proposal__actions {
  display: flex;
  gap: 10px;
}

/* "Upiši u karton" in progress: a modal-style overlay over the whole window until the page moves on. */
.paper__finishing {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 30, .45);
  backdrop-filter: blur(2px);
}

.paper__finishing[hidden] { display: none; }

.paper__finishing-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 300px;
  padding: 28px 36px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  text-align: center;
}

.paper__finishing-box strong { font-size: 16px; color: var(--grey-900); }
.paper__finishing-box span:last-child { font-size: 13.5px; color: var(--grey-700); }

.paper__spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
  border: 3px solid var(--blue-light);
  border-top-color: var(--blue-accent);
  border-radius: 50%;
  animation: annotate-spin .8s linear infinite;
}

.paper__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-100);
}

.paper__hint {
  font-size: 13px;
  color: var(--grey-700);
}

.paper__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The "+ Novi" / "+ Nova beleška" action at the top of each side-panel tab. */
.panel-new-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: #fff;
  color: var(--blue-mid);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.panel-new-button:hover { background: var(--blue-light); border-color: var(--blue-accent); }

.panel-new-button--notes { color: var(--amber-text); }
.panel-new-button--notes:hover { background: var(--amber-light); border-color: var(--amber); }

.panel-new-button--busy {
  color: var(--grey-500);
  cursor: default;
}

.panel-new-button--busy svg { animation: annotate-spin .8s linear infinite; }

/* Empty-conversation screen: what the assistant can do, plus a few questions to start from. */
.chat-panel__welcome {
  padding: 24px 18px 0;
}

.chat-panel__welcome-text {
  font-size: 14px;
  color: var(--grey-700);
}

.chat-panel__suggestions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
}

.chat-panel__suggestion {
  padding: 8px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  background: #fff;
  color: var(--grey-900);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}

.chat-panel__suggestion:hover { border-color: var(--blue-accent); background: var(--blue-light); }

/* ─── Side-panel tab bar + history list (both tabs) ─────────────
   Each tab: one bar with a clearly labelled history button ("Istorija razgovora" / "Sve beleške")
   and the "+ new" button; the history opens as a list over the whole tab. */
.side-panel__pane { position: relative; }

.panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 58px; /* .panel-history opens right under it */
  padding: 0 16px;
  border-bottom: 1px solid var(--grey-100);
}

.panel-bar__history {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: #fff;
  color: var(--grey-900);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.panel-bar__history:hover,
.panel-bar__history[aria-expanded="true"] { background: var(--grey-100); }

.panel-bar__count { color: var(--grey-700); font-weight: 500; }

.panel-bar__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--grey-900);
}

/* ─── DDx (ddx_panel_controller.js) ──────────────────────────────
   One condition per accordion row — a table would need columns too wide for this panel, so the
   for/against/consider breakdown only shows once a row is expanded (the first, most likely one,
   starts that way; the rest are one click away — see #render). */
.ddx-panel__meta {
  padding: 10px 16px 0;
  font-size: 12px;
  color: var(--grey-700);
}

.ddx-panel__empty {
  padding: 20px 16px;
  font-size: 13.5px;
  color: var(--grey-700);
}

.ddx-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 8px 16px;
}

.ddx-condition + .ddx-condition {
  margin-top: 2px;
  border-top: 1px solid var(--grey-100);
}

.ddx-condition__header {
  display: flex;
  align-items: flex-start; /* the name can now wrap to 2+ lines — align to its top, not its middle */
  gap: 8px;
  width: 100%;
  padding: 12px 8px;
  background: none;
  border: none;
  color: var(--grey-900);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.ddx-condition__header:hover { background: var(--grey-100); }

.ddx-condition__name {
  flex: 1;
  min-width: 0;
  /* The condition name is the one thing here that must never be cut off — wraps to a second line
     rather than the old ellipsis truncation, which could hide the actual diagnosis. */
  white-space: normal;
}

.ddx-condition__badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.ddx-condition__badge--likely { background: var(--green-light); color: var(--green); }
.ddx-condition__badge--possible { background: var(--amber-light); color: var(--amber-text); }
.ddx-condition__badge--unlikely { background: var(--grey-100); color: var(--grey-700); }
.ddx-condition__badge--warning { background: var(--red-light); color: var(--red); }

.ddx-condition__caret {
  flex-shrink: 0;
  color: var(--grey-500);
  transition: transform .15s;
}

.ddx-condition__caret--collapsed { transform: rotate(-90deg); }

.ddx-condition__content {
  padding: 0 8px 14px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ddx-condition__section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
  margin-bottom: 3px;
}

.ddx-condition__list {
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-900);
}

.ddx-condition__list li {
  position: relative;
  padding-left: 12px;
}

.ddx-condition__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--grey-500);
}

.ddx-condition__list-empty {
  color: var(--grey-500);
}

.ddx-condition__list-empty::before { display: none; }

/* Compact inline citation marker (ApplicationHelper#citation_marker/citation_marker_controller.js) —
   "[N]" right after the claim it supports, opening a small popover instead of a block-level badge
   that would push the rest of the list (or chat reply) down every time one's opened. Used by both
   the DDx panel, chat replies and the summary sidebar. The popover is position: fixed, placed by
   citation_marker_controller.js#place from the marker's own rect — absolute positioning left it
   clipped by the scrolling sidebar it sits in and painted under the document pane beside it. */
.citation-marker {
  position: relative;
  display: inline-block;
}

.citation-marker__button {
  background: none;
  border: none;
  padding: 0;
  color: var(--blue-mid);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  vertical-align: text-top;
  cursor: pointer;
}

.citation-marker__button:hover { text-decoration: underline; }

.citation-marker__button:disabled {
  opacity: .6;
  cursor: default;
}

.citation-marker__popover {
  position: fixed;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  max-width: 260px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* .left-panel/.side-panel are position: sticky, which starts their own stacking context — so the
   popover's z-index only counts inside its column, and .patient-page__main (also sticky, later in
   the DOM) paints over it. Lift the column itself, only while one of its popovers is open. */
.left-panel:has(.citation-marker__popover:not([hidden])),
.side-panel:has(.citation-marker__popover:not([hidden])) {
  z-index: 220;
}

.citation-marker__link {
  display: block;
  font-size: 12px;
  color: var(--grey-700);
  background: var(--grey-50);
  border: 1px solid var(--grey-200);
  border-radius: 6px;
  padding: 6px 10px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.citation-marker__link:hover {
  background: var(--blue-light);
  color: var(--blue-mid);
  text-decoration: none;
}

.citation-marker__note {
  padding: 2px 4px 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--amber-text);
}

/* ─── AI disclaimer (ApplicationHelper#ai_disclaimer) ─────────────
   Top of every chat reply and of the DDx/Validacija panes. Amber, not red — a standing caution,
   not an error; .ddx-condition__badge--warning keeps red for "must rule out". */
.ai-disclaimer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 10px 16px 0;
  padding: 8px 10px;
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: 8px;
  color: var(--amber-text);
}

.chat-bubble .ai-disclaimer { margin: 0 0 10px; }

.ai-disclaimer__badge {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--amber);
  font-size: 11px;
  font-weight: 700;
}

.ai-disclaimer__text {
  font-size: 12px;
  line-height: 1.45;
}

/* ─── AI consent (patients/_ai_consent) ───────────────────────────
   Stands in for an AI pane until the doctor has accepted — scrolls on its own if the panel is short. */
.ai-consent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  color: var(--grey-900);
  font-size: 13.5px;
  line-height: 1.5;
}

.ai-consent__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
}

.ai-consent__title .ai-disclaimer__badge { color: var(--amber-text); }

.ai-consent__intro { margin: 0 0 10px; }

.ai-consent__points {
  margin: 0 0 16px;
  padding: 12px 12px 12px 30px;
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: 8px;
  color: var(--amber-text);
}

.ai-consent__points li + li { margin-top: 6px; }

.ai-consent__check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ai-consent__check input { margin-top: 3px; flex-shrink: 0; }

.ai-consent__submit { width: 100%; justify-content: center; }

.ai-consent__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--grey-700);
}

/* The overall plan (DifferentialDiagnoser's own next_steps) — sits below every condition row,
   visually set apart (border-top) since it weighs the differential as a whole rather than
   belonging to any one entry. Reuses .ddx-condition__list's own bullet styling. */
.ddx-panel__next-steps {
  padding: 14px 16px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--grey-100);
}

.ddx-panel__next-steps-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
  margin-bottom: 8px;
}

/* ─── Validation (validation_panel_controller.js) ────────────────
   Three fixed category cards (not a dynamic list like DDx's conditions) — same accordion shape
   and classes (.ddx-condition*), reused as-is: collapsed shows just the name and an issue count
   or a clean checkmark, expanded shows the issue list (each colored red/yellow by severity) and
   the category's own suggested actions underneath. */
.ddx-condition__badge--count { background: var(--grey-100); color: var(--grey-700); }
.ddx-condition__badge--clean { background: var(--green-light); color: var(--green); }

.validation-issue--red::before { background: var(--red) !important; }
.validation-issue--yellow::before { background: var(--amber) !important; }

/* The drug SmPC's own URL (an external source, not a citation into the patient's own record —
   see ValidationsController's own comment) — opens in a new tab via a plain target="_blank" here
   (not MarkdownLinkRenderer, which only applies to markdown-rendered text) since this is built
   directly as an anchor element in JS, never passed through markdown. */
.validation-source-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--blue-mid);
  text-decoration: none;
  white-space: nowrap;
}

.validation-source-link:hover { text-decoration: underline; }

.panel-history {
  position: absolute;
  inset: 58px 0 0 0; /* under the tab's own .panel-bar, over everything else in the tab */
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.panel-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 4px;
  font-size: 14px;
  color: var(--grey-900);
}

.panel-history__close {
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--grey-700);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.panel-history__close:hover { background: var(--grey-100); color: var(--grey-900); }

.panel-history__search {
  margin: 8px 16px;
  padding: 8px 10px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
}

.panel-history__search:focus { outline: none; border-color: var(--blue-accent); }

.panel-history__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px 12px;
}

.panel-history__group {
  padding: 10px 8px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--grey-700);
}

.panel-history__item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 9px 8px;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.panel-history__item:hover { background: var(--blue-light); }
.panel-history__item--note:hover { background: var(--amber-light); }
.panel-history__item--current { background: var(--grey-100); }

.panel-history__item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--grey-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-history__item-date {
  font-size: 12px;
  color: var(--grey-700);
  white-space: nowrap;
}

.panel-history__item-preview {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--grey-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-history__empty {
  padding: 20px 8px;
  font-size: 13px;
  color: var(--grey-700);
  text-align: center;
}

/* The open conversation's title, under the Asistent bar. */
.chat-panel__current {
  padding: 10px 18px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--grey-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Beleške: the open note ───────────────────────────────────── */
.note-editor {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 12px;
}

.note-editor__title {
  width: 100%;
  padding: 4px 0;
  border: none;
  border-bottom: 1px solid transparent;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  color: var(--grey-900);
}

.note-editor__title:focus { outline: none; border-bottom-color: var(--amber); }
.note-editor__title::placeholder { color: var(--grey-500); font-weight: 600; }

.note-editor__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--grey-700);
}

.note-editor__status { color: var(--green); font-weight: 600; }

.note-editor__tag {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--green-light);
  color: var(--green);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}

.note-editor trix-toolbar .trix-button-group--file-tools,
.note-editor trix-toolbar .trix-button-group--history-tools { display: none; }

.note-editor__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 0;
  border: none;
  font-size: 14.5px;
  line-height: 1.65;
}

.note-editor__body:focus { outline: none; }

.note-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--grey-100);
}

.note-editor__convert { display: contents; max-width: none; }
.note-editor__convert .button { padding: 7px 14px; font-size: 13px; }

.note-editor__delete {
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--grey-700);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.note-editor__delete:hover:not(:disabled) { background: var(--red-light); color: var(--red); }
.note-editor__delete:disabled { opacity: .4; cursor: default; }

.chat-panel__chat-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chat-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chat-bubble {
  /* Capped in absolute px too — at 900px panel width, 85% alone would stretch lines
     uncomfortably wide for reading long responses. */
  max-width: min(85%, 640px);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
}

.chat-bubble--agent {
  align-self: flex-start;
  background: var(--grey-100);
  color: var(--grey-900);
  border-bottom-left-radius: 4px;
}

.chat-retry-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  background: var(--red-light);
  color: var(--red);
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.chat-retry-button:hover { background: #fbe1dc; }

.chat-bubble--user {
  align-self: flex-end;
  background: var(--blue-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-panel__input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px;
  border-top: 1px solid var(--grey-100);
}

.chat-panel__textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  max-height: 140px;
}

.chat-panel__textarea:focus {
  outline: none;
  border-color: var(--blue-accent);
}

.chat-panel__send {
  padding: 9px 16px;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
}

.typing-dots__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grey-500);
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing-dots__dot:nth-child(2) { animation-delay: .15s; }
.typing-dots__dot:nth-child(3) { animation-delay: .3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ─── Import finishing overlay (patient_uploads/_finishing) ─────
   While the summary is written after an import: the whole workspace blurred behind one loader —
   the same card as the paper's "Upisujem u karton" (.paper__finishing-box). */
.upload-finishing {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 16, 30, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: upload-finishing-in .2s ease-out;
}

@keyframes upload-finishing-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .upload-finishing { animation: none; }
}

.upload-finishing__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(340px, 100%);
  padding: 28px 32px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  text-align: center;
}

.upload-finishing__box strong { font-size: 16px; color: var(--grey-900); }
.upload-finishing__box span:last-child { font-size: 13.5px; color: var(--grey-700); }

/* .patient-page__main is position: sticky, which starts its own stacking context — a fixed
   overlay inside it (this one, or the paper's "Upisujem u karton") would otherwise sit under the
   side panels and the phone's bottom bar. Lift the whole column while one is showing. */
.patient-page__main:has(.upload-finishing, .paper__finishing:not([hidden])) { z-index: 400; }

/* ── "Snimak razgovora" (visit_recordings/show, see VisitRecording) ── */

.visit-recording { display: flex; flex-direction: column; gap: 14px; }

.visit-recording__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.visit-recording__controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: var(--grey-50);
}

.visit-recording__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.visit-recording__hint {
  font-size: 13px;
  color: var(--grey-700);
  margin-top: 4px;
}

.visit-recording__consent {
  margin: 8px 0;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--amber-light);
  color: var(--amber-text);
  border-radius: var(--radius);
}

.visit-recording__badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--grey-100);
  color: var(--grey-700);
}

.visit-recording__badge--listening {
  background: var(--red-light);
  color: var(--red);
  animation: visit-recording-pulse 1.6s ease-in-out infinite;
}

.visit-recording__badge--finished { background: var(--green-light); color: var(--green); }

@keyframes visit-recording-pulse {
  50% { opacity: .55; }
}

.visit-recording__qr summary,
.visit-recording__dialogue summary {
  font-size: 13px;
  color: var(--blue-accent);
  cursor: pointer;
}

.visit-recording__qr-body {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.visit-recording__qr-body .qr-code { width: 160px; height: 160px; flex-shrink: 0; }

.visit-recording .tabs__panel { padding-top: 12px; }

/* Prepis */
.visit-recording__transcript {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--grey-900);
}

.visit-recording__transcript:empty::before {
  content: attr(data-empty);
  color: var(--grey-500);
  font-size: 13px;
}

.visit-recording__segment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius);
}

.visit-recording__segment--playing { background: var(--blue-light); }
.visit-recording__segment--pending .visit-recording__segment-text { color: var(--grey-500); }
.visit-recording__segment--failed .visit-recording__segment-text { color: var(--red); font-style: italic; font-size: 12px; }

.visit-recording__play {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid var(--grey-200);
  border-radius: 50%;
  background: #fff;
  color: var(--grey-500);
  font-size: 9px;
  cursor: pointer;
}

.visit-recording__play:hover { border-color: var(--blue-accent); color: var(--blue-accent); }

/* Original */
.visit-recording__player {
  display: flex;
  align-items: center;
  gap: 12px;
}

.visit-recording__now-playing { font-size: 13px; color: var(--grey-700); }
.visit-recording__audio { width: 100%; margin-top: 10px; }

/* Anamneza */
.visit-recording__anamnesis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.visit-recording__processing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--grey-700);
}

.visit-recording__processing .paper__spinner { width: 14px; height: 14px; margin: 0; border-width: 2px; }

.visit-recording__summary-error { font-size: 13px; color: var(--red); }

.visit-recording__sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.visit-recording__section {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}

.visit-recording__section dt { font-weight: 600; color: var(--grey-700); font-size: 13px; }
.visit-recording__section dd { margin: 0; color: var(--grey-900); }

.visit-recording__dialogue ol {
  list-style: none;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.5;
}

.visit-recording__speaker { font-weight: 700; margin-right: 4px; }
.visit-recording__speaker::after { content: ":"; }
.visit-recording__turn--lekar .visit-recording__speaker { color: var(--blue-mid); }
.visit-recording__turn--pacijent .visit-recording__speaker { color: var(--green); }
.visit-recording__turn--drugo .visit-recording__speaker { color: var(--purple); }

@media (max-width: 640px) {
  .visit-recording__section { grid-template-columns: 1fr; gap: 2px; }
  .visit-recording__qr-body { flex-direction: column; align-items: flex-start; }
}

/* ── DICOM imaging study (documents/_dicom, dicom_viewer_controller.js) ── */

.dicom-viewer { display: flex; flex-direction: column; gap: 10px; }

.dicom-viewer__warning {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--amber-light);
  color: var(--amber-text);
  font-size: 13px;
}

.dicom-viewer__frame { display: flex; flex-direction: column; gap: 8px; background: #fff; }

.dicom-viewer__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.dicom-viewer__series[hidden] { display: none; }
.dicom-viewer__series { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-700); }
.dicom-viewer__tools { display: flex; gap: 4px; }
.dicom-viewer__tool--active { background: var(--blue-mid); color: #fff; }
.dicom-viewer__tool--active:hover:not(:disabled) { background: var(--blue-dark); }

.dicom-viewer__canvas {
  position: relative;
  height: 62vh;
  min-height: 360px;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}

.dicom-viewer__stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  cursor: crosshair;
  outline: none;
}

.dicom-viewer__overlay {
  position: absolute;
  padding: 8px 10px;
  max-width: 50%;
  color: #f5d76e;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-line;
  pointer-events: none;
  text-shadow: 0 0 3px #000;
}

.dicom-viewer__overlay--tl { top: 0; left: 0; }
.dicom-viewer__overlay--tr { top: 0; right: 0; text-align: right; }
.dicom-viewer__overlay--bl { bottom: 0; left: 0; }
.dicom-viewer__overlay--br { bottom: 0; right: 0; text-align: right; }

.dicom-viewer__message {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #fff;
  font-size: 14px;
  pointer-events: none;
}

.dicom-viewer__message[hidden] { display: none; }

.dicom-viewer__hint { margin: 0; font-size: 12px; color: var(--grey-500); }
.dicom-viewer__delete { align-self: flex-start; margin: 0; }

/* Full screen: the browser's own (:fullscreen), or — where there is none — the viewer filling the window. */
.dicom-viewer__frame:fullscreen,
.dicom-viewer__frame--expanded {
  padding: 10px;
  background: #111;
  color: #fff;
}

.dicom-viewer__frame--expanded {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.dicom-viewer__frame:fullscreen .dicom-viewer__canvas,
.dicom-viewer__frame--expanded .dicom-viewer__canvas {
  flex: 1;
  height: auto;
  min-height: 0;
}

.dicom-viewer__frame:fullscreen .dicom-viewer__series,
.dicom-viewer__frame--expanded .dicom-viewer__series { color: #ddd; }

.dicom-study { display: flex; flex-direction: column; gap: 10px; }

/* "Uporedi": the menu of studies to compare with, and the side-by-side full-screen overlay it opens. */
.dicom-compare { position: relative; }

.dicom-compare__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 280px;
  max-height: 50vh;
  margin: 4px 0 0;
  padding: 4px;
  overflow: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.dicom-compare__menu[hidden] { display: none; }

.dicom-compare__option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--grey-900);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.dicom-compare__option:hover { background: var(--blue-light); }

.dicom-comparison {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: #111;
  color: #fff;
}

.dicom-comparison__bar { display: flex; align-items: center; justify-content: space-between; }

.dicom-comparison__panes {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dicom-comparison__pane { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.dicom-comparison__title { margin: 0; font-size: 13px; color: #ddd; }

.dicom-comparison .dicom-viewer { flex: 1; min-height: 0; }
.dicom-comparison .dicom-viewer__frame { flex: 1; min-height: 0; background: transparent; }
.dicom-comparison .dicom-viewer__canvas { flex: 1; height: auto; min-height: 0; }
.dicom-comparison .dicom-viewer__series { color: #ddd; }

@media (max-width: 700px) {
  .dicom-comparison__panes { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}

.dicom-upload { display: flex; flex-direction: column; gap: 12px; }
.dicom-upload__progress { display: flex; flex-direction: column; gap: 6px; }
.dicom-upload__progress progress { width: 100%; }
.dicom-upload__status { margin: 0; font-size: 13px; color: var(--grey-700); }

/* Only undated documents: no divider above them, nothing to divide from */
.timeline-panel > .timeline__undated:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }

/* Diary questions hidden by an unmet "conditional" (diary_conditions_controller.js) */
[data-condition-field][hidden] { display: none !important; }

/* ─── Diary picker + one-screen prescribe form (diaries/picker, diaries/_prescribe_form) ─── */
.diary-picker__lead {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--grey-900);
}

.diary-picker {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.diary-picker__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  color: var(--grey-900);
  transition: border-color .15s, box-shadow .15s;
}

.diary-picker__card:hover,
.diary-picker__card:focus-visible {
  border-color: var(--blue-accent);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.diary-picker__card--custom { border-style: dashed; background: var(--grey-50); }

.diary-picker__name { font-size: 14px; font-weight: 600; color: var(--blue-mid); }
.diary-picker__summary { font-size: 13px; color: var(--grey-700); line-height: 1.45; flex: 1; }
.diary-picker__pattern { font-size: 12px; color: var(--grey-500); }

/* Not the global 640px column form — settings and the patient preview sit side by side. */
.diary-prescribe { container-type: inline-size; display: block; max-width: none; }

.diary-prescribe__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: 8px;
}

@container (min-width: 760px) {
  .diary-prescribe__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .diary-prescribe__preview { position: sticky; top: 12px; align-self: start; max-height: calc(100vh - 140px); overflow-y: auto; }
}

.diary-prescribe__pattern { font-size: 13px; color: var(--grey-700); line-height: 1.5; }
.diary-prescribe__pattern strong { color: var(--grey-900); }

.diary-prescribe__section { margin-top: 20px; }

.diary-prescribe__section h4,
.diary-prescribe__preview h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--grey-500);
  margin: 14px 0 8px;
}

.diary-prescribe__section h4:first-child,
.diary-prescribe__preview h4 { margin-top: 0; }

.diary-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.diary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid var(--grey-200);
  background: #fff;
  color: var(--grey-700);
}

.diary-chip--fixed { background: var(--grey-100); border-color: transparent; color: var(--grey-900); }
.diary-chip--fixed::before { content: "✓"; color: var(--green); font-weight: 700; }

.diary-chip--toggle { cursor: pointer; user-select: none; transition: background .15s, border-color .15s; }
.diary-chip--toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.diary-chip--toggle:hover { border-color: var(--blue-accent); }
.diary-chip--toggle:has(input:checked) { background: var(--blue-light); border-color: var(--blue-accent); color: var(--blue-mid); font-weight: 600; }
.diary-chip--toggle:has(input[type="checkbox"]:checked)::before { content: "✓"; }
.diary-chip--toggle:has(input:focus-visible) { outline: 2px solid var(--blue-accent); outline-offset: 2px; }

.diary-prescribe__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.diary-prescribe__dates label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-700);
}

.diary-prescribe__dates [hidden] { display: none; }

.diary-prescribe__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.diary-prescribe__back { font-size: 13px; }

.diary-prescribe__preview {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
}

.diary-readonly__options {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
}

.diary-readonly__options summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--blue-mid); }