/* ==========================================================================
   The toolbar of the schedule screen — Features/Schedule/Components/ScheduleToolbar.razor
   and the keyboard host beside it.

   Every value here is the one measured in the origin (PLANNING-SCHEDULE-UI.md §1.2, read off
   `Toolbar.tsx:74-237`) and every colour is a token: the family's block in `tokens.css` owns the
   palette, and this sheet references it and declares no token of its own (DEC-W75). The owner's
   visual pass is a pass over those tokens (DEC-W84), so a value that has to change is changed
   there — and where a measurement of the origin has no token yet, the rule carries the measured
   number with the line that measures it, so the pass can turn it into one.

   The order of the rules follows the order of the bar: the frame, the heading, the group of
   controls, the three views, the scale, the icon buttons, the separators and the start date.
   ========================================================================== */

/* ---- The frame: heading on the left, controls on the right, 16px below (§1.2) ------------ */
.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

/* ---- What the screen is called, and how many activities it has --------------------------- */
.schedule-toolbar__title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.schedule-toolbar__count {
  margin: var(--space-3xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ---- The group of controls: 6px apart, measured `gap-1.5` -------------------------------- */
.schedule-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.schedule-toolbar__actions,
.schedule-toolbar__actions-menu {
  display: contents;
}

.schedule-toolbar__actions-toggle {
  display: none;
}

/* ---- The three views, one segmented control: the one in force is what `aria-pressed` says ---
   The state is carried by `aria-pressed`, which is both what a screen reader announces and what
   paints the half in force, so the drawing and the announcement cannot disagree. */
.schedule-toolbar__views {
  display: inline-flex;
  overflow: hidden;
  margin-right: var(--space-xs);
  border: var(--border-default);
  border-radius: 0.5rem;
}

.schedule-toolbar__view {
  min-height: 40px;
  padding: 0.375rem var(--space-sm);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.schedule-toolbar__view:hover {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.schedule-toolbar__view[aria-pressed="true"] {
  background: var(--schedule-row-selected);
  color: var(--color-primary-strong);
}

/* ---- The scale: the list the server published, drawn as the origin draws it --------------- */
.schedule-toolbar__scale {
  min-height: 40px;
  padding: 0.375rem var(--space-xs);
  border: var(--border-default);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

/* ---- An icon button: a 40px target on pointer layouts, with a 16px drawing ---------------- */
.schedule-toolbar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: var(--border-default);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.schedule-toolbar__button:hover:not(:disabled) {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

/* Disabled is 30% opacity and no pointer, measured `opacity-30 cursor-not-allowed`. */
.schedule-toolbar__button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Deleting with rows selected turns the button red as the pointer reaches it (`Toolbar.tsx:207`). */
.schedule-toolbar__button--destructive:hover:not(:disabled) {
  border-color: var(--color-error-border);
  background: var(--color-error-soft);
  color: var(--color-error);
}

/* The critical path in force: the red of the critical path itself, which is what it paints. */
.schedule-toolbar__button[aria-pressed="true"] {
  border-color: var(--color-error-border);
  background: var(--schedule-critical-soft);
  color: var(--schedule-critical);
}

/* The drawing of a button. Its size is the `width`/`height` of the element, as in `Icon`; the
   rule only takes the line box out of the button's height, which the origin's flex centring did. */
.schedule-toolbar__glyph {
  display: block;
}

/* ---- A separator: 1x24, `gray-200`, 4px to each side ------------------------------------- */
.schedule-toolbar__separator {
  width: var(--border-width);
  height: var(--space-lg);
  margin: 0 var(--space-2xs);
  background: var(--color-border);
}

/* ---- Where every task starts: a rule to its left, and the two states of the date ---------- */
.schedule-toolbar__start {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: var(--space-xs);
  padding-left: var(--space-sm);
  border-left: var(--border-width) solid var(--color-border);
}

.schedule-toolbar__start-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

/* Without a start date there is nowhere for a task to begin, and the origin says so in red. */
.schedule-toolbar__start-label--missing {
  color: var(--color-error);
}

.schedule-toolbar__start-input {
  min-height: 40px;
  padding: 0.375rem var(--space-xs);
  border: var(--border-default);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

/* The missing state of the field: `border-red-300 bg-red-50` in the origin. */
.schedule-toolbar__start-input--missing {
  border-color: var(--color-error-border);
  background: var(--color-error-soft);
}

@media (max-width: 1199px) {
  .schedule-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-xs) var(--space-md);
    width: 100%;
    margin-bottom: 0;
  }

  .schedule-toolbar__controls {
    flex: 1 1 100%;
  }

  .schedule-toolbar__views {
    order: -2;
  }

  .schedule-toolbar__add {
    order: -1;
  }
}

@media (max-width: 767px) {
  .schedule-toolbar__controls {
    align-items: stretch;
    gap: var(--space-xs);
  }

  .schedule-toolbar__views {
    flex: 1 1 auto;
    margin-right: 0;
  }

  .schedule-toolbar__view {
    flex: 1 1 0;
    min-height: 44px;
  }

  .schedule-toolbar__add,
  .schedule-toolbar__add .button,
  .schedule-toolbar__scale,
  .schedule-toolbar__button,
  .schedule-toolbar__start-input {
    min-height: 44px;
  }

  .schedule-toolbar__actions {
    position: relative;
    display: block;
    flex: 0 0 auto;
  }

  .schedule-toolbar__actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: 0 var(--space-sm);
    border: var(--border-default);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
  }

  .schedule-toolbar__actions-toggle[aria-expanded="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
  }

  .schedule-toolbar__actions-chevron {
    transition: transform 120ms ease;
  }

  .schedule-toolbar__actions-toggle[aria-expanded="true"] .schedule-toolbar__actions-chevron {
    transform: rotate(180deg);
  }

  .schedule-toolbar__actions-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--space-2xs));
    right: 0;
    display: none;
    grid-template-columns: repeat(4, 44px);
    align-items: center;
    gap: var(--space-xs);
    width: max-content;
    max-width: calc(100vw - (2 * var(--space-md)));
    padding: var(--space-sm);
    border: var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .schedule-toolbar__actions-menu--open {
    display: grid;
  }

  .schedule-toolbar__button {
    width: 44px;
    height: 44px;
  }

  .schedule-toolbar__separator {
    display: none;
  }

  .schedule-toolbar__start {
    grid-column: 1 / -1;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .schedule-toolbar__start-input {
    min-width: 0;
    width: 100%;
  }

  .schedule-toolbar__scale {
    grid-column: span 2;
  }
}