/* ============================================================================
   «Гості»: власні групи гостей — смуги груп, мітки, банер обраної групи, редактор умов.
   Окремий файл, щоб не змішувати з основною дизайн-системою; токени — з app.css.
   Колір групи приходить змінною --gg у style елемента.
   ========================================================================= */

@layer components {

  /* ─────────────────────────── Смуги груп над списком ─────────────────────────── */

  .gg-strips { display: grid; gap: 8px; }
  .gg-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .gg-strip__label {
    min-width: 92px; font-size: var(--t-xs); font-weight: 560; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: .04em;
  }

  .gg-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--gg, var(--accent));
  }
  .gg-dot--lg { width: 12px; height: 12px; }

  .gg-chip.active {
    background: color-mix(in oklab, var(--gg) 14%, transparent);
    border-color: color-mix(in oklab, var(--gg) 45%, transparent);
    color: var(--ink);
  }
  .gg-chip svg { color: var(--gg); }
  .gg-chip--add { border-style: dashed; color: var(--accent); }
  .gg-chip--add:hover { border-color: var(--accent-line); color: var(--accent); }

  /* Сегменти гостей: тон етапу — крапка й підсвітка обраного. */
  .gg-seg { --gg: var(--ink-3); }
  .gg-seg--ok { --gg: var(--ok); }
  .gg-seg--info { --gg: var(--info); }
  .gg-seg--warn { --gg: var(--warn); }
  .gg-seg--danger { --gg: var(--danger); }
  .gg-seg--accent { --gg: var(--accent); }
  .gg-seg.active {
    background: color-mix(in oklab, var(--gg) 14%, transparent);
    border-color: color-mix(in oklab, var(--gg) 45%, transparent);
    color: var(--ink);
  }

  /* ─────────────────────────── Банер обраної групи ─────────────────────────── */

  .gg-banner {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-left: 4px solid var(--gg);
    background: linear-gradient(110deg, color-mix(in oklab, var(--gg) 9%, transparent), transparent 65%), var(--surface-solid);
  }
  .gg-banner__main { display: grid; gap: 4px; flex: 1 1 360px; min-width: 0; }
  .gg-banner__main h3 { margin: 0; }
  .gg-banner__main p { margin: 0; }
  .gg-banner__rules { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); }
  .gg-banner__rules svg { color: var(--gg); margin-top: 3px; flex-shrink: 0; }

  /* ─────────────────────────── Вибір рядків ─────────────────────────── */

  .gg-bulk {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px;
    border-bottom: 1px solid var(--line); background: var(--accent-soft);
  }
  .table tr.is-selected td { background: color-mix(in oklab, var(--accent) 6%, transparent); }

  /* ─────────────────────────── Мітки груп у рядку ─────────────────────────── */

  .gg-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
  .gg-tag {
    display: inline-flex; align-items: center; gap: 5px; max-width: 180px;
    padding: 2px 8px; border-radius: var(--r-full);
    font-size: var(--t-2xs); font-weight: 560; line-height: 1.5; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
    color: var(--ink-2);
    background: color-mix(in oklab, var(--gg) 13%, transparent);
    border: 1px solid color-mix(in oklab, var(--gg) 32%, transparent);
  }
  .gg-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--gg); flex-shrink: 0; }
  .gg-tag--preview { font-size: var(--t-xs); margin-left: 6px; }

  /* ─────────────────────────── Редактор групи ─────────────────────────── */

  /* Перемикачі редактора — за шириною вмісту, іконка в рядку з текстом. */
  .gg-editor .segmented { align-self: flex-start; justify-self: start; width: fit-content; max-width: 100%; flex-wrap: wrap; }
  .gg-editor .segmented__item { display: inline-flex; align-items: center; gap: 5px; }

  .gg-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .gg-swatch {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    background: var(--gg); border: 2px solid var(--surface-solid);
    box-shadow: 0 0 0 1px var(--line-strong);
    transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
  }
  .gg-swatch:hover { transform: scale(1.08); }
  .gg-swatch.is-active { box-shadow: 0 0 0 2px var(--gg); }

  .gg-rules {
    display: grid; gap: 14px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-sunken);
  }
  .gg-rules .field { margin: 0; }
  .gg-rules legend { padding: 0 4px; }
  .gg-rules__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

  /* Умови поведінки з програми лояльності — окремим блоком під умовами картки Poster. */
  .gg-rules__section { display: grid; gap: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
  .gg-rules__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
  .gg-rules__title svg { color: var(--accent); }
  .gg-rules__title .muted { font-weight: 400; font-size: var(--t-sm); }

  .gg-preview {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
    border-radius: var(--r-sm); background: var(--surface-solid); border: 1px solid var(--line);
  }
  .gg-preview > svg { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
  .gg-preview > div { min-width: 0; }

  /* ─────────────────────────── Рядок пошуку й фільтрів над списком ─────────────────────────── */

  /*
   * Пошук, фільтри й порядок — одним рядком. Пошук забирає вільне місце, але першим і
   * поступається ним; лише на вузькому екрані поля переносяться.
   */
  .card:has(> .gg-toolbar) { container-type: inline-size; }
  .gg-toolbar { justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
  .gg-search {
    position: relative; display: flex; align-items: center;
    flex: 1 1 160px; min-width: 160px; max-width: 420px;
  }
  .gg-search > svg { position: absolute; left: 10px; color: var(--ink-4); pointer-events: none; }
  .gg-search .input { width: 100%; padding-left: 32px; }

  .gg-toolbar .select { width: auto; flex: none; padding-left: 10px; }
  .gg-toolbar__end { margin-left: auto; }
  .gg-toolbar__text { margin-left: 6px; }

  /* Другий рядок — фільтри поведінки з програми лояльності. */
  .gg-toolbar__break { flex-basis: 100%; height: 0; }
  .gg-toolbar__label {
    font-size: var(--t-xs); font-weight: 560; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
    margin-right: 4px;
  }

  /* Не обраний фільтр показує свою назву приглушено, обраний — підсвічено. */
  .gg-filter { color: var(--ink-3); }
  .gg-filter:hover { color: var(--ink-2); }
  .gg-filter.is-set {
    color: var(--ink); font-weight: 560;
    border-color: var(--accent-line); background-color: var(--accent-soft);
  }
  .gg-filter option { color: var(--ink); font-weight: 400; }

  /* Коли рядок тісний, кнопка «Зберегти як групу» лишає саму іконку (підпис — у підказці). */
  @container (max-width: 1360px) {
    .gg-toolbar__text { display: none; }
  }

  @container (max-width: 720px) {
    .gg-search { flex-basis: 100%; max-width: none; }
    .gg-toolbar__end { margin-left: 0; }
  }
}