/* ─── Clinic portal (sidebar layout) ─────────────────────────── */

.portal-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.portal-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--grey-200);
  color: var(--grey-700);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 14px;
  transition: width .15s;
}

/* Fixed (viewport) positioning, not absolute within .portal-sidebar — two reasons. First, the
   sidebar has overflow-y: auto, and per the CSS overflow spec, once one axis isn't visible the
   other computes to auto too, so anything bleeding past the sidebar's own edge would get clipped
   the same way the timeline's hover-date bubble was earlier — fixed positioning escapes that
   clipping since its containing block is the viewport, not the sidebar. Second, it
   keeps the button pinned to the same spot on screen as the sticky sidebar itself while the main
   content scrolls, rather than scrolling away with page content the way an absolutely-positioned
   descendant would. left is set per state below since it must sit on the sidebar's actual right
   edge, which moves between expanded and collapsed widths. */
.portal-sidebar__toggle {
  position: fixed;
  top: 96px;
  left: 247px; /* expanded sidebar is 260px wide — 260 - (26 / 2) */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--grey-500);
  cursor: pointer;
  z-index: 2;
  transition: left .15s, color .15s, border-color .15s;
}

.portal-sidebar__toggle:hover { color: var(--blue-mid); }

.portal-sidebar__toggle svg { transition: transform .2s; }

.portal-sidebar--collapsed .portal-sidebar__toggle {
  left: 55px; /* collapsed sidebar is 68px wide — 68 - (26 / 2) */
}

.portal-sidebar--collapsed .portal-sidebar__toggle svg { transform: rotate(180deg); }

.portal-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grey-900);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 4px 10px 20px;
}

.portal-sidebar__logo:hover { text-decoration: none; }

.portal-sidebar__logo span { display: flex; flex-direction: column; line-height: 1.3; }

.portal-sidebar__logo small {
  font-weight: 400;
  font-size: 12px;
  color: var(--grey-500);
}

/* Gold "admin preview" box shown while a super admin is impersonating */
.portal-impersonation {
  background: var(--yellow-light);
  border: 1px solid #e5c76b;
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 18px;
  font-size: 12px;
  color: #8a6d1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.portal-impersonation button {
  background: none;
  border: none;
  color: #8a6d1a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
}

.portal-impersonation button:hover { text-decoration: underline; }

/* ─── Sidebar nav ────────────────────────────────────────────── */
.portal-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.portal-nav__section {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-500);
  padding: 18px 10px 6px;
}

.portal-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius);
  color: var(--grey-700);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.portal-nav__item:hover { background: var(--grey-100); color: var(--grey-900); text-decoration: none; }

.portal-nav__item--active {
  background: var(--blue-light);
  color: var(--blue-mid);
}

.portal-nav__item--active:hover { background: var(--blue-light); color: var(--blue-mid); }

.portal-nav__item--disabled {
  color: var(--grey-500);
  opacity: .55;
  cursor: default;
}

.portal-nav__item--disabled:hover { background: none; color: var(--grey-500); }

.portal-nav__item em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--grey-100);
  color: var(--grey-500);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: auto;
}

.portal-sidebar__footer {
  padding-top: 14px;
  border-top: 1px solid var(--grey-100);
}

.portal-sidebar__user {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-500);
  padding: 0 10px 6px;
}

.portal-locale {
  font-size: 12px;
  color: var(--grey-500);
  padding: 0 10px 6px;
}

.portal-locale a { color: var(--grey-500); }
.portal-locale a.portal-locale--active { color: var(--blue-mid); font-weight: 700; }

.portal-login__locale {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: var(--grey-500);
}

.portal-login__signup {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--grey-700);
}

/* Solo doctor's free-trial countdown — sidebar footer and the doctor home bar */
.portal-trial {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--green-light);
  color: var(--green);
  font-size: 12px;
  font-weight: 600;
}

.portal-sidebar__footer .portal-trial { margin: 0 10px 10px; }

.portal-trial--ended {
  background: var(--amber-light);
  color: var(--amber-text);
}

