/* Tags */
/* ==== */
/*
  A tag chip carries three things, so no one of them has to do all the work:
    - its name, always written out (the chip is never colour alone)
    - its kind, as a border style: activity solid, gear type dashed, condition dotted
    - its colour, from the fixed palette in Gear::Tag::COLOURS

  Each palette colour is a text/background/border trio per theme. Every text/background
  pair is at least 7:1 (WCAG AAA for normal text) - pale fills with deep text on light
  themes, deep fills with pale text on dark ones.
*/

.pg-tag {
  --pg-tag-fg: var(--bs-body-color);
  --pg-tag-bg: var(--bs-secondary-bg);
  --pg-tag-border: var(--bs-border-color);

  display: inline-flex;
  align-items: center;
  gap: 0.25em;

  padding: 0.2em 0.6em;

  border: 1px solid var(--pg-tag-border);
  border-radius: 999px;
  background-color: var(--pg-tag-bg);
  color: var(--pg-tag-fg);

  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.pg-tag--gear_type { border-style: dashed; }
.pg-tag--condition { border-style: dotted; border-width: 2px; }

/* Light palette (also the default when no theme is set) */
.pg-tag--blue   { --pg-tag-fg: #1e3a8a; --pg-tag-bg: #dbeafe; --pg-tag-border: #5b82cf; }
.pg-tag--purple { --pg-tag-fg: #4c1d95; --pg-tag-bg: #ede9fe; --pg-tag-border: #8b6fe0; }
.pg-tag--teal   { --pg-tag-fg: #115e59; --pg-tag-bg: #ccfbf1; --pg-tag-border: #3aa597; }
.pg-tag--green  { --pg-tag-fg: #14532d; --pg-tag-bg: #dcfce7; --pg-tag-border: #4fa868; }
.pg-tag--slate  { --pg-tag-fg: #334155; --pg-tag-bg: #f1f5f9; --pg-tag-border: #7c8ba1; }
.pg-tag--orange { --pg-tag-fg: #7c2d12; --pg-tag-bg: #ffedd5; --pg-tag-border: #d27a3a; }
.pg-tag--amber  { --pg-tag-fg: #78350f; --pg-tag-bg: #fef3c7; --pg-tag-border: #c4932c; }
.pg-tag--rose   { --pg-tag-fg: #881337; --pg-tag-bg: #ffe4e6; --pg-tag-border: #d4687e; }

/* Dark palette */
[data-bs-theme="dark"] {
  .pg-tag--blue   { --pg-tag-fg: #bfdbfe; --pg-tag-bg: #172554; --pg-tag-border: #4a6cc0; }
  .pg-tag--purple { --pg-tag-fg: #ddd6fe; --pg-tag-bg: #2e1065; --pg-tag-border: #7c5cd6; }
  .pg-tag--teal   { --pg-tag-fg: #99f6e4; --pg-tag-bg: #042f2e; --pg-tag-border: #2a8f84; }
  .pg-tag--green  { --pg-tag-fg: #bbf7d0; --pg-tag-bg: #052e16; --pg-tag-border: #3c8f56; }
  .pg-tag--slate  { --pg-tag-fg: #e2e8f0; --pg-tag-bg: #1e293b; --pg-tag-border: #64748b; }
  .pg-tag--orange { --pg-tag-fg: #fed7aa; --pg-tag-bg: #431407; --pg-tag-border: #b8662e; }
  .pg-tag--amber  { --pg-tag-fg: #fde68a; --pg-tag-bg: #451a03; --pg-tag-border: #b08224; }
  .pg-tag--rose   { --pg-tag-fg: #fecdd3; --pg-tag-bg: #4c0519; --pg-tag-border: #c0566e; }
}

/* "No tags" - deliberately not a chip, so it can't be mistaken for a tag called that */
.pg-tag-none {
  color: var(--bs-secondary-color);

  font-size: 0.75rem;
  font-style: italic;
}

.pg-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}


/* Toggle chips */
/* ============ */
/* A tag chip as a button. Off, it is a faded version of its own colour; on, it takes the
   full colour, a ring, and a tick - so pressed reads from the shape as well as the
   colour, and aria-pressed says it to a screen reader. The fade lightens the fill and
   border towards the page but keeps the text colour, so an unpressed chip's text is
   never lower contrast than a pressed one's. */
.pg-tag-toggle {
  font: inherit;
  font-size: 0.8125rem;

  --pg-tag-pad-y: 0.35em;
  --pg-tag-pad-x: 0.8em;

  padding: var(--pg-tag-pad-y) var(--pg-tag-pad-x);

  cursor: pointer;

  &[aria-pressed="false"] {
    background-color: color-mix(in srgb, var(--pg-tag-bg) 40%, var(--bs-body-bg));
    border-color: color-mix(in srgb, var(--pg-tag-border) 50%, var(--bs-body-bg));
  }

  /* Pressed thickens the chip's own border, in its text colour, rather than drawing a
     ring outside it - so pressed chips side by side keep their gap. The extra border
     width comes out of the padding, so pressing never resizes the chip or shifts its
     neighbours. */
  &[aria-pressed="true"] {
    padding: calc(var(--pg-tag-pad-y) - 1px) calc(var(--pg-tag-pad-x) - 1px);

    border-width: 2px;
    border-color: var(--pg-tag-fg);
  }

  &.pg-tag--condition[aria-pressed="true"] {
    border-width: 3px;
  }

  .pg-tag-toggle__tick {
    display: none;
  }

  &[aria-pressed="true"] .pg-tag-toggle__tick {
    display: inline;
  }

  &:focus-visible {
    outline: 2px solid var(--bs-focus-ring-color, var(--bs-primary));
    outline-offset: 3px;
  }
}

/* A row of toggle chips grouped by kind, with the kind named before each group */
.pg-tag-groups {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.pg-tag-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.pg-tag-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pg-tag-group__kind {
  color: var(--bs-secondary-color);

  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* The item form stacks the groups, one kind per line, since that's where the full set is read */
.pg-tag-groups--stacked {
  flex-direction: column;
  align-items: stretch;

  .pg-tag-group__kind {
    flex: 0 0 100%;
  }
}


/* Tag filter bar */
/* ============== */
.tag-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  margin-bottom: 1rem;
  padding: 0.75rem 1rem;

  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.5rem;
  background-color: var(--bs-body-bg);
}

.tag-filter-bar__heading {
  margin: 0;

  font-size: 0.875rem;
  font-weight: 700;
}

.tag-filter-bar__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;

  color: var(--bs-secondary-color);

  font-size: 0.8125rem;
}

.tag-filter-bar__summary {
  margin: 0;
}

/* The event dialog's Filter button, on the Gear label row: count, then the button */
.calendar-gear-filter-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* An outlined chip in sentence case like the dialog's other label-row control
   (.calendar-form__clear), so it reads as a button rather than a second heading -
   but in the accent, not red, since it adds nothing destructive. */
.tag-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;

  padding: 0.0625rem 0.4375rem;

  background: none;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--pg-form-radius, var(--bs-border-radius));

  color: var(--bs-secondary-color);

  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;

  &:hover,
  &:focus-visible,
  &[aria-expanded="true"],
  &.tag-filter-toggle--active {
    border-color: var(--pg-accent);

    color: var(--bs-emphasis-color);
  }
}

.tag-filter-toggle__count {
  min-width: 1.1em;
  padding: 0 0.3em;

  border-radius: 999px;
  background-color: var(--pg-accent);
  color: var(--pg-accent-contrast);

  text-align: center;
}

/* "N items match tags" beside a heading, away from the bar - in the bar's own light
   footer type rather than the heading's, so it reads as a note on it */
.tag-filter-count {
  color: var(--bs-secondary-color);

  font-size: 0.75rem;
  font-weight: 400;
}

.tag-filter-bar__clear {
  padding: 0;

  border: 0;
  background: none;
  color: var(--bs-link-color);

  font: inherit;
  text-decoration: underline;

  cursor: pointer;
}

/* Compact - inside the planner's blade and the event dialog, where room is short.
   One kind per line, its name in a fixed-width column so the chips line up down the
   bar, and smaller chips throughout. */
.tag-filter-bar--compact {
  gap: 0.375rem;

  margin-bottom: 0.5rem;
  padding: 0.5rem 0.625rem;

  /* Grid rather than nested flex: WebKit sizes a row of wrapping flex chips inside a
     flex column as though the chips had wrapped, making each row twice its height. */
  .pg-tag-groups {
    display: grid;
    row-gap: 0.3125rem;
  }

  .pg-tag-group {
    display: grid;
    grid-template-columns: 5.25rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.25rem;
  }

  .pg-tag-group__kind {
    font-size: 0.625rem;
  }

  .pg-tag-group__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .pg-tag-toggle {
    --pg-tag-pad-y: 0.15em;
    --pg-tag-pad-x: 0.55em;

    font-size: 0.6875rem;
  }

  .tag-filter-bar__footer {
    font-size: 0.75rem;
  }

  .tag-filter-bar__heading {
    font-size: 0.75rem;
  }
}

/* What the filter hides. Its own class rather than d-none, so it never fights the other
   things on a page that hide items (the archived toggle, the planner's hide-worn). */
.tag-filter-hidden {
  display: none !important;
}

.tag-filter-empty {
  padding: 2rem 1rem;

  border: 1px dashed var(--bs-border-color);
  border-radius: 0.5rem;

  color: var(--bs-secondary-color);

  text-align: center;
}


/* Bulk tagging on the items list */
/* ============================== */
.items-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;

  margin-bottom: 1rem;
}

/* The per-item checkbox and per-category "select all" exist only in select mode */
.item-select-checkbox,
.item-select-category {
  display: none;
}

.item-select-mode {
  .item-select-checkbox {
    display: inline-block;

    margin: 0 0.375rem 0 0;
  }

  .item-select-category {
    display: inline;
  }

  .item-grid-single-item-container:has(.item-select-checkbox:checked) {
    outline: 3px solid var(--pg-accent);
    outline-offset: -1px;
  }
}

.item-select-category {
  padding: 0;

  border: 0;
  background: none;
  color: var(--bs-link-color);

  font: inherit;
  text-decoration: underline;

  cursor: pointer;
}

/* Sticky to the bottom of the viewport while anything is selected */
.item-bulk-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;

  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  margin-top: 1rem;
  padding: 0.75rem 1rem;

  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.5rem 0.5rem 0 0;
  background-color: var(--bs-body-bg);
  box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.15);

  &[hidden] {
    display: none;
  }
}

.item-bulk-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.item-bulk-bar__count {
  font-weight: 700;
}


/* The tag form's colour choice (gear/tags/_fields) */
/* ------------------------------------------------- */
.tag-colour-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;

  .pg-tag {
    cursor: pointer;
  }

  .btn-check:checked + .pg-tag {
    padding: calc(var(--pg-tag-pad-y) - 1px) calc(var(--pg-tag-pad-x) - 1px);

    border-width: 2px;
    border-color: var(--pg-tag-fg);
  }

  .btn-check:focus-visible + .pg-tag {
    outline: 2px solid var(--bs-primary);
    outline-offset: 3px;
  }

  .pg-tag-toggle__tick {
    display: none;
  }

  .btn-check:checked + .pg-tag .pg-tag-toggle__tick {
    display: inline;
  }
}