/*
 * Data submission design primitives.
 *
 * Source: the Oct 2023 UI Elements Reference (statustag.svg, toolbars.svg, listitems.svg,
 * cards.svg, datafilter.svg) and Remchannel-Brand-CI-Guide-2023.pdf, as summarised in
 * "General Docs/OML-CORP-DESIGN-SYSTEM-REFERENCE-2026-08.md".
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * .tag / .ds-btn / .ds-btn-ghost used to be hand-copied into five separate .razor.css files
 * with a comment explaining that CSS isolation stops one component's stylesheet reaching
 * another's markup. That is true, but copying is not the only answer to it - and the copies
 * had already drifted apart:
 *
 *   .ds-btn padding        0.45rem 1.1rem (overview, job matching, RPS, job audit)
 *                          0.50rem 1.15rem (findings)
 *   .ds-btn-ghost padding  0.45rem 1.1rem / 0.45rem 0.9rem
 *   .ds-btn-ghost font     0.8rem 600 / 0.85rem 400
 *   .ds-btn:hover          defined on three screens, missing on two
 *   .tag-critical          #A9291B on findings - a colour in neither brand palette
 *
 * A primary and a secondary button placed side by side therefore rendered at different
 * heights depending on which screen you were on. A global stylesheet has no isolation
 * scope, so it reaches every component's markup and there is exactly one definition to
 * change. Component .razor.css files still own everything specific to their own screen.
 *
 * Note on precedence: scoped rules carry an extra [b-xxxxxxxxxx] attribute selector and so
 * outrank anything here. A screen that re-declares one of these classes silently wins - if
 * a primitive looks wrong on one screen only, that is the first thing to check.
 */

/* The grey canvas these white surfaces sit on is not here - it is on .content-body in
   RemchannelLayout.razor.css, so every REMchannel screen shares one ground rather than each
   one painting its own. Nothing below assumes a ground colour; they only assume it is not
   white, which is why the borderless patterns from the reference work at all. */

/* ---------------------------------------------------------------- status tags
   statustag.svg: solid fill, white bold text, full pill, no border. The four states are a
   documented cross-app scale (REMchannel dashboards and REMprofile job lists use the same
   swatches), so they are kept verbatim rather than mapped onto the REMchannel accent.

   These were previously pale tints with coloured text. An earlier note here claimed the
   tinted version failed contrast and that solid fill fixed it. That was wrong in both
   directions: "Not matched" was #5A5A5A on #F1F2F2, which measures 6.15:1 and passed, and
   the solid #A3A3A3 that replaced it measured 2.52:1 and did not. The fills below are the
   darkened values that make the solid treatment actually pass. */

.tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: #fff;
    white-space: nowrap;
}

/* The reference draws these four as #A3A3A3 / #2563EB / #EA580C / #16A34A. Three of them
   do not carry white 10.9px bold text at 4.5:1 - Not started was the worst at 2.52:1, which
   is markedly worse than the pale tint it replaced. These are the darkened equivalents; the
   hue and the solid-fill treatment are unchanged, only the value moves. In progress already
   passed at 5.17:1 and is untouched. */