.portal-sidebar__footer button {
  width: 100%;
  background: none;
  border: none;
  color: var(--grey-700);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
}

.portal-sidebar__footer button:hover { background: var(--grey-100); color: var(--grey-900); }

/* ─── Collapsed (rail) state ─────────────────────────────────── */
.portal-sidebar--collapsed {
  width: 68px;
  padding-left: 10px;
  padding-right: 10px;
}

/* One label class covers everything text-y that doesn't fit a narrow icon rail: the logo's
   wordmark, the impersonation banner, the nav section heading, every nav item's own label, and
   the whole footer (account name, locale switcher, logout) — each of those elements already
   carries this class directly in the layout, so hiding it here is the single point of control. */
.portal-sidebar--collapsed .portal-sidebar__label,
.portal-sidebar--collapsed .portal-nav__item em {
  display: none;
}

.portal-sidebar--collapsed .portal-sidebar__logo {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.portal-sidebar--collapsed .portal-nav__item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* ─── Main area ──────────────────────────────────────────────── */
.portal-main {
  /* Variables, not plain values: .patient-page bleeds back through exactly this padding
     (application.css), and portal_responsive.css shrinks it on smaller screens. */
  --main-pad-top: 36px;
  --main-pad-x: 40px;
  --main-pad-bottom: 64px;
  flex: 1;
  min-width: 0;
  padding: var(--main-pad-top) var(--main-pad-x) var(--main-pad-bottom);
  background: var(--grey-50);
}

.portal-page-header { margin-bottom: 24px; }

.portal-page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--grey-900);
}

.portal-page-header p { color: var(--grey-500); font-size: 14px; }

.portal-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey-500);
  margin: 32px 0 12px;
}

/* ─── Stat cards ─────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.stat-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.stat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stat-card__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--grey-500);
}

.stat-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card__icon--blue   { background: var(--blue-light); color: var(--blue-mid); }
.stat-card__icon--green  { background: var(--green-light); color: var(--green); }
.stat-card__icon--purple { background: #f1ecfd; color: #6b46c1; }

.stat-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--grey-900);
  line-height: 1.2;
}

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

/* ─── Content cards ──────────────────────────────────────────── */
.portal-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.portal-card h2 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.portal-card p { color: var(--grey-700); font-size: 14px; }

.portal-checklist {
  margin-top: 12px;
  padding-left: 20px;
  color: var(--grey-700);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ─── Page header with action ────────────────────────────────── */
.portal-page-header--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* ─── Status pills ───────────────────────────────────────────── */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
}

.pill--active   { background: var(--green-light); color: var(--green); }
.pill--inactive { background: var(--grey-100); color: var(--grey-500); }
.pill--step     { background: var(--blue-light); color: var(--blue-mid); }

/* ─── Table row actions ──────────────────────────────────────── */
.admin-table__actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.admin-table__actions-row form { margin: 0; }

.admin-table__icon-link {
  display: inline-flex;
  color: var(--grey-500);
  transition: color .15s;
}

.admin-table__icon-link:hover { color: var(--grey-900); }

.link-button--danger  { color: var(--red); }
.link-button--success { color: var(--green); }

/* ─── Modal (native <dialog>) ────────────────────────────────── */
.portal-modal {
  /* the global `* { margin: 0 }` reset kills the UA's `margin: auto`
     that centers <dialog>, so restore it */
  margin: auto;
  border: none;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 0;
  width: 100%;
  max-width: 560px;
  color: var(--grey-900);
}

.portal-modal::backdrop {
  background: rgba(10,16,30,.55);
  backdrop-filter: blur(2px);
}

.portal-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
}

.portal-modal__header h2 {
  font-size: 17px;
  font-weight: 700;
}

.portal-modal__close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--grey-500);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius);
}

.portal-modal__close:hover { background: var(--grey-100); color: var(--grey-900); }

.portal-modal__form { padding: 16px 24px 24px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ─── Add-document choice dialog ────────────────────────────── */
.document-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 24px 24px;
}

