/* ===========================
 * Time Grid Component Styles
 * ===========================
 * A day / week schedule: a vertical time axis, one column per day (Vika)
 * or per resource (Dagur), hour + half-hour lines, a sticky header row
 * and a now line. Blocks — usually the Booking component — sit in the
 * columns, positioned from data-start / data-end by js/timegrid.js.
 *
 * Markup (the consumer writes it; the engine lays it out):
 *   <div class="lsh-timegrid" data-day-start="07:00" data-day-end="19:00">
 *     <div class="lsh-timegrid-head">
 *       <div class="lsh-timegrid-headrow">
 *         <div class="lsh-timegrid-corner"></div>             first child, always
 *         <div class="lsh-timegrid-day" data-date="…">…</div>  one per column
 *       </div>
 *     </div>
 *     <div class="lsh-timegrid-body">
 *       <div class="lsh-timegrid-col" data-date="…" role="group" aria-label="…">
 *         <div class="booking booking-error" data-start="08:00" data-end="09:30">…</div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Geometry hooks (consumer CSS, set on the root; --timegrid-row MUST be
 * in px — the engine reads it for the Booking size and for scrolling):
 *   --timegrid-row      48px   height of 30 minutes (15 min = one 24px Sm block)
 *   --timegrid-axis     56px   axis column width
 *   --timegrid-col-min  120px  column minimum; below it the grid scrolls sideways
 * Engine-written numbers (minutes / counts, unitless):
 *   --timegrid-day-start · --timegrid-span · --timegrid-cols   on the root
 *   --timegrid-start · --timegrid-end                           on each block
 *   --timegrid-at                   on hour labels, the now line and its pill
 *
 * Stacking inside the (isolated) root: blocks 0 · [data-layer="top"] 1 ·
 * now line 2 · sticky axis 3 · sticky head 4.
 *
 * Zero new :root tokens. No dark overrides — every colour is a semantic
 * token that flips. Spec: docs/specs/2026-09-23-time-grid-design.md.
 * =========================== */


/* ─── 1. Root — the scroll box ─── */

.lsh-timegrid {
  --timegrid-row: 48px;
  --timegrid-axis: 56px;
  --timegrid-col-min: 120px;
  --timegrid-day-start: 0;
  --timegrid-span: 1440;
  --timegrid-cols: 1;

  position: relative;
  isolation: isolate;
  overflow: auto;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Head and body share one width floor and one track template, so every
   divider lands on the same x and a wide grid scrolls as one piece.
   A calc floor, not max-content: one long name must not widen its column. */
.lsh-timegrid-head,
.lsh-timegrid-body {
  min-width: calc(var(--timegrid-axis) + var(--timegrid-cols) * var(--timegrid-col-min));
}

.lsh-timegrid-headrow,
.lsh-timegrid-body {
  display: grid;
  grid-template-columns: var(--timegrid-axis) repeat(var(--timegrid-cols), minmax(var(--timegrid-col-min), 1fr));
}


/* ─── 2. Head — sticky; any number of rows ─── */

/* A head child that is not .lsh-timegrid-headrow is an app row and spans
   the full width (e.g. Bóka tíma's resource switch strip). */
.lsh-timegrid-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-secondary);
}

/* Header-row cells. The corner is always the first child and its right
   border draws the first divider, so cells from the second on carry a
   left border — the same edge the body columns use, so the lines align. */
.lsh-timegrid-headrow > * {
  min-width: 0;
  padding: var(--spacing-2) var(--spacing-3);
}

.lsh-timegrid-headrow > :nth-child(n + 3) {
  border-left: 1px solid var(--border-secondary);
}

.lsh-timegrid-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--bg-primary);
  border-right: 1px solid var(--border-secondary);
}


/* ─── 3. Day heading (Vika) ─── */

.lsh-timegrid-day {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.lsh-timegrid-dayname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Always a 24px box, so the heading keeps its height on today. */
.lsh-timegrid-daynum {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--spacing-1-5);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  font-feature-settings: 'lnum', 'tnum';
  color: var(--text-primary);
}

.lsh-timegrid-day.is-today .lsh-timegrid-daynum {
  background-color: var(--bg-brand-primary-alt);
  color: var(--text-brand-primary);
}


/* ─── 4. Resource heading (Dagur) ─── */

