/* ============================================================
   <calendar-grid-ui> — Inline single-month calendar grid.

   Substrate primitive consumed by calendar-picker-ui (popover
   wrapper), date-range-picker-ui (two side-by-side grids), and
   datetime-picker-ui (one grid + time pane).

   Two-block @scope per docs/specs/component-token-contract.md.
   Tokens mirror calendar-picker-ui's grid tokens (same surface,
   shared visual language) so consumers can override either
   --calendar-grid-* OR --calendar-picker-* and pick up the same
   look-and-feel through cascade.
   ============================================================ */

@scope (calendar-grid-ui) {
  /* ── Block 1 — TOKENS ── */
  :where(:scope) {
    /* Layout */
    --calendar-grid-gap-default:                var(--a-space-1);
    --calendar-grid-width-default:              16rem;

    /* Header */
    --calendar-grid-header-gap-default:         var(--a-space-1);
    --calendar-grid-header-mb-default:          var(--a-space-2);
    --calendar-grid-title-fg-default:           var(--a-fg);
    --calendar-grid-title-size-default:         var(--a-ui-size);
    --calendar-grid-title-weight-default:       var(--a-weight-medium);

    /* Nav buttons (prev/next) */
    --calendar-grid-nav-size-default:           1.5rem;
    --calendar-grid-nav-radius-default:         var(--a-radius-sm);
    --calendar-grid-nav-bg-default:             transparent;
    --calendar-grid-nav-bg-hover-default:       var(--a-bg-muted);
    --calendar-grid-nav-fg-default:             var(--a-fg-muted);
    --calendar-grid-nav-fg-hover-default:       var(--a-fg);
    --calendar-grid-nav-icon-size-default:      0.75rem;

    /* Weekday header */
    --calendar-grid-weekday-fg-default:         var(--a-fg-muted);
    --calendar-grid-weekday-size-default:       var(--a-ui-sm);
    --calendar-grid-weekday-weight-default:     var(--a-weight-medium);
    --calendar-grid-weekday-height-default:     1.5rem;
    --calendar-grid-weekday-mb-default:         var(--a-space-1);

    /* Day cells */
    --calendar-grid-day-size-default:           2rem;
    --calendar-grid-day-radius-default:         var(--a-radius);
    --calendar-grid-day-font-size-default:      var(--a-ui-sm);
    --calendar-grid-day-bg-default:             transparent;
    --calendar-grid-day-fg-default:             var(--a-fg-subtle);
    --calendar-grid-day-bg-hover-default:       var(--a-bg-hover);
    --calendar-grid-day-fg-hover-default:       var(--a-fg);
    --calendar-grid-day-bg-selected-default:    var(--a-accent);
    --calendar-grid-day-fg-selected-default:    var(--a-accent-fg);
    /* In-range cells (strictly between rangeStart and rangeEnd) — muted
       accent strip so the endpoints (full --a-accent fill) read as the
       primary selection while the in-range band reads as secondary
       context. Stylable independently of `selected`. */
    --calendar-grid-day-bg-in-range-default:    var(--a-accent-muted);
    --calendar-grid-day-fg-in-range-default:    var(--a-fg);
    --calendar-grid-day-fg-outside-default:     var(--a-fg-muted);
    --calendar-grid-day-fg-disabled-default:    var(--a-ui-text-disabled);
    --calendar-grid-day-today-color-default:    var(--a-accent);
    --calendar-grid-day-today-dot-size-default: var(--a-space-0-5);
    --calendar-grid-day-today-dot-offset-default: var(--a-space-1);
    --calendar-grid-day-grid-gap-default:       var(--a-space-px);
    --calendar-grid-day-focus-ring-default:     var(--a-focus-ring);

    /* Transitions */
    --calendar-grid-duration-default:           var(--a-duration-fast);
    --calendar-grid-easing-default:             var(--a-easing);

    /* Typography */
    --calendar-grid-selected-weight-default:    var(--a-weight-medium);
    --calendar-grid-today-weight-default:       var(--a-weight-medium);
  }

  /* ── Block 2 — BASE ── */
  :scope {
    box-sizing: border-box;
    display: block;
    width: var(--calendar-grid-width, var(--calendar-grid-width-default));
    font-size: var(--calendar-grid-day-font-size, var(--calendar-grid-day-font-size-default));
  }

  :scope[disabled] {
    pointer-events: none;
    opacity: 0.5;
  }

  /* Header row */
  [data-cal-header] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--calendar-grid-header-gap, var(--calendar-grid-header-gap-default));
    margin-block-end: var(--calendar-grid-header-mb, var(--calendar-grid-header-mb-default));
  }

  [data-cal-title] {
    flex: 1;
    text-align: center;
    font-size: var(--calendar-grid-title-size, var(--calendar-grid-title-size-default));
    font-weight: var(--calendar-grid-title-weight, var(--calendar-grid-title-weight-default));
    color: var(--calendar-grid-title-fg, var(--calendar-grid-title-fg-default));
  }

  [data-cal-prev],
  [data-cal-next] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--calendar-grid-nav-size, var(--calendar-grid-nav-size-default));
    height: var(--calendar-grid-nav-size, var(--calendar-grid-nav-size-default));
    padding: 0;
    border: none;
    border-radius: var(--calendar-grid-nav-radius, var(--calendar-grid-nav-radius-default));
    background: var(--calendar-grid-nav-bg, var(--calendar-grid-nav-bg-default));
    color: var(--calendar-grid-nav-fg, var(--calendar-grid-nav-fg-default));
    cursor: pointer;
    transition:
      background var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
      color      var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default));
    --a-icon-size: var(--calendar-grid-nav-icon-size, var(--calendar-grid-nav-icon-size-default));
  }
  [data-cal-prev]:hover,
  [data-cal-next]:hover {
    background: var(--calendar-grid-nav-bg-hover, var(--calendar-grid-nav-bg-hover-default));
    color: var(--calendar-grid-nav-fg-hover, var(--calendar-grid-nav-fg-hover-default));
  }

  /* Day-of-week header */
  [data-cal-weekdays] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--calendar-grid-weekday-size, var(--calendar-grid-weekday-size-default));
    font-weight: var(--calendar-grid-weekday-weight, var(--calendar-grid-weekday-weight-default));
    color: var(--calendar-grid-weekday-fg, var(--calendar-grid-weekday-fg-default));
    margin-block-end: var(--calendar-grid-weekday-mb, var(--calendar-grid-weekday-mb-default));
  }

  [data-cal-weekdays] span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--calendar-grid-weekday-height, var(--calendar-grid-weekday-height-default));
  }

  /* Day grid */
  [data-cal-grid] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--calendar-grid-day-grid-gap, var(--calendar-grid-day-grid-gap-default));
  }

  [data-cal-day] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--calendar-grid-day-size, var(--calendar-grid-day-size-default));
    height: var(--calendar-grid-day-size, var(--calendar-grid-day-size-default));
    margin: 0 auto;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--calendar-grid-day-radius, var(--calendar-grid-day-radius-default));
    background: var(--calendar-grid-day-bg, var(--calendar-grid-day-bg-default));
    color: var(--calendar-grid-day-fg, var(--calendar-grid-day-fg-default));
    font: inherit;
    font-size: var(--calendar-grid-day-font-size, var(--calendar-grid-day-font-size-default));
    cursor: pointer;
    transition:
      background var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
      color      var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default)),
      border-color var(--calendar-grid-duration, var(--calendar-grid-duration-default)) var(--calendar-grid-easing, var(--calendar-grid-easing-default));
  }

  /* ── State: hover ── */
  [data-cal-day]:not([disabled]):not([data-outside]):hover {
    background: var(--calendar-grid-day-bg-hover, var(--calendar-grid-day-bg-hover-default));
    color: var(--calendar-grid-day-fg-hover, var(--calendar-grid-day-fg-hover-default));
  }

  /* ── State: focus ── */
  [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
  [data-cal-day][data-focused] {
    outline: none;
    box-shadow: var(--calendar-grid-day-focus-ring, var(--calendar-grid-day-focus-ring-default));
  }

  /* ── State: selected ── */
  [data-cal-day][data-selected] {
    background: var(--calendar-grid-day-bg-selected, var(--calendar-grid-day-bg-selected-default));
    color: var(--calendar-grid-day-fg-selected, var(--calendar-grid-day-fg-selected-default));
    font-weight: var(--calendar-grid-selected-weight, var(--calendar-grid-selected-weight-default));
  }
  [data-cal-day][data-selected]:not([disabled]):hover {
    background: var(--calendar-grid-day-bg-selected, var(--calendar-grid-day-bg-selected-default));
    color: var(--calendar-grid-day-fg-selected, var(--calendar-grid-day-fg-selected-default));
  }

  /* ── State: in-range ──
     Cells strictly between rangeStart and rangeEnd get the muted accent
     strip. Endpoints themselves render as `[data-selected]` (full accent
     fill); the in-range middle is visually subordinate. `:not([data-selected])`
     guard prevents the muted fill from overriding the endpoint cells in
     consumer code that sets both `value` AND `range-start`/`range-end`. */
  [data-cal-day][data-in-range]:not([data-selected]) {
    background: var(--calendar-grid-day-bg-in-range, var(--calendar-grid-day-bg-in-range-default));
    color: var(--calendar-grid-day-fg-in-range, var(--calendar-grid-day-fg-in-range-default));
  }
  [data-cal-day][data-in-range]:not([data-selected]):not([disabled]):hover {
    background: var(--calendar-grid-day-bg-in-range, var(--calendar-grid-day-bg-in-range-default));
  }

  /* ── State: today (unselected) ── */
  [data-cal-day][data-today]:not([data-selected]) {
    position: relative;
    color: var(--calendar-grid-day-today-color, var(--calendar-grid-day-today-color-default));
    font-weight: var(--calendar-grid-today-weight, var(--calendar-grid-today-weight-default));
  }
  [data-cal-day][data-today]:not([data-selected])::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: var(--calendar-grid-day-today-dot-offset, var(--calendar-grid-day-today-dot-offset-default));
    width: var(--calendar-grid-day-today-dot-size, var(--calendar-grid-day-today-dot-size-default));
    height: var(--calendar-grid-day-today-dot-size, var(--calendar-grid-day-today-dot-size-default));
    border-radius: 50%;
    background: var(--calendar-grid-day-today-color, var(--calendar-grid-day-today-color-default));
    transform: translateX(-50%);
    pointer-events: none;
  }

  /* ── State: outside month ── */
  [data-cal-day][data-outside] {
    color: var(--calendar-grid-day-fg-outside, var(--calendar-grid-day-fg-outside-default));
    cursor: default;
  }

  /* ── State: disabled (excluding outside) ── */
  [data-cal-day]:disabled:not([data-outside]) {
    color: var(--calendar-grid-day-fg-disabled, var(--calendar-grid-day-fg-disabled-default));
    cursor: not-allowed;
  }
}
