@layer components {
  /* Naipe (instrument) colors
     ParadeHelper#parade_instrument_cell_classes returns "naipe naipe--<hue>".
     Hues are Tailwind v4's -100 (bg) / -800 (fg) / -200 (ring) values so the
     grid, toolbar filters and picker chips keep their original colors. Sets the
     .btn custom properties too, so a naipe .btn picks the colors up as well.
  /* ------------------------------------------------------------------------ */

  .naipe {
    --btn-background: var(--naipe-bg);
    --btn-color: var(--naipe-fg);

    background-color: var(--naipe-bg);
    box-shadow: 0 0 0 1px var(--naipe-ring);
    color: var(--naipe-fg);
  }

  .naipe--blue    { --naipe-bg: oklch(93.2% 0.032 255.585); --naipe-fg: oklch(42.4% 0.199 265.638); --naipe-ring: oklch(88.2% 0.059 254.128); }
  .naipe--emerald { --naipe-bg: oklch(95% 0.052 163.051);   --naipe-fg: oklch(43.2% 0.095 166.913); --naipe-ring: oklch(90.5% 0.093 164.15); }
  .naipe--amber   { --naipe-bg: oklch(96.2% 0.059 95.617);  --naipe-fg: oklch(47.3% 0.137 46.201);  --naipe-ring: oklch(92.4% 0.12 95.746); }
  .naipe--rose    { --naipe-bg: oklch(94.1% 0.03 12.58);    --naipe-fg: oklch(45.5% 0.188 13.697);  --naipe-ring: oklch(89.2% 0.058 10.001); }
  .naipe--indigo  { --naipe-bg: oklch(93% 0.034 272.788);   --naipe-fg: oklch(39.8% 0.195 277.366); --naipe-ring: oklch(87% 0.065 274.039); }
  .naipe--fuchsia { --naipe-bg: oklch(95.2% 0.037 318.852); --naipe-fg: oklch(45.2% 0.211 324.591); --naipe-ring: oklch(90.3% 0.076 319.62); }
  .naipe--lime    { --naipe-bg: oklch(96.7% 0.067 122.328); --naipe-fg: oklch(45.3% 0.124 130.933); --naipe-ring: oklch(93.8% 0.127 124.321); }
  .naipe--cyan    { --naipe-bg: oklch(95.6% 0.045 203.388); --naipe-fg: oklch(45% 0.085 224.283);   --naipe-ring: oklch(91.7% 0.08 205.041); }
  .naipe--violet  { --naipe-bg: oklch(94.3% 0.029 294.588); --naipe-fg: oklch(43.2% 0.232 292.759); --naipe-ring: oklch(89.4% 0.057 293.283); }
  .naipe--teal    { --naipe-bg: oklch(95.3% 0.051 180.801); --naipe-fg: oklch(43.7% 0.078 188.216); --naipe-ring: oklch(91% 0.096 180.426); }
  .naipe--slate   { --naipe-bg: oklch(96.8% 0.007 247.896); --naipe-fg: oklch(27.9% 0.041 260.031); --naipe-ring: oklch(92.9% 0.013 255.508); }

  /* Small pill used for naipe filters (toolbar, on a .btn) and naipe labels (picker rows) */
  .parade-chip {
    --btn-padding: 0.25rem 0.5rem;

    align-items: center;
    border: 1px solid var(--color-ink-light);
    border-radius: 99rem;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.333;
    padding: var(--btn-padding);
    white-space: nowrap;
  }

  /* Toggled by position_grid_controller.js on the filter that is applied */
  .parade-chip--active {
    box-shadow: 0 0 0 2px var(--naipe-fg, var(--color-ink));
  }

  .parade-avatar {
    block-size: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: 2rem;
  }

  /* Pages
  /* ------------------------------------------------------------------------ */

  /* Costume sizes toolbar filters (inside a .toolbar) */
  .parade-filters__segment {
    inline-size: 100%;

    @media (min-width: 640px) {
      inline-size: auto;
      min-inline-size: 160px;
    }
  }

  .parade-filters__sizes {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: 100%;

    @media (min-width: 640px) {
      inline-size: auto;
    }
  }

  /* Segment members page (segments/show): search bar above the member cards */
  .parade-search {
    background-color: var(--color-canvas);
    border-block-end: 1px solid var(--color-ink-lighter);
    padding: 0.75rem 1rem;
  }

  .parade-search__form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }

  .parade-search__select {
    min-inline-size: 180px;
  }

  /* Costume size form (modal body) */
  .parade-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .parade-form__sizes {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;

    @media (min-width: 640px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* Component / director picker (turbo-frame modal; its search fills the picker_results frame)
  /* ------------------------------------------------------------------------ */

  .parade-picker {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
    display: flex;
    flex-direction: column;
    max-block-size: 85dvh;
    max-inline-size: 28rem;
  }

  .parade-picker__current {
    align-items: center;
    background-color: color-mix(in srgb, var(--color-ink-lightest) 50%, var(--color-canvas));
    border-block-end: 1px solid var(--color-ink-lightest);
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
  }

  .parade-picker__search {
    border-block-end: 1px solid var(--color-ink-lightest);
    padding: 1rem;
  }

  .parade-picker__results {
    flex: 1;
    margin: 0;
    min-block-size: 0;
    overflow-y: auto;
    padding: 0;

    > * + * {
      border-block-start: 1px solid var(--color-ink-lightest);
    }
  }

  /* A label around a visually hidden radio: the chosen row is the checked one. */
  .parade-picker__row {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    position: relative;

    &:hover {
      background-color: color-mix(in srgb, var(--color-ink-lightest) 50%, var(--color-canvas));
    }

    &:has(:checked),
    &:has(:checked):hover {
      background-color: var(--color-ink-lightest);
    }

    &:has(:focus-visible) {
      outline: 2px solid var(--color-link);
      outline-offset: -2px;
    }
  }

  .parade-picker__name {
    font-weight: 500;
  }

  .parade-picker__meta {
    color: var(--color-ink-dark);
    font-size: 0.75rem;
    line-height: 1.333;
  }

  .parade-picker__empty {
    color: var(--color-ink-dark);
    font-size: var(--text-small);
    padding: 1.5rem;
    text-align: center;
  }

  .parade-picker__actions {
    align-items: center;
    border-block-start: 1px solid var(--color-ink-lighter);
    display: flex;
    gap: 0.5rem;
    padding: 1rem;

    > * {
      flex: 1;
    }
  }

  /* Positions map (parade/positions)
  /* ------------------------------------------------------------------------ */

  .parade-positions {
    margin: 0.25rem;

    @media (min-width: 1024px) {
      flex: 1;
      overflow: auto;
      position: relative;
      z-index: 1;
    }
  }

  .parade-toolbar {
    align-items: center;
    background-color: var(--color-canvas);
    border-block-end: 1px solid var(--color-ink-lighter);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    inset-block-start: 0;
    padding: 0.5rem;
    position: sticky;
    z-index: 10;
  }

  .parade-toolbar__naipes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .parade-toolbar__controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-inline-start: auto;
  }

  .parade-toolbar__stepper {
    align-items: center;
    display: flex;
    gap: 0.25rem;
  }

  .parade-toolbar__label {
    color: var(--color-ink-dark);
    font-size: 0.75rem;
    line-height: 1.333;
  }

  /* --cell-base is the responsive base size (overridden below at phone widths).
     --cell-zoom is inherited from .parade-positions, where position_grid_controller.js
     sets it inline (1 = the default size), so it survives the grid frame being
     replaced. Keeping zoom on its own custom property — instead of writing
     --cell-size inline — means the inline style never beats the mobile media
     query's --cell-base override. */
  .positions-scroll {
    --cell-base: 4.9rem;
    --cell-size: calc(var(--cell-base) * var(--cell-zoom, 1));

    margin-block-start: 0.5rem;
    overflow-x: auto;

    @media (max-width: 639px) {
      --cell-base: 3.4rem;
    }
  }

  .position-grid {
    display: inline-grid;
    gap: 0.25rem;
  }

  .position-grid__col-label,
  .position-grid__row-label {
    background-color: var(--color-canvas);
    color: var(--color-ink-dark);
    font-size: 0.75rem;
    line-height: 1.333;
    position: sticky;
    text-align: center;
    z-index: 10;
  }

  .position-grid__col-label {
    inset-block-start: 0;
    padding-block: 0.25rem;
  }

  .position-grid__row-label {
    inset-inline-start: 0;
  }

  .position-cell {
    align-items: center;
    block-size: var(--cell-size);
    border: 1px solid var(--color-ink-lighter);
    border-radius: 0.25rem;
    display: flex;
    inline-size: var(--cell-size);
    justify-content: center;
    position: relative;
    text-decoration: none;
  }

  .position-cell--neutral {
    background-color: var(--color-ink-lightest);

    &:hover {
      background-color: var(--color-ink-lighter);
    }
  }

  .position-cell--corridor {
    background-color: oklch(98.7% 0.022 95.277);
  }

  .position-cell__add {
    color: var(--color-ink-medium);
  }

  /* Directors share a cell: overlapping avatars */
  .position-cell__stack {
    align-items: center;
    display: flex;
    justify-content: center;

    > * {
      box-shadow: 0 0 0 2px var(--color-canvas);
    }

    > * + * {
      margin-inline-start: -0.75rem;
    }
  }

  .position-cell__more {
    background-color: color-mix(in srgb, var(--color-canvas) 80%, transparent);
    border-radius: 0.25rem;
    color: var(--color-ink-darker);
    font-size: 10px;
    font-weight: 600;
    inset-block-end: 0;
    inset-inline-end: 0.25rem;
    line-height: 1;
    padding-inline: 0.25rem;
    position: absolute;
  }

  /* Naipe filter: cells of other naipes fade out (position_grid_controller.js) */
  .position-cell--dimmed {
    opacity: 0.2;
  }

  /* Drag and drop (position_cell_controller.js)
     Kept after .naipe so the drop target's box-shadow beats the naipe ring. */
  [data-controller~="position-cell"] {
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 120ms ease;
  }

  .position-cell--dragging {
    opacity: 0.35;
    transform: scale(0.92) rotate(-2deg);
  }

  .position-cell--drop-target {
    box-shadow: 0 0 0 2px var(--color-primary-400, #84cc16),
                0 8px 24px -8px rgba(132, 204, 22, 0.4);
    transform: scale(1.06);
    z-index: 5;
  }

  @keyframes position-cell-land {
    0%   { transform: scale(1.15); }
    60%  { transform: scale(0.96); }
    100% { transform: scale(1); }
  }

  .position-cell--landing img,
  .position-cell--landing > div {
    animation: position-cell-land 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes position-cell-reject {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
  }

  .position-cell--reject {
    animation: position-cell-reject 360ms ease;
  }

  /* Mapa de vestuário */
  .costume-map__title { margin: 0; font-size: 0.9375rem; font-weight: 800; color: #243b53; }
  .costume-map col, .costume-map th { min-width: 88px; }
  .costume-map { table-layout: auto; }
  .costume-map__count { color: #486581; }
  .costume-map .costume-map__total { background: #f7f9fc; border-right: 1px solid #e4e9f2; }
  .costume-map .costume-map__missing td { background: #fff8f0; }
  .costume-map .costume-map__missing .dt__cell { color: #9c4221; font-weight: 600; }
  .costume-map .costume-map__missing a { color: inherit; }
  /* Size and total stay in view while scrolling across many segments. */
  .costume-map th:first-child, .costume-map td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: #fff; min-width: 112px; width: 112px; white-space: nowrap; }
  .costume-map thead th:first-child { z-index: 3; background: #fafbfd; }
  .costume-map .costume-map__total { position: sticky; inset-inline-start: 112px; z-index: 1; }
  .costume-map thead .costume-map__total { z-index: 3; }
  .costume-map .costume-map__missing td:first-child { background: #fff8f0; }
  /* Row hover from tables.css, restated over the tinted and sticky cells above (page rules beat that layer). */
  .costume-map tbody tr:hover td { background: #f8f9fc; }
  .costume-map__pieces { display: flex; flex-direction: column; gap: 1rem; }
  @media (min-width: 900px) {
    .costume-map__pieces--single { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  }
  .costume-map__pieces--single .costume-map { min-width: 0; }
  .costume-map__pending { list-style: none; margin: 0; padding: 0; max-height: 24rem; overflow-y: auto; text-align: start; }
  .costume-map__pending li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 16px; border-bottom: 1px solid #eef0f5; font-size: 0.8125rem; }
  .costume-map__pending li:last-child { border-bottom: 0; }
  .costume-map__pending-name { font-weight: 600; color: #243b53; }
  .costume-map__pending-meta { color: #627d98; flex: 1; }
  .costume-map { text-align: start; }
}