.document-choice__option {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.document-choice__option:hover {
  border-color: var(--blue-accent);
  background: var(--blue-light);
  text-decoration: none;
}

.document-choice__option strong {
  display: block;
  color: var(--grey-900);
  font-size: 14px;
}

.document-choice__option span {
  display: block;
  color: var(--grey-500);
  font-size: 13px;
  margin-top: 2px;
}

/* ─── Dashboard charts ───────────────────────────────────────── */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.chart-total {
  font-size: 13px;
  color: var(--grey-500);
  margin-bottom: 16px;
}

.chart-total strong { color: var(--grey-900); font-size: 15px; }

/* Column chart (one bar per day) */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
}

.chart-bars__col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.chart-bars__bar {
  width: 100%;
  border-radius: 2px 2px 0 0;
  background: var(--blue-accent);
  transition: background .15s;
}

.chart-bars__col:hover .chart-bars__bar { background: var(--blue-dark); }
.chart-bars__bar--empty { background: var(--grey-200); }
.chart-bars__col:hover .chart-bars__bar--empty { background: var(--grey-500); }

.chart-bars__axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--grey-500);
  margin-top: 6px;
}

/* Horizontal bar chart (per doctor) */
.chart-rows { display: flex; flex-direction: column; gap: 10px; }

.chart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.chart-row__label {
  flex: 0 0 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--grey-700);
}

.chart-row__track {
  flex: 1;
  height: 10px;
  background: var(--grey-100);
  border-radius: 999px;
  overflow: hidden;
}

.chart-row__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--blue-accent);
}

.chart-row__value {
  flex: 0 0 32px;
  text-align: right;
  font-weight: 600;
  color: var(--grey-900);
}

.chart-empty { font-size: 13px; color: var(--grey-500); }

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}

.pagination__info {
  font-size: 13px;
  color: var(--grey-500);
}

/* ─── Login page ─────────────────────────────────────────────── */
.portal-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.portal-login {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 32px;
}

.portal-login__brand {
  text-align: center;
  margin-bottom: 24px;
}

.portal-login__brand h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue-mid);
  margin-top: 10px;
}

.portal-login__brand p { font-size: 13px; color: var(--grey-500); }

.btn--block { display: block; width: 100%; }

/* ─── Activity log (audit) ───────────────────────────────────── */
/* application.css styles every `form` as a stacked 640px column — this is an
   inline filter bar, so undo that (row direction, no max-width) explicitly */
.audit-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  max-width: none;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.audit-filters__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.audit-filters__field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--grey-500);
}

.audit-filters__field select,
.audit-filters__field input {
  width: auto;
  min-width: 170px;
  padding: 8px 10px;
  font-size: 14px;
}

.audit-filters__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.audit-changes summary {
  cursor: pointer;
  color: var(--blue-mid);
  font-size: 13px;
}

.audit-changes ul {
  margin: 8px 0 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--grey-900);
}

.audit-changes li { margin-bottom: 2px; }

/* ─── Data export ────────────────────────────────────────────── */
/* Override the global 640px column form: use the full main-column width,
   with the two cards side by side and the button underneath */
.export-form {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 20px;
  align-items: start;
  max-width: none;
}

.export-form fieldset { margin: 0; }

.export-form input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 11px 32px;
}

@media (max-width: 1100px) {
  .export-form { grid-template-columns: 1fr; }
}

.export-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}

.export-option + .export-option { border-top: 1px solid var(--grey-100); }

.export-option input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--blue-accent);
}

.export-option span { display: flex; flex-direction: column; gap: 2px; }
.export-option strong { font-size: 14px; color: var(--grey-900); }
.export-option small { font-size: 12.5px; color: var(--grey-500); }

/* ─── Pregled queue (see Patient#exam_status) ────────────────── */
.pill--exam-awaiting { background: var(--amber-light); color: var(--amber-text); text-transform: none; }

.btn--exam {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--amber-text);
  font-weight: 600;
}
.btn--exam:hover { background: var(--amber-dark); }

