/* =====================================================================
   components.css — styles for the shared patterns in components.js.
   Loaded after tokens.css by BOTH the referee portal and the assignor view.
   New shared UI styling goes here, not into either page.
   ===================================================================== */

/* Floating bars (bulk-select action bar, unsaved-changes save bar).
   They stay inside the content column: on desktop the left edge is the sidebar width (--sbw), so
   they get narrower when the sidebar is expanded and never slide under it. */
.ra-savebar { position: fixed; left: 0; right: 0; }
@media (min-width: 1024px) { .ra-savebar { left: var(--sbw); transition: left .2s ease; } }

/* Saved-views menu rows and calendar cells reuse Tailwind utilities from tokens.js; nothing extra needed. */

/* Venue manager: source tags */
.ra-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: rgb(var(--surface-2)); color: rgb(var(--text-muted)); border: 1px solid rgb(var(--border)); }

/* Quieter tables.
   - Zebra striping is back (v1 look).
   - Secondary row actions appear on hover or keyboard focus. On touch screens (no hover) they stay visible. */
@media (hover: hover) and (pointer: fine) {
  .ra-row .reveal { opacity: 0; transition: opacity .12s ease; }
  .ra-row:hover .reveal, .ra-row:focus-within .reveal, .ra-row .reveal:focus-visible { opacity: 1; }
}

/* Match Board crew cells: filled status chips with an icon (colour + border style + icon, never colour alone). */
.cslot { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; border: 1.5px solid; border-radius: 8px; padding: 3px 8px; font-weight: 600; text-align: left; transition: box-shadow .15s, transform .05s; }
.cslot:hover { box-shadow: var(--shadow-md); }
.cslot:active { transform: scale(.98); }
.cslot > svg, .cslot > i { width: 14px; height: 14px; flex-shrink: 0; }
.cslot-pos { font-size: 11px; font-weight: 700; letter-spacing: .03em; flex-shrink: 0; opacity: .8; }
.cslot[data-status="empty"]    { background: rgb(var(--st-empty-bg));     border-color: rgb(var(--st-empty-bd));     border-style: dashed; color: rgb(var(--st-empty-fg)); }
.cslot[data-status="offered"]  { background: rgb(var(--st-offered-bg));   border-color: rgb(var(--st-offered-bd));   color: rgb(var(--st-offered-fg)); }
.cslot[data-status="accepted"] { background: rgb(var(--st-confirmed-bg)); border-color: rgb(var(--st-confirmed-bd)); color: rgb(var(--st-confirmed-fg)); }
.cslot[data-status="declined"] { background: rgb(var(--st-declined-bg));  border-color: rgb(var(--st-declined-bd));  color: rgb(var(--st-declined-fg)); border-style: double; border-width: 3px; padding: 1px 6px; }

/* Board card: thin dividers, a whisper of shadow, one scroll region (the page) */
.ra-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); box-shadow: 0 1px 1px rgb(var(--scrim) / .04); }
.ra-day { padding: 24px 12px 8px; display: flex; align-items: baseline; gap: 10px; background: rgb(var(--surface)); border-top: 1px solid rgb(var(--border)); }
.ra-day:first-child { border-top: 0; }
.ra-day b { font-size: 15px; line-height: 1.2; font-weight: 600; color: rgb(var(--text-muted)); }

/* Row bars on the Match Board: the original palette colours (amber = reschedule requested, red = schedule changed, blue = open to claim pool). */
:root { --barc-rr: rgb(var(--st-offered-fg)); --barc-chg: rgb(var(--st-alert-bd)); --barc-pool: rgb(var(--st-open-fg)); --barc-due: rgb(var(--st-declined-fg)); }
.ra-row.bar-rr { box-shadow: inset 4px 0 0 var(--barc-rr); background: rgb(var(--st-offered-bg) / .55); }
.ra-row.bar-rr:hover { background: rgb(var(--st-offered-bg)); }
.ra-row.bar-rr.open { background: rgb(var(--row-sel)); }
.ra-row.bar-chg { box-shadow: inset 4px 0 0 var(--barc-chg); }
.ra-row.bar-due { box-shadow: inset 4px 0 0 var(--barc-due); }
.ra-row.bar-pool { box-shadow: inset 4px 0 0 var(--barc-pool); }
.bar-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgb(var(--text-muted)); white-space: nowrap; }
.bar-key i { display: inline-block; width: 4px; height: 14px; border-radius: 2px; }
.bar-key i[data-b="rr"] { background: var(--barc-rr); }
.bar-key i[data-b="chg"] { background: var(--barc-chg); }
.bar-key i[data-b="due"] { background: var(--barc-due); }
.bar-key i[data-b="pool"] { background: var(--barc-pool); }
.ra-day span { font-size: 12px; color: rgb(var(--text-muted)); }
.ra-day + .ra-row { border-top: 0; }
.ra-board-row { padding-top: 18px; padding-bottom: 18px; }
[data-density="compact"] .ra-board-row { padding-top: 6px; padding-bottom: 6px; }
.ra-row.ra-clickable { cursor: pointer; }

