/* The scheduler (Chairside.Controls/Components/Scheduler). Every colour is a Chairside
   token, so light, system dark and dark come for free. Positions use logical
   properties: in Arabic the time axis moves to the right and the columns run right
   to left with no rules of their own. */

.usch {
  --usch-axis: 56px;
  --usch-col: 148px;
  --usch-col-narrow: 88px;
  display: grid;
  gap: 8px;
  font-size: var(--ui-sm);
  color: var(--ink);
  outline: none;
}

.usch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.usch-bar-label { color: var(--ink-3); }
.usch-zoom { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.usch-zoom-btn {
  font: inherit;
  padding: 4px 10px;
  background: var(--surface);
  color: var(--ink-2);
  border: 0;
  border-inline-start: 1px solid var(--line);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.usch-zoom-btn:first-child { border-inline-start: 0; }
.usch-zoom-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.usch-zoom-btn:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.usch-notice {
  margin-inline-start: auto;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--neg-soft);
  color: var(--ink);
  border: 1px solid var(--neg);
  max-width: 60ch;
}

.usch-scroll {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overscroll-behavior: contain;
}
.usch-grid {
  display: grid;
  grid-template-columns: var(--usch-axis) repeat(var(--usch-cols), minmax(var(--usch-col), 1fr));
  min-width: min-content;
}

/* Headings stay in view as the day scrolls; the axis stays in view sideways. */
.usch-corner, .usch-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.usch-corner { inset-inline-start: 0; z-index: 4; }
.usch-head {
  display: grid;
  padding: 6px 8px;
  border-inline-start: 1px solid var(--line);
  min-width: 0;
}
.usch-head-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Today, in a week: the heading carries the accent, with aria-current saying it in words. */
.usch-head[data-current] { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }

/* A column with nothing on it says so, down its middle, instead of reading as an empty day. */
.usch-note {
  position: sticky;
  top: 48px;
  margin: 16px 6px 0;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--ui-sm);
  pointer-events: none;
}
.usch-head-sub { color: var(--ink-3); font-size: 0.92em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usch-axis {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
}
.usch-hour {
  position: absolute;
  inset-inline-end: 8px;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.usch-hour:first-child { transform: none; }

/* A column: closed by default (shaded), open where a session is. Faint lines every
   row, stronger every hour, drawn by the background so nothing has to be rendered. */
.usch-col {
  position: relative;
  border-inline-start: 1px solid var(--line);
  background-color: var(--surface-2);
  background-image: repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--usch-row) - 1px),
      color-mix(in srgb, var(--line) 55%, transparent) calc(var(--usch-row) - 1px), color-mix(in srgb, var(--line) 55%, transparent) var(--usch-row));
  outline: none;
  touch-action: pan-x pan-y;
}
.usch-col:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.usch-open {
  position: absolute;
  inset-inline: 0;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  cursor: cell;
}
.usch-open-off {
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--warn) 18%, transparent) 6px 8px);
  cursor: not-allowed;
}
.usch[data-readonly="1"] .usch-open { cursor: default; }

.usch-block {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--line-2) 6px 8px);
  border-block: 1px solid var(--line-2);
  overflow: hidden;
  cursor: not-allowed;
}
.usch-block span {
  display: inline-block;
  margin: 3px 6px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.92em;
}

/* A card: status as its colour and in words (SC9); the kind of visit as a stripe on
   its start edge. */