/* ─── Doctor home: queue + searchable patient list, no sidebar ─ */
.doctor-home {
  max-width: 880px;
  margin: 0 auto;
}

.doctor-home__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.doctor-home__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--grey-900);
  font-weight: 700;
  text-decoration: none;
}
.doctor-home__logo:hover { text-decoration: none; }
.doctor-home__logo small { display: block; font-weight: 500; font-size: 12px; color: var(--grey-500); }

.doctor-home__account {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--grey-700);
}
.doctor-home__account form { margin: 0; }
.doctor-home__account .portal-locale { margin: 0; }
.doctor-home__help { font-weight: 600; color: var(--blue-mid); }

/* Pacijenti · Moji termini · Odsustva · Šabloni — the doctor's whole navigation */
.doctor-home__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--grey-200); margin-bottom: 24px; overflow-x: auto; }
.doctor-home__tab { padding: 10px 14px; font-weight: 600; color: var(--grey-500); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.doctor-home__tab:hover { color: var(--blue-mid); }
.doctor-home__tab--active { color: var(--blue-mid); border-bottom-color: var(--blue-mid); }
.doctor-home .time-off-card { max-width: 520px; }

/* "Šabloni" tab — a doctor's own izveštaj šabloni (DoctorTemplate) and their editor */
.doctor-templates { max-width: 1040px; }
.doctor-templates h1 { display: flex; align-items: center; gap: 10px; }
.doctor-templates__count { font-size: 12px; font-weight: 700; color: var(--blue-mid); background: var(--blue-light); border-radius: 999px; padding: 2px 9px; }
.doctor-templates__intro { margin: 4px 0 0; font-size: 14px; color: var(--grey-500); max-width: 60ch; }
.doctor-templates__new { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.template-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.template-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.template-card:hover { border-color: var(--blue-accent); box-shadow: var(--shadow-md); }
.template-card__head { padding: 14px 16px 8px; }
.template-card__title { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.template-card__link { color: var(--grey-900); text-decoration: none; }
.template-card__link:hover { text-decoration: none; }
.template-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.template-card__link:focus-visible { outline: none; }
.template-card:has(.template-card__link:focus-visible) { outline: 2px solid var(--blue-accent); outline-offset: 2px; }
.template-card__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--grey-500); }
/* The šablon itself, small — fading out rather than cut mid-line */
.template-card__preview {
  flex: 1;
  margin: 0 16px;
  padding: 10px 12px;
  max-height: 150px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey-700);
  background: var(--grey-50);
  border-radius: 6px;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
  mask-image: linear-gradient(to bottom, #000 65%, transparent);
  overflow-wrap: anywhere;
}
.template-card__preview .trix-content { font-size: inherit; line-height: inherit; }
.template-card__preview ul, .template-card__preview ol { padding-left: 16px; margin: 0; }
.template-card__preview strong { color: var(--grey-900); }
.template-card__actions { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 12px 16px; }
.template-card__actions form { margin: 0; }
.template-card__actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.template-card--new {
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  border: 1.5px dashed var(--grey-200);
  background: transparent;
  box-shadow: none;
  color: var(--blue-mid);
  font-weight: 600;
  text-decoration: none;
}
.template-card--new:hover { background: var(--blue-light); text-decoration: none; }
.template-card__new-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-light); }
.template-card--new:hover .template-card__new-icon { background: #fff; }

.template-empty { text-align: center; padding: 36px 20px; background: #fff; border: 1.5px dashed var(--grey-200); border-radius: 10px; }
.template-empty__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue-light); color: var(--blue-mid); margin-bottom: 10px; }
.template-empty__title { font-size: 16px; font-weight: 700; color: var(--grey-900); margin: 0; }
.template-empty__text { font-size: 14px; color: var(--grey-500); margin: 4px auto 16px; max-width: 46ch; }