.lsh-timegrid-resource {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.lsh-timegrid-resource > .avatar,
.lsh-timegrid-resource > .btn {
  flex: 0 0 auto;
}

.lsh-timegrid-resource-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.lsh-timegrid-resource-name,
.lsh-timegrid-resource-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lsh-timegrid-resource-name {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.lsh-timegrid-resource-meta {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  color: var(--text-tertiary);
}


/* ─── 5. Body, axis and columns ─── */

.lsh-timegrid-body {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
  height: calc(var(--timegrid-span) * var(--timegrid-row) / 30);
}

/* Injected by the engine as the body's first child. Grey (Figma WF31);
   sticky left so the times stay in view when the grid scrolls sideways. */
.lsh-timegrid-axis {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: var(--bg-secondary);
  border-right: 1px solid var(--border-secondary);
}

/* Each label sits just BELOW its hour line, top-aligned in the hour (WF31). */
.lsh-timegrid-hour {
  position: absolute;
  top: calc((var(--timegrid-at) - var(--timegrid-day-start)) * var(--timegrid-row) / 30);
  right: 0;
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-feature-settings: 'lnum', 'tnum';
  color: var(--text-tertiary);
  white-space: nowrap;
}

/* Lines on the LAST pixel of every hour (solid) and every first half hour
   (faint): no line doubles the head border at the top of the range, and
   each hour label sits directly under its own line. */
.lsh-timegrid-col {
  position: relative;
  min-width: 0;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--timegrid-row) * 2 - 1px), var(--border-secondary) calc(var(--timegrid-row) * 2 - 1px) calc(var(--timegrid-row) * 2)),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--timegrid-row) - 1px), var(--border-tertiary) calc(var(--timegrid-row) - 1px) var(--timegrid-row), transparent var(--timegrid-row) calc(var(--timegrid-row) * 2));
}

.lsh-timegrid-col ~ .lsh-timegrid-col {
  border-left: 1px solid var(--border-secondary);
}

.lsh-timegrid-col.is-today {
  background-color: color-mix(in srgb, var(--bg-brand-primary-alt) 45%, transparent);
}


/* ─── 6. Blocks — any direct child of a column with data-start ─── */

/* The engine writes --timegrid-start / --timegrid-end (clamped minutes).
   left / right replace the Booking block's width: 100%. */
.lsh-timegrid-col > [data-start] {
  position: absolute;
  top: calc((var(--timegrid-start) - var(--timegrid-day-start)) * var(--timegrid-row) / 30);
  right: var(--spacing-0-5);
  left: var(--spacing-0-5);
  width: auto;
  height: calc((var(--timegrid-end) - var(--timegrid-start)) * var(--timegrid-row) / 30);
}

.lsh-timegrid-col > [data-layer="top"] {
  z-index: 1;
}

/* Wholly outside the range, or unparseable times. */
.lsh-timegrid-col > [data-timegrid-out] {
  display: none;
}

/* Until the engine has written the numbers, keep blocks from flashing
   piled at the top of their column. */
.lsh-timegrid:not([data-timegrid-ready]) .lsh-timegrid-col > [data-start] {
  visibility: hidden;
}


/* ─── 7. Now line + pill ─── */

/* In the body, across every column but not the axis; it slides under the
   sticky axis (z 3) on sideways scroll. The 2px rule is centred on the minute. */
.lsh-timegrid-now {
  position: absolute;
  top: calc((var(--timegrid-at) - var(--timegrid-day-start)) * var(--timegrid-row) / 30 - 1px);
  right: 0;
  left: var(--timegrid-axis);
  z-index: 2;
  height: 0;
  border-top: 2px solid var(--border-brand);
  pointer-events: none;
}

/* In the axis, so it rides the sticky axis; above the hour labels. */
.lsh-timegrid-now-pill {
  position: absolute;
  top: calc((var(--timegrid-at) - var(--timegrid-day-start)) * var(--timegrid-row) / 30);
  right: var(--spacing-1);
  z-index: 1;
  padding: 2px var(--spacing-1-5);
  transform: translateY(-50%);
  border-radius: var(--radius-sm);
  background-color: var(--bg-brand-solid-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-xs);
  font-weight: var(--font-weight-medium);
  font-feature-settings: 'lnum', 'tnum';
  color: var(--text-white);
  white-space: nowrap;
}