/*
 * A FROZEN LABEL COLUMN beside a zoomable, horizontally scrolling axis.
 *
 * The row heights and the column's width are the SCALE's numbers — the module
 * that places every bar works in them — so they arrive as data
 * (`--lotics-gantt-view-*`) rather than being declared twice.
 *
 * A task's family arrives the same way, NAMED rather than resolved: the track is
 * the family's lightest ground and the progress a step up from it, never the
 * saturated 500 — a row of solid bars is the paint chart this moved away from.
 * The milestone keeps the solid shade: it is 14px and carries identity.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-gantt-view {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
    background-color: var(--card);
  }

  /* Nothing to chart is not an empty axis: the answer sits in the middle of the
     space the rows would have filled. */
  .lotics-gantt-view[data-empty] {
    align-items: center;
    justify-content: center;
    padding: var(--lotics-space-24);
  }

  .lotics-gantt-view__toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--lotics-space-12);
    padding-inline: var(--lotics-space-12);
    padding-block: var(--lotics-space-10);
  }

  .lotics-gantt-view__panes {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  /* No rule down the column: the frozen half is set off by the axis content
     beginning, and a border here is one more line on a surface already ruled
     horizontally by every row. */
  .lotics-gantt-view__labels {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    width: var(--lotics-gantt-view-label-width);
  }

  .lotics-gantt-view__label-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    height: var(--lotics-gantt-view-header);
    padding-left: var(--lotics-space-12);
    text-transform: uppercase;
  }

  .lotics-gantt-view__group-label {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
    height: var(--lotics-gantt-view-group);
    padding-inline: var(--lotics-space-12);
    padding-bottom: var(--lotics-space-6);
    text-transform: uppercase;
  }

  .lotics-gantt-view__label {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    height: var(--lotics-gantt-view-row);
    gap: var(--lotics-space-8);
    padding-inline: var(--lotics-space-12);
  }

  .lotics-gantt-view__swatch {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: var(--lotics-gantt-view-swatch-radius);
    background-color: var(--lotics-gantt-view-accent);
  }

  .lotics-gantt-view__label-text {
    flex-shrink: 1;
    min-width: 0;
  }

  .lotics-gantt-view__axis {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
  }

  .lotics-gantt-view__canvas {
    position: relative;
    width: var(--lotics-gantt-view-axis-width);
  }

  .lotics-gantt-view__ticks {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    height: var(--lotics-gantt-view-header);
  }

  .lotics-gantt-view__tick {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: var(--lotics-space-4);
    border-left: 0 solid var(--border);
  }

  /* A month's first tick draws the rule that separates it from the last one. */
  .lotics-gantt-view__tick[data-month] {
    border-left-width: 1px;
  }

  .lotics-gantt-view__group-band {
    flex-shrink: 0;
    height: var(--lotics-gantt-view-group);
  }

  .lotics-gantt-view__row {
    position: relative;
    flex-shrink: 0;
    height: var(--lotics-gantt-view-row);
  }

  .lotics-gantt-view__month-rule {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--border);
  }

  /* The bar carries no label: the frozen column beside it already names the
     task, and repeating it inside every bar is the same string twice on one
     line. */
  .lotics-gantt-view__bar {
    position: absolute;
    top: calc((var(--lotics-gantt-view-row) - var(--lotics-gantt-view-bar)) / 2);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: var(--lotics-gantt-view-bar);
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    background-color: transparent;
    appearance: none;
    cursor: default;
  }

  .lotics-gantt-view__bar:focus-visible,
  .lotics-gantt-view__milestone-hit:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-gantt-view__track {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--lotics-gantt-view-radius);
    background-color: var(--lotics-gantt-view-track);
    transition: background-color var(--lotics-duration-fast) var(--lotics-ease-standard);
  }

  .lotics-gantt-view__bar[data-pressable]:hover .lotics-gantt-view__track {
    background-color: var(--lotics-gantt-view-track-hover);
  }

  .lotics-gantt-view__progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--lotics-gantt-view-progress);
    background-color: var(--lotics-gantt-view-fill);
  }

  .lotics-gantt-view__milestone-hit {
    position: absolute;
    top: calc((var(--lotics-gantt-view-row) - var(--lotics-gantt-view-milestone)) / 2 - var(--lotics-space-2));
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--lotics-gantt-view-milestone) + var(--lotics-space-6));
    height: calc(var(--lotics-gantt-view-milestone) + var(--lotics-space-6));
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    background-color: transparent;
    appearance: none;
    cursor: default;
  }

  /* A rotated square: a moment has no duration, and drawing it as a one-day bar
     reads as a day of work that was never scheduled. */
  .lotics-gantt-view__milestone {
    width: var(--lotics-gantt-view-milestone);
    height: var(--lotics-gantt-view-milestone);
    border-radius: var(--lotics-gantt-view-milestone-radius);
    background-color: var(--lotics-gantt-view-accent);
    transform: rotate(45deg);
  }

  .lotics-gantt-view__today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--lotics-tone-red-solid);
  }
}