.tag-todo     { background: var(--rem-fill-neutral, #757575); }  /* Not started · 4.61:1 */
.tag-review   { background: #2563EB; }                           /* In progress · 5.17:1 */
.tag-progress { background: var(--rem-fill-orange, #c2410c); }   /* Pending     · 5.18:1 */
.tag-done     { background: var(--rem-fill-green, #15803d); }    /* Published   · 5.02:1 */

/* Locked is not in the reference set - it is this platform's "you cannot start this yet".
   Held at the same weight as Not started but drained of contrast, so it reads as absent
   rather than as another thing to act on. */
.tag-locked {
    background: transparent;
    border: 1px solid var(--rem-black-15, #dcddde);
    color: var(--rem-ink-muted, #66706e);
}

/* Validation severities. The reference has no severity scale, so these come from the CI
   guide's secondary palette instead of the invented #A9291B / #96591A pair. */
.tag-critical { background: var(--rem-rust, #a14732); }        /* 6.06:1 */
.tag-warning  { background: var(--rem-fill-warning, #b35418); } /* orange itself is 2.94:1 under white */
.tag-info     { background: var(--rem-steel-blue, #30505c); }   /* 8.65:1 */

/* ---------------------------------------------------------------- buttons
   toolbars.svg and cards.svg show a strict two-tier system: a filled near-black pill for
   the primary action ("+ New job profile", "Edit template", "Confirm") and a white pill
   with a thin border for the secondary ("Preview template", "View", "Close").

   Both tiers share their box metrics deliberately: they are routinely placed side by side
   in a card footer or a toolbar, and the reference draws them the same height. */

.ds-btn,
.ds-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.ds-btn {
    background: var(--rem-button-primary, #18181f);
    border: 1px solid var(--rem-button-primary, #18181f);
    color: #fff;
}

    /* A lighter near-black rather than the previous jump to steel blue: changing hue on
       hover reads as a different button rather than the same one under the cursor. */
    .ds-btn:hover:not(:disabled) {
        background: #33333d;
        border-color: #33333d;
    }

    .ds-btn:disabled {
        background: var(--rem-black-15, #dcddde);
        border-color: var(--rem-black-15, #dcddde);
        color: var(--rem-black-60, #808285);
        cursor: not-allowed;
    }

.ds-btn-ghost {
    background: #fff;
    border: 1px solid var(--rem-black-15, #dcddde);
    color: var(--rem-button-primary, #18181f);
}

    .ds-btn-ghost:hover:not(:disabled) {
        background: var(--rem-black-5, #f1f2f2);
        border-color: var(--rem-black-40, #a7a9ac);
    }

    .ds-btn-ghost:disabled {
        color: var(--rem-black-40, #a7a9ac);
        border-color: var(--rem-black-5, #f1f2f2);
        cursor: not-allowed;
    }

/* An inline text action - "Reply" in cards.svg. Not a third button tier: it belongs inside
   a row of content, never in a toolbar or a card footer. */
.ds-btn-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--rem-ink-green, #00795f);
    cursor: pointer;
    white-space: nowrap;
}

    .ds-btn-link:hover:not(:disabled) {
        text-decoration: underline;
    }

    .ds-btn-link:disabled {
        color: var(--rem-black-40, #a7a9ac);
        cursor: not-allowed;
        text-decoration: none;
    }

/* Compact variant for buttons that sit inside a table row rather than a toolbar. */
.ds-btn.ds-sm,
.ds-btn-ghost.ds-sm {
    padding: 0.33rem 0.85rem;
    font-size: 0.75rem;
}

/* Keyboard focus. Absent from the reference sheets, which show mouse states only. */
.ds-btn:focus-visible,
.ds-btn-ghost:focus-visible,
.ds-btn-link:focus-visible {
    outline: 2px solid var(--rem-color-focus-ring, #009677);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- text field
   toolbars.svg ("Search jobs") and datafilter.svg ("Search") both draw a rounded
   rectangle, not a pill. The pill is reserved for buttons and tags - using it for inputs
   too removes the shape cue that separates "type here" from "press me". */

.ds-field {
    position: relative;
    display: flex;
    align-items: center;
}

    .ds-field > .bi {
        position: absolute;
        left: 0.85rem;
        color: var(--rem-black-60, #808285);
        font-size: 0.9rem;
        pointer-events: none;
    }

    .ds-field > input {
        width: 100%;
        background: #fff;
        border: 1px solid var(--rem-black-15, #dcddde);
        border-radius: 8px;
        padding: 0.55rem 1rem 0.55rem 2.4rem;
        font: inherit;
        font-size: 0.82rem;
        color: var(--rem-button-primary, #18181f);
    }

        .ds-field > input::placeholder {
            color: var(--rem-black-60, #808285);
        }

        .ds-field > input:focus {
            outline: none;
            border-color: var(--rem-ink-green, #00795f);
            box-shadow: 0 0 0 3px rgba(0, 150, 119, 0.14);
        }

/* ---------------------------------------------------------------- segmented filter
   toolbars.svg's A-Z row: one continuous control, the selected segment filled in the
   REMchannel accent. Distinct from .ds-btn on purpose - these choose a view, they do not
   perform an action, and rendering them as a row of buttons invites them to be read as
   five things you could press rather than one thing that is currently set. */

.ds-seg {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--rem-black-15, #dcddde);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.ds-seg-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--rem-grey, #5a5a5a);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

    .ds-seg-item:hover:not(.on) {
        background: var(--rem-black-5, #f1f2f2);
        color: var(--rem-button-primary, #18181f);
    }

    .ds-seg-item.on {
        background: var(--rem-green, #009677);
        color: #fff;
    }

    .ds-seg-item:focus-visible {
        outline: 2px solid var(--rem-color-focus-ring, #009677);
        outline-offset: -2px;
    }

.ds-seg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--rem-black-5, #f1f2f2);
    color: var(--rem-grey, #5a5a5a);
    font-size: 0.68rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ds-seg-item.on .ds-seg-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ---------------------------------------------------------------- insight rows
   cards.svg's "Insights" block: one statement per white row, each led by a circular
   tinted badge carrying the icon. Used wherever a screen has to say several separate
   things at once - a bulleted list inside a single tinted panel reads as one long
   paragraph and buries the individual points. */

.ds-notes {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.ds-note {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    background: #fff;
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--rem-button-primary, #18181f);
}

.ds-note-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: 0.72rem;
    line-height: 1;
}

.ds-note-badge.info    { background: #e7edf8; color: var(--rem-blue, #25408f); }
.ds-note-badge.warn    { background: #fdeee4; color: #b35418; }
.ds-note-badge.good    { background: #e4f3ef; color: #00795f; }
.ds-note-badge.bad     { background: #f6ebe8; color: var(--rem-rust, #a14732); }

/* A note that is itself the whole message, rather than one row in a .ds-notes list.

   The badge above tints a circular icon beside black text; these tint the panel, because a
   standalone error or caveat has no icon to carry the colour and rendered as flat white text -
   indistinguishable from body copy, which is exactly wrong for the one line on the screen that
   says something went wrong. Same palette as the badges so the two agree. */

.ds-note-bad {
    display: block;
    background: #f6ebe8;
    color: var(--rem-rust, #a14732);
    border-left: 3px solid var(--rem-rust, #a14732);
    margin: 0 0 1rem;
}

.ds-note-warn {
    display: block;
    background: #fdeee4;
    color: #b35418;
    border-left: 3px solid #b35418;
    margin: 0 0 1rem;
}

.ds-note-good {
    display: block;
    background: #e4f3ef;
    color: #00795f;
    border-left: 3px solid #00795f;
    margin: 0 0 1rem;
}

.ds-notes-title {
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rem-button-primary, #18181f);
}

/* ---------------------------------------------------------------- list table
   listitems.svg: no divider lines between rows. Separation comes from alternating white
   and page-grey, and the column header is plain text sitting on the page background
   rather than a filled bar - the header is a label for the table, not a row of it.

   .ds-table only carries the surface and the striping; each screen declares its own grid
   template on .ds-row, because the columns differ per screen. */

.ds-table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.ds-table-head {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--rem-ink-muted, #66706e);
    background: transparent;
    padding-bottom: 0.4rem;
}

.ds-stripe:nth-child(even) {
    background: var(--rem-black-5, #f1f2f2);
}

/* ---------------------------------------------------------------- misc */

.ds-empty-note {
    background: #fff;
    border-radius: 8px;
    padding: 2.5rem 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--rem-grey, #5a5a5a);
}