/* 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. It qualifies the times beside it rather than being a
       value of its own, so it stays small — but it IS a control, and it has to
       read as one before the pointer arrives.

       base.css sets `appearance: none` on every select, which removes the
       native dropdown arrow and puts nothing in its place, so the caret drawn
       here is the only mark saying this opens a menu. `padding-inline-end`
       reserves the room it sits in; the caret itself — image AND placement —
       has to live in the theme layer, for the reason spelled out there. */
    .iw-summary-zone-select {
      font-family: inherit;
      font-size: var(--fs-xsmall);
      font-variant-numeric: tabular-nums;
      padding: 2px 4px;
      padding-inline-end: var(--space-base);
      border-width: 1px;
      border-style: solid;
      border-radius: var(--radius-sm);
      cursor: pointer;
    }

    .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);
    }

    /* Carries a surface, a border and a caret AT REST, not only on hover.

       It used to be transparent on both until hovered, which — with the native
       arrow already stripped by `appearance: none` in base.css — left it
       indistinguishable from the plain text either side of it. Nothing on
       screen said the timezone could be changed at all, so the only way to
       find the control was to happen to sweep the pointer across the words
       "Calcutta · GMT+5:30". A control nobody can see is a control nobody
       uses, and this one decides what the deadline in the invitation email
       actually means.

       Still quieter than the duration pill beside it: that is a value, this is
       a qualifier you can open. Hover and focus stay as the louder states.

       The caret is `gray` rather than a token because a data URI cannot read a
       custom property — the same compromise the Create Position select makes,
       and mid-grey reads on both the light and the dark surface.

       Its repeat/position/size sit HERE, beside the image, and not with the
       other geometry in the components layer. base.css gives every select a
       `background` SHORTHAND from this same theme layer, and a shorthand
       resets the longhands it does not mention — repeat back to
       `repeat`, position to `0% 0%`, size to `auto`. Layer order beats
       specificity, so a components-layer `background-repeat: no-repeat` loses
       to it however specific it is, and the caret tiles across the whole
       control. Same layer is the only place these three can win. */
    .iw-summary-zone-select {
      background-color: oklch(from var(--glass-tint) l c h / 0.1);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='gray' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right var(--space-xs) center;
      background-size: 8px 8px;
      color: var(--text-secondary);
      border-color: oklch(from var(--glass-tint) l c h / 0.22);

      &:hover {
        background-color: oklch(from var(--glass-tint) l c h / 0.16);
        border-color: oklch(from var(--glass-tint) l c h / 0.34);
        color: var(--text-primary);
      }

      &:focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 1px;
        color: var(--text-primary);
      }
    }

    .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);
      }
    }
  }
}