.template-starters { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--grey-200); }
.template-starters__title { font-size: 16px; font-weight: 700; color: var(--grey-900); margin: 0; }
.template-starters__hint { font-size: 13px; color: var(--grey-500); margin: 2px 0 12px; }
.template-starters__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.template-starters__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  color: var(--grey-900);
  font-size: 13.5px;
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.template-starters__item:hover { border-color: var(--blue-accent); background: var(--blue-light); text-decoration: none; }
.template-starters__name { min-width: 0; overflow-wrap: anywhere; }
.template-starters__action { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 12px; font-weight: 600; color: var(--blue-mid); opacity: .7; }
.template-starters__item:hover .template-starters__action { opacity: 1; }

.doctor-templates__back { display: inline-block; margin-bottom: 6px; font-size: 14px; color: var(--grey-500); }
.doctor-template-form { display: flex; flex-direction: column; gap: 16px; }
.doctor-template-form__tips { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 13px; color: var(--grey-700); }
.doctor-template-form__tips ul { margin: 4px 0 0; padding-left: 18px; }
.doctor-template-form__editor { min-height: 360px; background: #fff; }
.doctor-template-form trix-toolbar { position: sticky; top: 0; z-index: 1; background: #fff; }
.doctor-template-form trix-toolbar .trix-button-group--file-tools { display: none; }
.doctor-template-form__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ─── "Prvi koraci" checklist on a doctor's home (DoctorOnboarding) ─ */
.onboarding {
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 18px 22px 8px;
  margin-bottom: 24px;
}
.onboarding__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.onboarding__head form { margin: 0; }
.onboarding__title { font-size: 16px; font-weight: 700; color: var(--grey-900); margin: 0; }
.onboarding__progress { font-size: 13px; color: var(--grey-700); margin: 2px 0 0; }
.onboarding__dismiss { font-size: 13px; color: var(--grey-500); }
.onboarding__bar { height: 4px; border-radius: 999px; background: var(--grey-100); margin: 12px 0 6px; overflow: hidden; }
.onboarding__bar span { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.onboarding__steps { list-style: none; margin: 0; padding: 0; }
.onboarding__step { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--grey-100); }
.onboarding__step:first-child { border-top: 0; }
.onboarding__check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--grey-200);
  background: var(--grey-50);
  color: var(--grey-500);
  font-size: 12px;
  font-weight: 700;
}
.onboarding__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.onboarding__step-title { font-size: 14px; font-weight: 600; color: var(--blue-mid); }
.onboarding__step-desc { font-size: 13px; color: var(--grey-700); }
.onboarding__step.is-done .onboarding__check { background: var(--green-light); border-color: var(--green-light); color: var(--green); }
.onboarding__step.is-done .onboarding__step-title { color: var(--grey-500); font-weight: 500; text-decoration: line-through; }

.doctor-home__impersonation { color: var(--amber-text); background: var(--amber-light); padding: 2px 8px; border-radius: var(--radius); font-size: 12px; }

.exam-queue {
  background: var(--amber-light);
  border: 1px solid var(--amber);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 32px;
}

.exam-queue__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--amber-text);
  margin-bottom: 12px;
}

.exam-queue__count {
  background: var(--amber);
  color: var(--amber-text);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 20px;
}

.exam-queue__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.exam-queue__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--amber);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--grey-900);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.exam-queue__card:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.exam-queue__name { font-weight: 700; font-size: 15px; }
.exam-queue__meta { font-size: 12.5px; color: var(--grey-500); }
.exam-queue__open { font-size: 13px; font-weight: 600; color: var(--blue-mid); margin-top: 4px; }

.doctor-home__patients h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--grey-900);
  margin-bottom: 12px;
}

.doctor-home__search { margin-bottom: 14px; }
.doctor-home__search input {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  background: #fff;
}
.doctor-home__search input:focus { outline: none; border-color: var(--blue-accent); box-shadow: 0 0 0 3px var(--blue-light); }

.doctor-home__list {
  list-style: none;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  overflow: hidden;
}
.doctor-home__list li + li { border-top: 1px solid var(--grey-100); }

.doctor-home__list li { display: flex; align-items: center; }

