/* styles.css - layout + components for the clinic flow tracker.
   RTL-first (logical properties), calm-clinical, responsive (mobile + desktop).
   Depends on tokens.css for custom properties. No inline styles anywhere. */

/* ---------------------------------------------------------------------------
   Base elements
--------------------------------------------------------------------------- */
a {
  color: var(--accent-strong);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  margin: 0 0 .35em;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ink);
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.08rem; }
p { margin: 0 0 .8em; }

/* Numbers/percentages should read LTR even inside RTL text. */
.num,
[dir="ltr"] {
  unicode-bidi: isolate;
}
bdi {
  unicode-bidi: isolate;
}

/* Skip link */
.skip-link {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: var(--gap);
  z-index: 1000;
  padding: 10px 16px;
  background: var(--accent-strong);
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: inset-block-start .15s ease;
}
.skip-link:focus {
  inset-block-start: var(--gap);
  color: var(--on-accent);
}

/* ---------------------------------------------------------------------------
   App bar
--------------------------------------------------------------------------- */
.appbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-inline: clamp(14px, 4vw, 28px);
  padding-block: 12px;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
}
.appbar[hidden] { display: none; }

/* Brand pinned to the RIGHT (start of RTL flow). */
.appbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.appbar__logo {
  display: inline-flex;
  color: var(--accent);
  flex: none;
}
.appbar__title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
  flex-wrap: wrap;
}
.appbar__nav .navlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  min-height: var(--touch);
}
.appbar__nav .navlink:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.appbar__nav .navlink.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-soft);
}

/* User cluster pinned to the LEFT (end of RTL flow). */
.appbar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}
.appbar__name {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  max-width: 30vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------------
   Layout: main view
--------------------------------------------------------------------------- */
.view {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(14px, 4vw, 28px);
  padding-block: clamp(18px, 3vw, 32px) 64px;
}
.view:focus { outline: none; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  margin-block-end: var(--gap);
}
.page-head__titles { min-width: 0; }
.page-head .subtitle {
  color: var(--ink-soft);
  margin: 0;
}
.page-head__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.center { text-align: center; }
.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------------------------
   Cards
--------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.5vw, 24px);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-end: 12px;
}
.card__title { margin: 0; font-size: 1.08rem; }

/* Grid of selectable tiles (e.g. two-tap flow chooser). */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap);
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: var(--touch);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.tile:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.tile:active { transform: translateY(1px); }
.tile__label { font-weight: 600; color: var(--ink); }
.tile__hint { color: var(--ink-soft); font-size: .92rem; }

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  min-height: var(--touch);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--accent-strong); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}
.btn--sm { padding: 8px 12px; min-height: 36px; font-size: .92rem; }
.btn--block { width: 100%; }

.btn--secondary {
  background: var(--surface);
  color: var(--accent-strong);
  border-color: var(--border);
}
.btn--secondary:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover { background: #a5301f; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}
.iconbtn__glyph { font-size: 1.05rem; line-height: 1; }

/* ---------------------------------------------------------------------------
   Badges
--------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
/* required record -> accent */
.badge--required {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}
/* optional (be'et hatsorekh) -> warn/muted */
.badge--optional {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-soft);
}
.badge--optional::before { border-radius: 2px; } /* diamond-ish cue, not color-only */
.badge--ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-soft);
}
.badge--warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-soft);
}
.badge--danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-soft);
}
.badge--neutral {
  color: var(--ink-soft);
  background: var(--surface-2);
  border-color: var(--border);
}

/* ---------------------------------------------------------------------------
   Forms
--------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--gap); }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field > label,
.form-label {
  font-weight: 600;
  color: var(--ink);
  font-size: .95rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 11px 12px;
  min-height: var(--touch);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
}
.form-field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.55;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-faint); }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--accent); }
.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  background: var(--surface-2);
  color: var(--ink-faint);
}
.form-field .hint { color: var(--ink-soft); font-size: .86rem; }
.form-field .field-error {
  color: var(--danger);
  font-size: .86rem;
  font-weight: 600;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

/* Password field with reveal toggle */
.input-affix {
  position: relative;
  display: flex;
  align-items: center;
}
.input-affix input { padding-inline-end: 46px; }
.input-affix__btn {
  position: absolute;
  inset-inline-end: 6px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.input-affix__btn:hover { background: var(--surface-2); color: var(--ink); }

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Inline form message (login errors etc.) */
.form-message {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: .92rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.form-message[hidden] { display: none; }
.form-message--error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-soft);
}
.form-message--ok {
  color: var(--ok);
  background: var(--ok-soft);
  border-color: var(--ok-soft);
}

/* ---------------------------------------------------------------------------
   Login / auth card (centered)
--------------------------------------------------------------------------- */
.auth-wrap {
  min-height: calc(100dvh - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 24px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 32px);
}
.auth-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-block-end: 22px;
}
.auth-card__logo {
  color: var(--accent);
  display: inline-flex;
}
.auth-card__clinic {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
}
.auth-card h1 {
  font-size: 1.2rem;
  text-align: center;
  margin-block-end: 4px;
}
.auth-card__tagline {
  text-align: center;
  color: var(--ink-soft);
  font-size: .9rem;
  margin-block-start: 16px;
}
.auth-card__note {
  text-align: center;
  color: var(--ink-faint);
  font-size: .84rem;
  margin-block-start: 8px;
}

/* ---------------------------------------------------------------------------
   Stage timeline (vertical, RTL spine on the right)
--------------------------------------------------------------------------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: var(--gap);
}
.timeline__legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--ink-soft);
  font-size: .9rem;
  margin-block-end: 6px;
}

.stage {
  position: relative;
  padding-inline-start: 30px; /* room for spine on the inline-end (right in RTL) */
  padding-inline-end: 0;
}
/* Spine runs down the inline-start edge (visually the right side in RTL). */
.stage::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 9px;
  width: 2px;
  background: var(--border);
}
.stage:last-child::before { inset-block-end: auto; height: 26px; }