.usch-item {
  --usch-fill: var(--surface);
  --usch-edge: var(--line-2);
  position: absolute;
  inset-inline: 3px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  column-gap: 6px;
  padding: 2px 6px 2px 8px;
  padding-inline-start: 9px;
  border: 1px solid var(--usch-edge);
  border-inline-start: 4px solid var(--usch-stripe, var(--usch-edge));
  border-radius: var(--radius-sm);
  background: var(--usch-fill);
  color: var(--ink);
  font: inherit;
  text-align: start;
  overflow: hidden;
  cursor: grab;
  box-shadow: var(--shadow-1);
  touch-action: none;
  user-select: none;
}
.usch-item[data-movable="0"] { cursor: pointer; }
.usch-item:focus-visible { outline: var(--focus-ring); outline-offset: 1px; z-index: 3; }
.usch-item[data-tone="accent"] { --usch-fill: var(--accent-soft); --usch-edge: var(--accent-line); }
.usch-item[data-tone="positive"] { --usch-fill: var(--pos-soft); --usch-edge: var(--pos); }
.usch-item[data-tone="warning"] { --usch-fill: var(--warn-soft); --usch-edge: var(--warn); }
.usch-item[data-tone="negative"] { --usch-fill: var(--neg-soft); --usch-edge: var(--neg); }
.usch-item[data-tone="info"] { --usch-fill: var(--info-soft); --usch-edge: var(--info); }
.usch-item[data-tone="muted"] { --usch-fill: var(--surface-2); --usch-edge: var(--line); color: var(--ink-2); }
.usch-item-time { flex: none; font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* The name shares the first line with the time and gives way, so a narrow column on
   a phone still has room for the second line and its status. */
.usch-item-title { flex: 1 1 0; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usch-item-line { display: flex; flex-basis: 100%; min-width: 0; gap: 6px; }
.usch-item-detail { flex: 0 1 auto; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usch-item-status { flex: 0 0 auto; color: var(--ink-3); white-space: nowrap; }
/* A name or service in the other script (English in Arabic, Arabic in English) runs in
   its own direction, so it is shortened at its own end: "Examina…", not "…xamination". */
.usch-item-title, .usch-item-detail, .usch-head-title, .usch-head-sub { unicode-bidi: plaintext; }
.usch-item-detail + .usch-item-status::before { content: "·"; margin-inline-end: 6px; }
.usch-item.usch-lifted { opacity: .4; }
.usch-item-selected { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 3; }
.usch-item-mark { color: var(--accent); font-size: 0.8em; }
/* Changed by another desk (B3): an outline that fades, so a card that moved under
   somebody's eyes says why without staying loud. */
.usch-item-changed { animation: usch-changed 2.4s ease-out 1; }
@keyframes usch-changed {
  0%, 60% { box-shadow: 0 0 0 3px var(--warn); }
  100% { box-shadow: var(--shadow-1); }
}
@media (prefers-reduced-motion: reduce) {
  .usch-item-changed { animation: none; box-shadow: 0 0 0 3px var(--warn); }
}
.usch-handle {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 7px;
  cursor: ns-resize;
}
.usch-handle::after {
  content: "";
  opacity: 0;
  position: absolute;
  bottom: 2px;
  inset-inline-start: calc(50% - 10px);
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--usch-edge);
}
/* The grip shows where the hand or the focus is, and stays off the text otherwise. */
.usch-item:hover .usch-handle::after, .usch-item:focus-visible .usch-handle::after { opacity: 1; }
@media (hover: none) { .usch-handle::after { opacity: 1; } .usch-handle { height: 12px; } }

/* What is being drawn or dragged, before the server has said yes. */
.usch-ghost {
  position: absolute;
  inset-inline: 3px;
  z-index: 5;
  padding: 2px 6px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  direction: ltr;
  text-align: center;
}
.usch-ghost-bad { border-color: var(--neg); background: color-mix(in srgb, var(--neg-soft) 80%, transparent); color: var(--neg); }
.usch-ghost-saving { border-style: solid; opacity: .85; }

.usch-cursor {
  position: absolute;
  inset-inline: 1px;
  z-index: 4;
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  pointer-events: none;
}
.usch-cursor-bad { border-color: var(--neg); border-style: dashed; }

.usch-now {
  position: absolute;
  inset-inline: 0;
  z-index: 4;
  height: 0;
  border-top: 2px solid var(--neg);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .usch-ghost { transition: top 60ms linear, height 60ms linear; }
}

@media (max-width: 640px) {
  .usch { --usch-axis: 44px; --usch-col: 132px; }
  .usch-notice { margin-inline-start: 0; }
}

/* ---- The timeline (S3): the day on its side ------------------------------------------
   A row per resource and the time across. Everything that sits on the time axis is
   placed with inset-inline-start and inline-size, so in Arabic the day runs from the
   right with no rules of its own; only the background lines need telling which way. */
.usch[data-orient="h"] { --usch-head: 200px; --usch-lane: 64px; }
.usch[data-orient="h"] .usch-grid {
  grid-template-columns: var(--usch-head) var(--usch-length);
}
.usch[data-orient="h"] .usch-corner { inset-inline-start: 0; z-index: 4; }
.usch[data-orient="h"] .usch-head {
  position: sticky;
  top: auto;
  inset-inline-start: 0;
  z-index: 3;
  align-content: center;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.usch[data-orient="h"] .usch-axis {
  position: sticky;
  top: 0;
  inset-inline-start: auto;
  z-index: 3;
  block-size: 30px;
  background: var(--surface-2);
  border-inline-end: 0;
  border-bottom: 1px solid var(--line);
}
.usch[data-orient="h"] .usch-hour {
  inset-inline-end: auto;
  top: 6px;
  transform: none;
  padding-inline-start: 4px;
  border-inline-start: 1px solid var(--line-2);
}
.usch[data-orient="h"] .usch-col {
  block-size: var(--usch-lane);
  border-inline-start: 0;
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(to right,
      transparent 0, transparent calc(var(--usch-row) * 1.8 - 1px),
      color-mix(in srgb, var(--line) 55%, transparent) calc(var(--usch-row) * 1.8 - 1px), color-mix(in srgb, var(--line) 55%, transparent) calc(var(--usch-row) * 1.8));
}
:root[dir="rtl"] .usch[data-orient="h"] .usch-col {
  background-image: repeating-linear-gradient(to left,
      transparent 0, transparent calc(var(--usch-row) * 1.8 - 1px),
      color-mix(in srgb, var(--line) 55%, transparent) calc(var(--usch-row) * 1.8 - 1px), color-mix(in srgb, var(--line) 55%, transparent) calc(var(--usch-row) * 1.8));
}
.usch[data-orient="h"] :is(.usch-open, .usch-block) { inset-block: 0; inset-inline-end: auto; }
.usch[data-orient="h"] .usch-block { border-block: 0; border-inline: 1px solid var(--line-2); }
.usch[data-orient="h"] :is(.usch-item, .usch-ghost) { inset-block: 4px; inset-inline-end: auto; }
.usch[data-orient="h"] .usch-cursor { inset-block: 1px; inset-inline-end: auto; }
.usch[data-orient="h"] .usch-item { padding-block: 3px; }
/* The foot is the end of the time: the inline end of the card. */
.usch[data-orient="h"] .usch-handle {
  inset-inline: auto 0;
  inset-block: 0;
  height: auto;
  inline-size: 7px;
  cursor: ew-resize;
}
.usch[data-orient="h"] .usch-handle::after {
  bottom: auto;
  inset-block-start: calc(50% - 10px);
  inset-inline-start: 2px;
  width: 3px;
  height: 20px;
}
.usch[data-orient="h"] .usch-now {
  inset-block: 0;
  inset-inline-end: auto;
  height: auto;
  width: 0;
  border-top: 0;
  border-inline-start: 2px solid var(--neg);
}
/* Placed from the start edge, so they take the page's direction (an element set to
   ltr would be placed from the left in Arabic); the times inside keep their own. */
.usch[data-orient="h"] :is(.usch-hour, .usch-ghost) { direction: inherit; unicode-bidi: isolate; }
.usch[data-orient="h"] .usch-note { position: absolute; top: 50%; inset-inline-start: 12px; margin: 0; transform: translateY(-50%); }
@media (prefers-reduced-motion: no-preference) {
  .usch[data-orient="h"] .usch-ghost { transition: inset-inline-start 60ms linear, inline-size 60ms linear; }
}
@media (max-width: 640px) {
  .usch[data-orient="h"] { --usch-head: 128px; }
}

/* ---- S5: schedules ---------------------------------------------------------------------
   What publishing would add: dashed, on top of what is there, never bookable. */
.usch-open-preview {
  z-index: 1;
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  outline: 2px dashed var(--accent);
  outline-offset: -3px;
  cursor: default;
  pointer-events: none;
}
/* A session's edges, when the schedule may change them: a grip at each end. */
.usch-open[data-editable="1"] { position: absolute; }
.usch-edge {
  position: absolute;
  inset-inline: 0;
  z-index: 3;
  height: 8px;
  cursor: ns-resize;
}
.usch-edge[data-edge="start"] { top: -3px; }
.usch-edge[data-edge="end"] { bottom: -3px; }
.usch-edge::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(50% - 14px);
  top: 3px;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
}
.usch-open[data-editable="1"]:hover .usch-edge::after, .usch-edge:hover::after { opacity: .8; }
@media (hover: none) { .usch-edge::after { opacity: .8; } .usch-edge { height: 14px; } }
/* An edge being dragged: the session as it would be. */
.usch-ghost-window { border-style: dotted; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
/* A block that opens on a click. */
.usch-block[data-key]:not([data-key=""]) { cursor: pointer; }
.usch-block[data-key]:not([data-key=""]):hover { outline: 2px solid var(--accent); outline-offset: -2px; }