/* Day timeline (components/day-timeline.js): the sickness triage Runway lanes
   and the Leave Requests timeline. One template for the head row and every
   lane: a sticky name column, then one column per day or ISO week.

   Span kinds (FRONTEND.md §7, one channel, one meaning):
   - sick: amber solid, like every sick marker (a recorded sickness);
   - tail: amber dashed and hatched ("if sickness lasts longer");
   - approved: solid in the approved status-badge hue (green);
   - pending: hollow and dashed (the calendar's "decision needed" hollow form);
   - partial: a striped modifier for recurring-weekday or part-day coverage.
   Every colour sits next to its dark override, when it needs one. */
@layer components {

.dt-grid {
  --dt-label-w: 11rem;
  --dt-col-min: 46px;
  --dt-bg: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: calc(var(--dt-label-w) + var(--dt-cols, 14) * var(--dt-col-min));
}
.dt-head,
.dt-lane { display: grid; grid-template-columns: var(--dt-label-w) repeat(var(--dt-cols, 14), minmax(var(--dt-col-min), 1fr)); }
.dt-head { border: 1px solid var(--border); border-radius: var(--radius); background: var(--dt-bg); }
.dt-corner { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; border-right: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); background: var(--dt-bg); }
.dt-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: var(--space-2) 2px; border-right: 1px solid var(--border); text-align: center; }
.dt-col:last-child { border-right: 0; }
.dt-col-label { display: flex; flex-direction: column; font-size: var(--text-xs); line-height: 1.2; color: var(--text-2); }
.dt-col-label b { font-size: var(--text-sm); color: var(--text); font-variant-numeric: tabular-nums; }

/* Column tints, on head cells and lane tints alike. Two classes, so a
   consumer's own head cell (a button resetting its background) keeps them,
   while its :hover and pressed rules (same specificity, later sheet) win. */
.dt-grid .dt-col-weekend { background: var(--surface-sunk); }
/* Dark --surface-sunk is nearly the surface colour, so weekends would vanish:
   lift them with a light wash instead. :where() keeps the light rule's
   specificity, so the today tint declared below still wins. */
:where([data-theme="dark"]) .dt-grid .dt-col-weekend { background: color-mix(in srgb, var(--text) 7%, var(--surface)); }
.dt-grid .dt-col-today { background: var(--info-bg); }
.dt-grid .dt-col-selected { box-shadow: inset 0 0 0 2px var(--primary); }
.dt-grid .dt-tint.dt-col-selected { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }

/* Lanes: one row per person; overlapping spans stack on their own tracks. */
.dt-lanes { display: flex; flex-direction: column; gap: 4px; }
.dt-lane { grid-auto-rows: minmax(28px, auto); align-items: center; }
.dt-lane-name { position: sticky; left: 0; z-index: 2; grid-column: 1; grid-row: 1; align-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-width: 0; padding-right: var(--space-2); background: var(--dt-bg); font-size: var(--text-sm); }
.dt-lane-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-tint { align-self: stretch; }
.dt-span { position: relative; z-index: 1; overflow: hidden; height: 22px; padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
a.dt-span { text-decoration: none; }
a.dt-span:hover { filter: brightness(.95); }
a.dt-span:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dt-span--sick { border: 1px solid var(--warning); background: var(--warning-bg); color: var(--warning); }
.dt-span--tail { border: 1.5px dashed var(--warning); background: repeating-linear-gradient(135deg, var(--warning-bg) 0 5px, transparent 5px 9px); color: var(--warning); }
.dt-span--approved { border: 1px solid var(--success); background: var(--success-bg); color: var(--success); }
.dt-span--pending { border: 1.5px dashed var(--warning); background: var(--dt-bg); color: var(--warning); }
/* Declared after the kinds so its stripes replace their fill. */
.dt-span--partial { background-image: repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, currentColor 18%, transparent) 4px 6px); }
/* The caller's own leave where days are columns (features/leave/leave-spans.js;
   Today's 14-day strip and My Schedule's month): a row across every column
   of the grid, its spans placed on their columns through data-style, each in
   its kind's look above. A run that continues beyond the row has a dotted,
   square cut edge. A phone keeps the icon only; the legend names the kinds. */
.leave-span-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; margin: 0; padding: 0; list-style: none; }
.leave-span { display: flex; align-items: center; gap: 4px; height: 20px; min-width: 0; line-height: 18px; }
.leave-span svg { flex: none; }
.leave-span-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leave-span.is-cut-start { border-left-style: dotted; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.leave-span.is-cut-end { border-right-style: dotted; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* One day's leave where days are rows (the phone agenda) or a line (the day panel). */
.leave-day-chip { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; height: 20px; line-height: 18px; }
.leave-day-chip svg { flex: none; }
.leave-day-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--text-sm); }
@media (max-width: 600px) {
  .leave-span { justify-content: center; padding: 0 2px; }
  .leave-span-text { display: none; }
}
/* A legend key in a span kind's look: <span class="dt-swatch dt-span--approved">. */
.dt-swatch { display: inline-block; flex: none; width: 16px; height: 10px; border-radius: 2px; }
.dt-empty { position: sticky; left: 0; margin: var(--space-2) 0 0; }

@media (max-width: 600px) {
  .dt-grid { --dt-label-w: 7rem; }
}

} /* @layer components */