/* ==========================================================================
   HHC — THE SHORTLIST
   ==========================================================================

   Used by `resources/views/filament/shift-shortlist.blade.php`: the modal a coordinator
   opens with one question — *who can take this shift* — and the answer to it.

   --------------------------------------------------------------------------
   WHY THIS FILE OWNS ITS COLOURS
   --------------------------------------------------------------------------

   The same reason `document-lightbox.css` does, and it is not a coincidence: the lightbox
   rendered light-grey text on a white modal because the INK came from one stylesheet and the
   PAPER came from Filament's modal, so a dark-mode operating system turned the text light
   and left the surface white. Measured at 1.9:1 — unreadable.

   A ranking is read the same way a document is, in a hurry, so this block declares its own
   surface AND its own ink, per theme, and the two can never be chosen by different
   conditions.

   The doubled class (`.hhc-shortlist.hhc-shortlist`) is deliberate: Filament's `dark:`
   variants compile to `.dark …` selectors which outweigh a single class, so these rules win
   on specificity rather than on which stylesheet the browser happened to parse last.
   ========================================================================== */

.hhc-shortlist.hhc-shortlist {
    color-scheme: light;

    --hhc-sl-page: var(--color-white);
    --hhc-sl-surface: var(--gray-50);
    --hhc-sl-raised: var(--color-white);
    --hhc-sl-border: var(--gray-200);
    --hhc-sl-title: var(--gray-950);
    --hhc-sl-body: var(--gray-700);
    /* MEASURED, THEN CHOSEN. `--gray-600` on the pale green of the best-match card came out
       at 3.76:1 for the metrics line and 4.0:1 for the footnote — under the 4.5:1 floor for
       small text, and this is a screen read in a hurry. `--gray-700` clears it everywhere the
       note colour lands, on both the white card and the tinted one. */
    --hhc-sl-note: var(--gray-700);
    --hhc-sl-accent: var(--primary-700);
    --hhc-sl-good: var(--success-700);
    /* The score numerals get their own token because they sit on the tinted best-match card,
       where the accent green measured 4.95:1 against `--success-50` — a pass, but only just,
       and lightening it later for contrast would break it. */
    --hhc-sl-score: var(--success-700);
    --hhc-sl-good-surface: var(--success-50);
    --hhc-sl-warn-surface: var(--warning-50);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;

    background-color: var(--hhc-sl-page);
    color: var(--hhc-sl-body);
    font-size: 0.875rem;
    line-height: 1.5;
}

.dark .hhc-shortlist.hhc-shortlist {
    color-scheme: dark;

    --hhc-sl-page: var(--gray-900);
    --hhc-sl-surface: var(--gray-800);
    --hhc-sl-raised: var(--gray-800);
    --hhc-sl-border: color-mix(in oklab, var(--color-white) 14%, transparent);
    --hhc-sl-title: var(--color-white);
    --hhc-sl-body: var(--gray-200);
    --hhc-sl-note: var(--gray-300);
    --hhc-sl-accent: var(--primary-300);
    --hhc-sl-good: var(--success-400);
    /* `--success-400` measured 3.89:1 on the dark tinted card — under the floor. `--success-300`
       is the lightest step that still reads as "good" and clears 4.5:1 on that surface. */
    --hhc-sl-score: var(--success-300);
    --hhc-sl-good-surface: color-mix(in oklab, var(--success-500) 12%, transparent);
    --hhc-sl-warn-surface: color-mix(in oklab, var(--warning-500) 12%, transparent);

    background-color: var(--hhc-sl-page);
    color: var(--hhc-sl-body);
}

/* ---- what is being filled --------------------------------------------- */

.hhc-shortlist__need {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid var(--hhc-sl-border);
    background-color: var(--hhc-sl-surface);
}

.hhc-shortlist__need-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-block-start: 0.125rem;
    color: var(--hhc-sl-accent);
}

.hhc-shortlist__need-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hhc-sl-title);
}

.hhc-shortlist__need-muted {
    font-weight: 400;
    color: var(--hhc-sl-note);
}

.hhc-shortlist__need-meta {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--hhc-sl-body);
}