/* Pages (game, referee, venue, training video) */
.ra-sec { background: rgb(var(--surface)); border: 1px solid rgb(var(--border)); border-radius: 14px; padding: 16px; }
.ra-sec > h3 { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

/* Popups that are centred on desktop (translate -50%/-50%) must animate from their centred position.
   The phone slide-up animation sets its own transform and made the popup start off-centre, then jump into place. */
@keyframes dlgIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (min-width: 1024px) { .sheet-enter[role="dialog"] { animation: dlgIn .16s ease-out; } }

/* Training categories: each keeps its own hue but leans 20% toward the theme's brand colour (the position and status hues are only re-toned by the palette). */
.hz-pos-cr { --b-fg: var(--pos-cr-fg); --b-bg: var(--pos-cr-bg); }
.hz-pos-ar1 { --b-fg: var(--pos-ar1-fg); --b-bg: var(--pos-ar1-bg); }
.hz-pos-ar2 { --b-fg: var(--pos-ar2-fg); --b-bg: var(--pos-ar2-bg); }
.hz-st-offered { --b-fg: var(--st-offered-fg); --b-bg: var(--st-offered-bg); }
.hz-st-confirmed { --b-fg: var(--st-confirmed-fg); --b-bg: var(--st-confirmed-bg); }
[class*="hz-"] { background: color-mix(in srgb, rgb(var(--b-bg)) 80%, rgb(var(--brand-soft))); color: color-mix(in srgb, rgb(var(--b-fg)) 80%, rgb(var(--brand))); }

/* Wide page: the content column grows to fill the window so tables can use the whitespace on either side. */
#app[data-wide="1"] { max-width: none; }

/* Table contrast (Settings → Tables, or a table's View options). Standard is the base look.
   Medium sharpens the row lines, the column headings and secondary text; High goes further. Only tables are affected. */
#app[data-tcontrast="medium"] .ra-row { border-top-color: rgb(var(--border-strong)); }
#app[data-tcontrast="medium"] .ra-day { border-top-color: rgb(var(--border-strong)); }
#app[data-tcontrast="medium"] .ra-th { border-bottom-color: rgb(var(--border-strong)); }
#app[data-tcontrast="medium"] .ra-th * { color: rgb(var(--th-fg)); }
#app[data-tcontrast="medium"] .ra-row .text-muted { color: color-mix(in srgb, rgb(var(--text-muted)) 45%, rgb(var(--text))); }
#app[data-tcontrast="medium"] .ra-row .text-faint, #app[data-tcontrast="medium"] .cslot-pos { color: rgb(var(--text-muted)); }
#app[data-tcontrast="high"] .ra-row { border-top-color: rgb(var(--text-muted)); }
#app[data-tcontrast="high"] .ra-day { border-top: 2px solid rgb(var(--text-muted)); }
#app[data-tcontrast="high"] .ra-day b { color: rgb(var(--text)); }
#app[data-tcontrast="high"] .ra-th { border-bottom: 2px solid rgb(var(--text)); }
#app[data-tcontrast="high"] .ra-th * { color: rgb(var(--th-fg)); font-weight: 700; }
#app[data-tcontrast="high"] .ra-row .text-muted { color: rgb(var(--text)); }
#app[data-tcontrast="high"] .ra-row .text-faint, #app[data-tcontrast="high"] .cslot-pos { color: rgb(var(--text-muted)); }
#app[data-tcontrast="high"] .ra-row .text-cell-sub, #app[data-tcontrast="high"] .ra-row .text-caption { color: rgb(var(--text)); }
#app[data-tcontrast="high"] .ra-card { border-color: rgb(var(--text-muted)); }
#app[data-tcontrast="high"] .ra-row:hover { background: rgb(var(--row-sel)); }

/* Match Board cards (narrow content): crew chips two across on phones, up to four across (capped width) on tablets. */
.ra-slots { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .ra-slots { grid-template-columns: repeat(4, minmax(0, 176px)); } }

/* Reschedule requests waiting on you: same pale amber tint as the Match Board's reschedule rows */
.ra-row.rqp { background: rgb(var(--st-offered-bg) / .55); }
.ra-row.rqp:hover { background: rgb(var(--st-offered-bg)); }
.ra-row.rqp.open { background: rgb(var(--row-sel)); }