/* Invitation window picker — the branded start/duration control on the
   Add Candidates tab (position detail). Extracted into its own file rather
   than grown into position-detail.css, which is already well past the
   file-size threshold. Structure lives in @layer components, colour in
   @layer theme, both nested under the .detail-page page root. */

@layer components {
  .detail-page {
    .invitation-window {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      margin-block-end: var(--space-lg);
      padding-block-end: var(--space-lg);
      border-block-end-width: 1px;
      border-block-end-style: solid;
    }

    .iw-row {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      align-items: start;
      gap: var(--space-md);

      @media (max-width: 560px) {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
      }
    }

    .iw-label {
      padding-block-start: var(--space-xs);
      font-size: var(--fs-tiny);
      font-weight: var(--fw-semibold);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .iw-control {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      min-inline-size: 0;
    }

    /* --- Opens: segmented Now / Schedule --- */
    .iw-seg {
      display: inline-flex;
      align-self: start;
      gap: var(--space-4xs);
      padding: var(--space-4xs);
      border-radius: 10px;
      border-width: 1px;
      border-style: solid;
    }

    .iw-seg-btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-md);
      border: none;
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      transition: color 0.12s ease-out;
    }

    .iw-dot {
      inline-size: 7px;
      block-size: 7px;
      border-radius: 50%;
      opacity: 0.5;
    }

    .iw-seg-btn.is-active .iw-dot {
      opacity: 1;
    }

    /* --- Open for: duration chips --- */
    .iw-chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    .iw-chip {
      padding: var(--space-xs) var(--space-md);
      border-width: 1px;
      border-style: solid;
      border-radius: 100px;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-medium);
      transition:
        color 0.12s ease-out,
        border-color 0.12s ease-out,
        background 0.12s ease-out;
    }

    /* --- Custom / scheduled date field (opens the popover) --- */
    .iw-slot {
      position: relative;
    }

    .iw-field {
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      min-inline-size: 230px;
      padding: var(--space-sm) var(--space-md);
      border-width: 1px;
      border-style: solid;
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-small);
      text-align: start;
      transition:
        border-color 0.12s ease-out,
        box-shadow 0.12s ease-out;

      svg {
        flex: 0 0 auto;
      }
    }

    .iw-field-val {
      font-variant-numeric: tabular-nums;
    }

    /* --- Live window summary --- */
    .iw-summary {
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      padding: var(--space-md) var(--space-base);
      border-radius: 12px;
      border-width: 1px;
      border-style: solid;
    }

    .iw-summary-line {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-sm);
      margin: 0;
      font-size: var(--fs-small);

      b {
        font-weight: var(--fw-semibold);
        font-variant-numeric: tabular-nums;
      }
    }

    .iw-summary-lead {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2xs);
    }

    /* Sits right after the closing time, before the duration pill pushes
       itself to the end. Deliberately quiet — it is a qualifier on the times
       beside it, not a value of its own. */
    .iw-summary-zone {
      font-size: var(--fs-xsmall);
      font-variant-numeric: tabular-nums;

      &:empty {
        display: none;
      }
    }

    .iw-summary-dur {
      margin-inline-start: auto;
      padding: var(--space-4xs) var(--space-sm);
      border-width: 1px;
      border-style: solid;
      border-radius: 100px;
      font-size: var(--fs-xsmall);
      font-weight: var(--fw-semibold);
      white-space: nowrap;
    }

    .iw-warn {
      margin: 0;
      font-size: var(--fs-xsmall);

      &[hidden] {
        display: none;
      }
    }

    /* mini timeline */
    .iw-track {
      position: relative;
      block-size: 6px;
      border-radius: 6px;
    }

    /* Driven by invitation-window.js: --iw-fill-from is where the window opens
       on the axis, --iw-fill-to where it closes, both as percentages of the
       axis span. These were hardcoded 14%/92%, which is why every duration drew
       the same bar. The fallbacks are only what paints before the first apply()
       — a full bar, so a failed script degrades to the old decorative look
       rather than an empty track. The max() floor keeps a very short window
       visible as a sliver instead of collapsing to nothing. */
    .iw-track-fill {
      position: absolute;
      inset-block: 0;
      inset-inline-start: var(--iw-fill-from, 0%);
      inline-size: max(2px, calc(var(--iw-fill-to, 100%) - var(--iw-fill-from, 0%)));
      border-radius: 6px;
    }

    .iw-track-labels {
      display: flex;
      justify-content: space-between;
      font-size: var(--fs-tiny);
      font-variant-numeric: tabular-nums;
    }

    /* --- Popover calendar (markup built by invitation-window.js) --- */
    .iw-cal {
      position: absolute;
      z-index: 40;
      inset-block-start: calc(100% + var(--space-xs));
      inset-inline-start: 0;
      inline-size: 288px;
      padding: var(--space-md);
      border-radius: 14px;
      border-width: 1px;
      border-style: solid;
    }

    /* date-field.js parks the calendar on the page root and positions it from
       the trigger's viewport rect, because its slot can sit inside the
       sent-invitations table — an overflow-x container with a backdrop-filter,
       which clips absolute children AND contains fixed ones. Physical top/left
       because that is what getBoundingClientRect reports; the logical offsets
       above have to be cleared or they fight the inline values.

       Flat `.iw-cal--detached`, NOT a nested `&--detached`. Native CSS nesting
       has no Sass-style concatenation: `&--detached` is an invalid selector and
       is silently dropped, so the rule would simply never paint and the bug
       would look unfixed. admin-fe-new serves CSS raw — prettier only, no
       postcss or lightningcss — so there is no build step to compile it away.
       There ARE `&--mod` rules elsewhere in this codebase; they are latently
       broken, not precedent. */
    .iw-cal--detached {
      position: fixed;
      inset-block-start: auto;
      inset-inline-start: auto;
    }

    .iw-cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-block-end: var(--space-sm);
    }

    .iw-cal-title {
      font-family: var(--font-heading);
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
    }

    .iw-cal-nav {
      display: grid;
      place-items: center;
      inline-size: 28px;
      block-size: 28px;
      border-width: 1px;
      border-style: solid;
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
    }

    .iw-cal-dow,
    .iw-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }

    .iw-cal-dow span {
      padding-block: var(--space-4xs);
      text-align: center;
      font-size: var(--fs-tiny);
      font-weight: var(--fw-semibold);
    }

    .iw-cal-day {
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      border: none;
      border-radius: 8px;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-xsmall);
      font-variant-numeric: tabular-nums;

      &.is-disabled {
        cursor: not-allowed;
      }
    }

    .iw-cal-time {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-block-start: var(--space-md);
      padding-block-start: var(--space-md);
      border-block-start-width: 1px;
      border-block-start-style: solid;
    }

    .iw-cal-time-input {
      inline-size: 68px;
      padding: var(--space-2xs) var(--space-sm);
      border-width: 1px;
      border-style: solid;
      border-radius: 8px;
      text-align: center;
      font-family: inherit;
      font-size: var(--fs-small);
      font-variant-numeric: tabular-nums;
    }

    .iw-cal-quick {
      display: flex;
      gap: var(--space-4xs);
      margin-inline-start: auto;
    }

    .iw-cal-quick button {
      padding: var(--space-4xs) var(--space-sm);
      border-width: 1px;
      border-style: solid;
      border-radius: 100px;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-tiny);
    }

    .iw-cal-done {
      inline-size: 100%;
      margin-block-start: var(--space-md);
      padding: var(--space-sm);
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      font-size: var(--fs-small);
      font-weight: var(--fw-semibold);
    }
  }
}

