/* ============================================================
   Shared roster styles
   ------------------------------------------------------------
   Extracted from site.css (Session 161, 2026-07-07) as a slice of the
   incremental site.css split. SHARED across roster surfaces — the
   Manage editor, RaiderView, and the Dashboard Raid Roster card —
   so it lives here rather than in a per-page file.

   Canonical mapping + rationale:
   GuildPortal.Documentation/Documents/Pages/Roster/StatusColorCoding.md

   Loaded in _Layout AFTER global.css and BEFORE the themes. Order is not
   load-bearing here (every rule wins its competition by specificity, not
   source order) — the slot is for logical layering.
   ============================================================ */

/* --- Status colour coding ---
   In=1 var(--ok), Out=2 var(--bad), Standby=3 var(--warn), No Signup=4 var(--info); empty=0 uncoloured.
   Promoted from hardcoded hex to global generic vars (Session 163): Out #f87171 -> --bad (indistinguishable
   merge), Standby #f59e0b -> --warn (unified amber), No Signup #7aaeff -> --info (new global var, defined in
   site.css :root). See StatusColorCoding.md. */

/* RaiderView cells + Dashboard card (per-StatusId class) */
.raider-status-1 { color: var(--ok); font-weight: 600; }
/* .raider-status-2 { color: #f87171; } */
.raider-status-2 { color: var(--bad); }
/* .raider-status-3 { color: #f59e0b; font-weight: 500; } */
.raider-status-3 { color: var(--warn); font-weight: 500; }
/* .raider-status-4 { color: #7aaeff; } */
.raider-status-4 { color: var(--info); }

/* ATTENDANCE STATUSES 5-7, added 2026-08-23 (Session 204) for the Attendance page's History tab.
   READ THIS BEFORE ADDING AN EIGHTH.

   THE SCALE IS NAMED AFTER RosterStatus AND IS NO LONGER ONLY THAT. RosterStatus stops at 4
   (In / Out / Standby / No Signup), but .raider-status-N was already being applied to WCL and
   Signup status ids by Attendance/_PlayerDetailTable long before this — three value spaces sharing
   one class scale, which happened to work because all three stop at 4. Attendance is the FIRST
   consumer that runs past it: its enum goes to 7 (Benched 5, Bailed 6, Partial Bench 7).

   SO 1-4 ARE SHARED BY FOUR MEANINGS AND 5-7 BELONG TO ATTENDANCE ALONE. That asymmetry is the
   thing to know: a future status id 5 on any OTHER enum would silently take Benched's colour.
   If a second enum ever needs a 5, this scale has to be split by consumer rather than extended
   again.

   THE COLOURS FOLLOW WHAT THE ATTENDANCE RATING DOES, not what the words sound like
   (Concepts/Attendance.md section 4):
     Benched --info, sharing Rotated's colour — both are "available, partly or not played", and
       BENCHED COUNTS AS FULL ATTENDANCE in the rating, so a failure colour here would contradict
       the figure on the Summary tab beside it.
     Bailed --bad, the only one of the three the rating treats as a failure. It shares Absent's
       colour without being the same thing: Absent declared unavailability up front.
     Partial Bench --warn, matching Partial's half weight in both rate formulas.
   No new hex values — every one is an existing global custom property. */
.raider-status-5 { color: var(--info); }
.raider-status-6 { color: var(--bad); }
.raider-status-7 { color: var(--warn); }

/* Dashboard card: status cells sit inside a .data-table, where .data-table td (0,1,1)
   out-ranks the single-class .raider-status-N (0,1,0). .col-status.raider-status-N is
   (0,2,0) and wins, without scoping to .data-table or using !important. */
.col-status.raider-status-1 { color: var(--ok); }
/* .col-status.raider-status-2 { color: #f87171; } */
.col-status.raider-status-2 { color: var(--bad); }
/* .col-status.raider-status-3 { color: #f59e0b; } */
.col-status.raider-status-3 { color: var(--warn); }
/* .col-status.raider-status-4 { color: #7aaeff; } */
.col-status.raider-status-4 { color: var(--info); }
/* The 5-7 pairs. NOT optional and not duplication: the History tab's cells sit in a .data-table,
   so without these the three statuses render in default table ink and colour only on hover. */
.col-status.raider-status-5 { color: var(--info); }
.col-status.raider-status-6 { color: var(--bad); }
.col-status.raider-status-7 { color: var(--warn); }

/* Manage status picker — button + dropdown option (per-data-value) */
.roster-status-btn[data-value="1"] { color: var(--ok); }
/* .roster-status-btn[data-value="2"] { color: #f87171; } */
.roster-status-btn[data-value="2"] { color: var(--bad); }
/* .roster-status-btn[data-value="3"] { color: #f59e0b; } */
.roster-status-btn[data-value="3"] { color: var(--warn); }
/* .roster-status-btn[data-value="4"] { color: #7aaeff; } */
.roster-status-btn[data-value="4"] { color: var(--info); }
.roster-status-option[data-value="1"] { color: var(--ok); }
/* .roster-status-option[data-value="2"] { color: #f87171; } */
.roster-status-option[data-value="2"] { color: var(--bad); }
/* .roster-status-option[data-value="3"] { color: #f59e0b; } */
.roster-status-option[data-value="3"] { color: var(--warn); }
/* .roster-status-option[data-value="4"] { color: #7aaeff; } */
.roster-status-option[data-value="4"] { color: var(--info); }