.stage__node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  cursor: default;
}
/* The dot on the spine */
.stage__node::before {
  content: "";
  position: absolute;
  inset-inline-start: -25px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--accent);
}
.stage.is-current .stage__node::before {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.stage__name {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.05rem;
}
.stage__count {
  color: var(--ink-faint);
  font-size: .85rem;
  font-weight: 600;
}
.stage__empty {
  color: var(--ink-faint);
  font-style: normal;
  padding-block: 6px 14px;
}
.stage__cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block-end: 16px;
}

/* ---------------------------------------------------------------------------
   Collapsible record cards
--------------------------------------------------------------------------- */
.record {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.record--optional {
  border-style: dashed;
  border-color: var(--warn);
  background: var(--warn-soft);
}
.record__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
}
.record__summary:hover { background: var(--surface-2); }
.record--optional .record__summary:hover { background: #f2e6cf; }
.record__name {
  font-weight: 600;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
}
.record__meta {
  color: var(--ink-soft);
  font-size: .86rem;
  flex: 1 1 100%;
  order: 3;
  margin-inline-start: 26px;
}
.record__chevron {
  flex: none;
  color: var(--ink-faint);
  transition: transform .18s ease;
}
.record.is-open .record__chevron { transform: rotate(-90deg); }

.record__detail {
  padding: 0 14px 14px 40px;
  border-block-start: 1px solid var(--border);
  display: none;
  animation: fade-in .18s ease;
}
.record.is-open .record__detail { display: block; }
.record__detail dl {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 14px;
  margin: 12px 0 0;
}
.record__detail dt {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .9rem;
}
.record__detail dd {
  margin: 0;
  color: var(--ink);
  white-space: pre-line; /* preserve line breaks in the "how" fields */
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Case-tracking record rows: expandable name+badge on one side, the status
   control on the other. Wraps on narrow screens so the status select is never
   clipped by the card (Avigail feedback 2026-07-22). */
.record__summary--track { flex-wrap: wrap; row-gap: 8px; }
.record__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  text-align: start;
}
button.record__lead { cursor: pointer; }
.record__summary--track .record__lead { flex: 1 1 60%; min-width: 0; }
.record__summary--track .form-field {
  flex: 0 0 auto;
  margin-inline-start: auto;
  margin-block: 0;
}
.record__summary--track .form-field select { min-width: 132px; }
@media (max-width: 560px) {
  .record__summary--track .record__lead { flex-basis: 100%; }
  .record__summary--track .form-field { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------------------
   Progress bar
--------------------------------------------------------------------------- */
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
}
.progress__track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  min-width: 120px;
}
.progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: inline-size .25s ease;
}
.progress__fill.is-full { background: var(--ok); }
.progress__label {
  font-weight: 600;
  color: var(--ink-soft);
  font-size: .9rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Tables (admin, supervisor)
--------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
table.data caption {
  text-align: start;
  padding: 12px 14px 0;
  color: var(--ink-soft);
  font-size: .9rem;
}
table.data th,
table.data td {
  padding: 11px 14px;
  text-align: start;
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
}
table.data thead th {
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
  background: var(--surface-2);
  white-space: nowrap;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-block-end: none; }
.cell-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Tabs (admin)
--------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-block-end: 1px solid var(--border);
  margin-block-end: var(--gap);
}
.tab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 11px 16px;
  min-height: var(--touch);
  color: var(--ink-soft);
  font-weight: 600;
  cursor: pointer;
  border-block-end: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab[aria-selected="true"] {
  color: var(--accent-strong);
  border-block-end-color: var(--accent);
}
.tabpanel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Search field
--------------------------------------------------------------------------- */
.searchbar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
}
.searchbar input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  min-height: var(--touch);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.searchbar__icon {
  position: absolute;
  inset-inline-end: 12px;
  color: var(--ink-faint);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Empty / loading states
--------------------------------------------------------------------------- */
.empty-state {
  text-align: center;
  padding: clamp(28px, 6vw, 56px) 20px;
  color: var(--ink-soft);
}
.empty-state__title { color: var(--ink); margin-block-end: 6px; }

.spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner--lg { width: 34px; height: 34px; border-width: 4px; }
.loading-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(28px, 6vw, 56px);
  color: var(--ink-soft);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Toasts
--------------------------------------------------------------------------- */
.toast-root {
  position: fixed;
  inset-block-end: 20px;
  inset-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 200;
  padding-inline: 12px;
}
.toast {
  pointer-events: auto;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  font-weight: 600;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toast-in .18s ease;
}
.toast--ok { background: var(--ok); }
.toast--error { background: var(--danger); }
.toast--warn { background: var(--warn); }
.toast.is-leaving { animation: toast-out .2s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(10px); }
}

/* ---------------------------------------------------------------------------
   Modal / confirm dialog
--------------------------------------------------------------------------- */
.modal-root:empty { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fade-in .15s ease;
}
.modal {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 26px);
  border: 1px solid var(--border);
}
.modal h2 { margin-block-end: 8px; }
.modal__body { color: var(--ink-soft); margin-block-end: 18px; white-space: pre-line; }
.modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .appbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .appbar__nav {
    order: 3;
    flex-basis: 100%;
    margin-inline-start: 0;
  }
  .appbar__user { margin-inline-start: auto; }
  .appbar__name { max-width: 40vw; }
  .page-head { align-items: flex-start; }
  .record__detail dl { grid-template-columns: 1fr; gap: 2px; }
  .record__detail dt { margin-block-start: 8px; }
}