/* ---------------------------------------------------------------------------
   tags.css — the row/card colour tags used to mark projects and auditions.

   The same seven colours are applied to three different surfaces: the projects
   table, the auditions list table, and the audition cards. Each colour is
   defined once here as three variables, and each surface just consumes them.

     --tag-fill  the surface behind the row or card
     --tag-ink   text and links on that surface
     --tag-edge  the saturated 6px marker, the same in both themes

   Add a colour by adding one block, not seven rules.
--------------------------------------------------------------------------- */

.tag-color-gray   { --tag-fill: #CFD4DA; --tag-edge: #6C757D; }
.tag-color-red    { --tag-fill: #FFB3B3; --tag-edge: #E03131; }
.tag-color-orange { --tag-fill: #FFC078; --tag-edge: #F08C00; }
.tag-color-yellow { --tag-fill: #FFE066; --tag-edge: #F59F00; }
.tag-color-green  { --tag-fill: #B2F2BB; --tag-edge: #2F9E44; }
.tag-color-blue   { --tag-fill: #A5D8FF; --tag-edge: #1C7ED6; }
.tag-color-purple { --tag-fill: #D0BFFF; --tag-edge: #9C36B5; }

[class*='tag-color-'] {
  --tag-ink: #102A43;
  --tag-line: rgba(16, 42, 67, 0.35);
}

/* Dark theme. The pastel fills above are tuned for a white page and glare on
   near-black, so each hue is held at a low lightness instead. Text flips to the
   standard light ink; every pairing below clears 8.7:1. The saturated --tag-edge
   is deliberately unchanged, so the colour is still what you scan down the
   column for. */
[data-bs-theme='dark'] .tag-color-gray   { --tag-fill: #343A40; }
[data-bs-theme='dark'] .tag-color-red    { --tag-fill: #4E2222; }
[data-bs-theme='dark'] .tag-color-orange { --tag-fill: #4C3517; }
[data-bs-theme='dark'] .tag-color-yellow { --tag-fill: #464115; }
[data-bs-theme='dark'] .tag-color-green  { --tag-fill: #1D4224; }
[data-bs-theme='dark'] .tag-color-blue   { --tag-fill: #18374F; }
[data-bs-theme='dark'] .tag-color-purple { --tag-fill: #33274D; }

[data-bs-theme='dark'] [class*='tag-color-'] {
  --tag-ink: var(--ink);
  --tag-line: var(--line-strong);
}

/* --- Surface: any tagged table row -------------------------------------- */

.projects-table tbody tr[class*='tag-color-'] > td,
#auditions-list-view .auditions-list-table tbody tr[class*='tag-color-'] > td {
  background-color: var(--tag-fill) !important;
  color: var(--tag-ink) !important;
  /* Bootstrap paints stripes and hover as an inset shadow; clear it so the tag
     colour is what actually shows. */
  box-shadow: none !important;
}

.projects-table tbody tr[class*='tag-color-'] > td a,
.projects-table tbody tr[class*='tag-color-'] > td .btn,
#auditions-list-view .auditions-list-table tbody tr[class*='tag-color-'] > td a,
#auditions-list-view .auditions-list-table tbody tr[class*='tag-color-'] > td .btn {
  color: var(--tag-ink) !important;
  border-color: var(--tag-line) !important;
}

.projects-table tbody tr[class*='tag-color-'] > td:first-child,
#auditions-list-view .auditions-list-table tbody tr[class*='tag-color-'] > td:first-child {
  border-left: 6px solid var(--tag-edge);
}

/* --- Surface: audition cards -------------------------------------------- */

.audition-tag-card[class*='tag-color-'],
.audition-tag-card[class*='tag-color-'] .card-body {
  background: var(--tag-fill) !important;
}

.audition-tag-card[class*='tag-color-'],
.audition-tag-card[class*='tag-color-'] .card-body,
.audition-tag-card[class*='tag-color-'] .card-title,
.audition-tag-card[class*='tag-color-'] .card-text,
.audition-tag-card[class*='tag-color-'] .text-muted,
.audition-tag-card[class*='tag-color-'] a,
.audition-tag-card[class*='tag-color-'] .btn {
  color: var(--tag-ink) !important;
}

.audition-tag-card[class*='tag-color-'] a,
.audition-tag-card[class*='tag-color-'] .btn {
  border-color: var(--tag-line) !important;
}

/* --- Surface: the colour-picker swatches -------------------------------- */

.tag-gray   { background: #6C757D; }
.tag-red    { background: #E03131; }
.tag-orange { background: #F08C00; }
.tag-yellow { background: #F59F00; }
.tag-green  { background: #2F9E44; }
.tag-blue   { background: #1C7ED6; }
.tag-purple { background: #9C36B5; }

/* --- Surface: the colour-picker popover --------------------------------- */

.project-tag-menu,
.audition-tag-menu {
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.project-tag-menu-item,
.audition-tag-menu-item {
  color: var(--ink);
}

.project-tag-menu-item:hover,
.audition-tag-menu-item:hover {
  background: var(--surface-2);
}

.project-tag-dot-none,
.audition-tag-dot-none {
  border: 1px solid var(--line-strong);
  background: var(--surface-0);
}