@layer theme {
  .detail-page {
    .invitation-window {
      border-block-end-color: oklch(from var(--glass-tint) l c h / 0.08);
    }

    .iw-label {
      color: var(--text-secondary);
    }

    .iw-seg {
      background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.04));
      border-color: oklch(from var(--glass-tint) l c h / 0.06);
    }

    .iw-seg-btn {
      color: var(--text-secondary);

      &.is-active {
        background: var(--surface-elevated);
        color: var(--text-primary);
        box-shadow: 0 1px 2px oklch(0% 0 0 / 0.15);
      }
    }

    .iw-dot {
      background: currentColor;
    }

    .iw-seg-btn.is-active .iw-dot {
      background: var(--color-success);
      box-shadow: 0 0 0 3px oklch(from var(--color-success) l c h / 0.2);
    }

    .iw-chip {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
      border-color: oklch(from var(--glass-tint) l c h / 0.1);
      color: var(--text-secondary);

      &:hover {
        border-color: oklch(from var(--accent-primary) l c h / 0.4);
        color: var(--text-primary);
      }

      &.is-active {
        background: oklch(from var(--accent-primary) l c h / 0.1);
        border-color: oklch(from var(--accent-primary) l c h / 0.45);
        color: var(--accent-primary);
      }
    }

    .iw-field {
      background: light-dark(oklch(100% 0 0), oklch(100% 0 0 / 0.04));
      border-color: light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.08));
      color: var(--text-primary);

      svg {
        color: var(--text-secondary);
      }

      &:hover {
        border-color: oklch(from var(--accent-primary) l c h / 0.35);
      }

      &.is-open {
        border-color: oklch(from var(--accent-primary) l c h / 0.5);
        box-shadow: 0 0 0 3px oklch(from var(--accent-primary) l c h / 0.15);
      }
    }

    .iw-summary {
      background: oklch(from var(--accent-primary) l c h / 0.06);
      border-color: oklch(from var(--accent-primary) l c h / 0.16);

      &.is-invalid {
        background: oklch(from var(--color-error) l c h / 0.06);
        border-color: oklch(from var(--color-error) l c h / 0.22);
      }
    }

    .iw-summary-lead,
    .iw-summary-sep {
      color: var(--text-secondary);
    }

    .iw-summary-zone {
      color: var(--text-tertiary);
    }

    .iw-summary-dur {
      background: oklch(from var(--accent-primary) l c h / 0.12);
      border-color: oklch(from var(--accent-primary) l c h / 0.22);
      color: var(--accent-primary);
    }

    .iw-summary.is-invalid .iw-summary-dur {
      background: oklch(from var(--color-error) l c h / 0.12);
      border-color: oklch(from var(--color-error) l c h / 0.25);
      color: var(--color-error);
    }

    .iw-warn {
      color: var(--color-error);
    }

    .iw-track {
      background: oklch(from var(--glass-tint) l c h / 0.08);
    }

    .iw-track-fill {
      background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
    }

    .iw-track-labels {
      color: var(--text-secondary);
    }

    .iw-cal {
      background: var(--surface-elevated);
      border-color: oklch(from var(--glass-tint) l c h / 0.06);
      box-shadow: 0 24px 60px light-dark(oklch(0% 0 0 / 0.14), oklch(0% 0 0 / 0.55));
    }

    .iw-cal-title {
      color: var(--text-primary);
    }

    .iw-cal-nav {
      border-color: oklch(from var(--glass-tint) l c h / 0.08);
      color: var(--text-secondary);

      &:hover {
        border-color: oklch(from var(--accent-primary) l c h / 0.4);
        color: var(--text-primary);
      }
    }

    .iw-cal-dow span {
      color: var(--text-secondary);
    }

    .iw-cal-day {
      color: var(--text-primary);

      &:hover {
        background: oklch(from var(--accent-primary) l c h / 0.12);
      }

      &.is-disabled {
        color: var(--text-secondary);
      }

      &.is-disabled:hover {
        background: transparent;
      }

      &.is-today {
        box-shadow: inset 0 0 0 1px oklch(from var(--accent-primary) l c h / 0.5);
      }

      &.is-selected {
        background: var(--accent-primary);
        color: oklch(100% 0 0);
      }
    }

    .iw-cal-time {
      border-block-start-color: oklch(from var(--glass-tint) l c h / 0.08);
      color: var(--text-secondary);
    }

    .iw-cal-time-input {
      background: light-dark(oklch(100% 0 0), oklch(100% 0 0 / 0.04));
      border-color: light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.08));
      color: var(--text-primary);
    }

    .iw-cal-quick button {
      background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
      border-color: oklch(from var(--glass-tint) l c h / 0.1);
      color: var(--text-secondary);

      &:hover {
        color: var(--text-primary);
      }
    }

    .iw-cal-done {
      background: var(--accent-warm);
      color: oklch(100% 0 0);

      &:hover {
        background: var(--accent-warm-hover);
      }
    }
  }
}