.hhc-shortlist__need-reason {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--hhc-sl-note);
}

.hhc-shortlist__inline-icon {
    width: 0.9375rem;
    height: 0.9375rem;
    display: inline-block;
    vertical-align: -0.125rem;
    flex-shrink: 0;
}

/* ---- the "nobody has declared availability" note ---------------------- */

.hhc-shortlist__note {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid color-mix(in oklab, var(--warning-500) 40%, transparent);
    background-color: var(--hhc-sl-warn-surface);
    font-size: 0.8125rem;
    color: var(--hhc-sl-body);
}

.hhc-shortlist__note-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-block-start: 0.0625rem;
    color: var(--warning-600);
}

/* ---- the ranked candidates -------------------------------------------- */

.hhc-shortlist__candidates {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.hhc-shortlist__candidate {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid var(--hhc-sl-border);
    background-color: var(--hhc-sl-raised);
}

/* The best match is marked by MORE than colour: it carries the star and the words, so the
   ranking survives a colour-blind reader and a black-and-white printout. */
.hhc-shortlist__candidate.is-best {
    border-color: color-mix(in oklab, var(--success-500) 45%, transparent);
    background-color: var(--hhc-sl-good-surface);
}

.hhc-shortlist__rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    min-width: 3.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--hhc-sl-note);
}

.hhc-shortlist__rank-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--hhc-sl-good);
}

.hhc-shortlist__body {
    flex: 1;
    min-width: 0;
}

.hhc-shortlist__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.hhc-shortlist__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hhc-sl-title);
}

.hhc-shortlist__type {
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    border: 1px solid var(--hhc-sl-border);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--hhc-sl-note);
}

.hhc-shortlist__score {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--hhc-sl-score);
}

/* The bar, not the number: "72%" reads as a grade, a bar reads as "how much of a fit". */
.hhc-shortlist__bar {
    margin-block: 0.375rem 0.5rem;
    height: 5px;
    border-radius: 999px;
    background-color: var(--hhc-sl-border);
    overflow: hidden;
}

.hhc-shortlist__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: var(--hhc-sl-good);
}

.hhc-shortlist__reasons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    font-size: 0.8125rem;
    color: var(--hhc-sl-body);
}

.hhc-shortlist__reasons li {
    display: flex;
    gap: 0.375rem;
    align-items: flex-start;
}

.hhc-shortlist__reason-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    margin-block-start: 0.1875rem;
    color: var(--hhc-sl-good);
}

.hhc-shortlist__metrics {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--hhc-sl-note);
}

/* ---- the empty state --------------------------------------------------- */

.hhc-shortlist__empty {
    padding: 1.25rem;
    border-radius: 0.625rem;
    border: 1px dashed color-mix(in oklab, var(--danger-500) 45%, transparent);
    background-color: color-mix(in oklab, var(--danger-500) 7%, transparent);
    text-align: center;
}

.hhc-shortlist__empty-icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-inline: auto;
    color: var(--danger-600);
}

.hhc-shortlist__empty-title {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--hhc-sl-title);
}

.hhc-shortlist__empty-text {
    margin: 0.25rem auto 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    color: var(--hhc-sl-body);
}

/* ---- who cannot, and why ---------------------------------------------- */

.hhc-shortlist__blocked {
    border-radius: 0.625rem;
    border: 1px solid var(--hhc-sl-border);
    background-color: var(--hhc-sl-surface);
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
}

.hhc-shortlist__blocked summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--hhc-sl-title);
}

.hhc-shortlist__blocked-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hhc-shortlist__blocked-list li {
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--hhc-sl-border);
}

.hhc-shortlist__blocked-name {
    display: block;
    font-weight: 600;
    color: var(--hhc-sl-title);
}

.hhc-shortlist__blocked-why {
    display: block;
    margin-block-start: 0.125rem;
    color: var(--hhc-sl-body);
}

.hhc-shortlist__footnote {
    margin: 0;
    font-size: 0.75rem;
    color: var(--hhc-sl-note);
}

/* x-cloak is not defined by Filament's bundle. One line, and it is the difference between a
   modal that appears and a modal that flashes open and shut. */
[x-cloak] {
    display: none !important;
}