.doctor-home__row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  color: var(--grey-900);
  text-decoration: none;
}
.doctor-home__row:hover { background: var(--grey-50); text-decoration: none; }
.doctor-home__name { flex: 1; font-weight: 600; }
.doctor-home__dob { font-size: 13px; color: var(--grey-500); }

.doctor-home__actions { display: flex; align-items: center; gap: 2px; margin-right: 10px; }

.doctor-home__actions form { margin: 0; }

.doctor-home__icon-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--grey-500);
  cursor: pointer;
}

.doctor-home__icon-button:hover { background: var(--grey-100); color: var(--blue-mid); }

.doctor-home__icon-button--danger:hover { background: var(--red-light, #fdf0ee); color: var(--red); }

/* ─── Patient workspace: small "pregled u toku" marker under the name ─ */
.left-panel__exam { margin-top: 6px; font-size: 11.5px; padding: 1px 8px; }

/* ─── Agenda, booking, schedules (ClinicPortal::AppointmentsController & co.) ─── */
.portal-page-header__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.agenda-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: none;
  margin-bottom: 20px;
}
.agenda-nav input[type="date"], .agenda-nav input[type="search"], .agenda-nav select {
  padding: 7px 10px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  font: inherit;
  background: #fff;
}
.agenda-nav input[type="search"] { flex: 1 1 260px; min-width: 0; height: auto; }
.btn--current { border-color: var(--blue-mid); color: var(--blue-mid); }

.pill--appointment-scheduled  { background: var(--blue-light); color: var(--blue-mid); }
.pill--appointment-checked_in { background: var(--amber-light); color: var(--amber-text); }
.pill--appointment-completed  { background: var(--green-light); color: var(--green); }
.pill--appointment-cancelled,
.pill--appointment-no_show    { background: var(--grey-100); color: var(--grey-500); }
.pill--through-email          { background: var(--purple-light); color: var(--purple); text-transform: none; }

.booking-form, .schedule-form, .time-off-form {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.time-off-form { margin-top: 16px; }
.booking-form__other-time summary { cursor: pointer; color: var(--blue-mid); font-size: 14px; }
.booking-form__other-time[open] summary { margin-bottom: 10px; }
.form-field--checkbox { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.form-field--checkbox input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.form-field--checkbox label { display: inline; margin: 0; }

.schedule-table__range { white-space: nowrap; }
.schedule-table__range input { padding: 5px 6px; border: 1px solid var(--grey-200); border-radius: var(--radius); font: inherit; }

.todays-appointments {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.todays-appointments__title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.todays-appointments__list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.todays-appointments__item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.todays-appointments__item--completed, .todays-appointments__item--no_show { opacity: .6; }
.todays-appointments__time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; }
.todays-appointments__patient { font-weight: 600; }
.todays-appointments__reason { color: var(--grey-500); font-size: 13px; }

@media (max-width: 600px) {
  .schedule-table { display: block; overflow-x: auto; }
  .booking-form, .schedule-form, .time-off-form { padding: 14px; }
}

/* ─── Pregledi (Exam) ─── */
.exam-queue__card--in-progress { border-color: var(--green); }
.exam-action { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; max-width: none; }
.exam-action select { padding: 4px 8px; border: 1px solid var(--grey-200); border-radius: var(--radius); font: inherit; max-width: 220px; }
.exam-action__flag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--grey-700); }
.left-panel__exam-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.left-panel__exam-row form { margin: 0; }

.pill--exam-waiting     { background: var(--amber-light); color: var(--amber-text); text-transform: none; }
.pill--exam-in_progress { background: var(--blue-light); color: var(--blue-mid); text-transform: none; }
.pill--exam-finished    { background: var(--green-light); color: var(--green); text-transform: none; }
.pill--exam-cancelled   { background: var(--grey-100); color: var(--grey-500); text-transform: none; }

.exams-history__count { margin-left: 6px; font-size: 11px; color: var(--grey-500); }
.exams-history { padding: 0 18px; }
.exams-history__empty { font-size: 13px; color: var(--grey-500); padding: 4px 0 8px; }
.exams-history__list { list-style: none; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; }
.exams-history__item { border-left: 2px solid var(--grey-200); padding: 2px 0 2px 10px; display: flex; flex-direction: column; gap: 2px; }
.exams-history__item--finished { border-left-color: var(--green); }
.exams-history__item--in_progress, .exams-history__item--waiting { border-left-color: var(--amber); }
.exams-history__item--cancelled { opacity: .6; }
.exams-history__when { display: flex; gap: 8px; font-size: 13px; }
.exams-history__when span { color: var(--grey-500); font-variant-numeric: tabular-nums; }
.exams-history__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--grey-700); }
.exams-history__docs { list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.exams-history__docs a { overflow-wrap: anywhere; }

/* ─── Clinic profile logo (clinic_profiles/show) ─── */
.profile-logo { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.profile-logo__tile { flex: none; width: 200px; height: 96px; padding: 10px; display: grid; place-items: center; border: 1px solid var(--grey-200); border-radius: 10px; background: #fff; overflow: hidden; }
.profile-logo__tile--empty { border-style: dashed; background: var(--grey-50); color: var(--grey-500); font-size: 13px; }
.profile-logo__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.profile-logo__controls { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.profile-logo__input { font-size: 13px; color: var(--grey-500); border: 0; padding: 0; background: none; max-width: 100%; }
.profile-logo__input::file-selector-button { font: inherit; font-weight: 600; color: var(--grey-900); background: #fff; border: 1px solid var(--grey-200); border-radius: 8px; padding: 7px 12px; margin-right: 10px; cursor: pointer; }
.profile-logo__input::file-selector-button:hover { border-color: var(--blue-mid); color: var(--blue-mid); }
.profile-logo__remove { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--red); cursor: pointer; }
.profile-logo__remove input { accent-color: var(--red); width: 15px; height: 15px; }

/* Patient details header (clinic_portal/patients/show) */
.patient-head__actions { flex-wrap: wrap; justify-content: flex-end; }
.patient-head__actions .row-menu__button { width: 40px; height: 38px; padding: 0; font-size: 18px; }
.row-menu__item--danger { color: var(--red); }
.row-menu__item--danger:hover { background: var(--red-light); }
@media (max-width: 600px) {
  .patient-head__actions { justify-content: flex-start; width: 100%; }
}

/* "Zapisi putem emaila" on the clinic profile: the heading and an on/off switch, nothing else */
.through-email-switch { max-width: none; display: block; margin-top: 28px; }
.through-email-switch__label { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; }
.through-email-switch__label .portal-section-label { margin: 0; }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: var(--grey-200); cursor: pointer; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch:checked { background: var(--blue-accent); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--blue-accent); outline-offset: 2px; }

/* One doctor's page for the clinic (clinic_portal/doctors/show) */
.doctor-link { font-weight: 700; color: var(--grey-900); }
.doctor-link:hover { color: var(--blue-mid); }
.doctor-head__actions { flex-wrap: wrap; justify-content: flex-end; }
.doctor-exams { list-style: none; margin: 0; padding: 0; }
.doctor-exams__row { display: grid; grid-template-columns: 130px minmax(140px, 1fr) 130px minmax(160px, 1.4fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--grey-100); font-size: 13.5px; }
.doctor-exams__row:first-child { border-top: 0; }
.doctor-exams__when { display: flex; flex-direction: column; }
.doctor-exams__when small { color: var(--grey-500); font-variant-numeric: tabular-nums; }
.doctor-exams__patient { font-weight: 600; }
.doctor-exams__meta { color: var(--grey-500); }
.doctor-exams__docs { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
@media (max-width: 700px) {
  .doctor-exams__row { grid-template-columns: 1fr 1fr; }
  .doctor-head__actions { justify-content: flex-start; }
}
/* Six tiles: one row, or two even rows of three — never five and a lone one */
.kpi-row--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) { .kpi-row--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kpi-row--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }