/* Copyright Recro Corporation, All rights reserved. */

/* Job board (/jobboard) presentation.

   This file is GLOBAL — it is linked from App.razor and downloads on every page in Cortex. Every
   rule below is therefore anchored under `.jb`, the wrapper on the job board page root. A rule that
   loses its anchor silently restyles every grid in the product, so the anchor is not a convention
   here, it is the containment.

   Anything a Radzen component parameter or a rz-* utility class can do is done in the markup
   instead. What is left is what neither can reach. */

/* ---------- page shell ----------

   EmptyLayout gives the page the full viewport, so the measure has to come from here. */

.jb {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}



/* ---------- clearance and location pills ----------

   The template every clearance pill uses. Each rule below it just sets that pill's colour; the
   suffixes match the Slug values in JobBoard.razor.cs. */
.jb .jb-cl {
    --jb-tint: 16%;
    --jb-hue: var(--rz-text-secondary-color);
    background-color: color-mix(in srgb, var(--jb-hue) var(--jb-tint), transparent);
    color: color-mix(in srgb, var(--jb-hue) 45%, var(--rz-text-title-color));
}

.jb .jb-cl-none           { --jb-hue: var(--rz-text-secondary-color); }
.jb .jb-cl-public-trust   { --jb-hue: #0f9b8e; }
.jb .jb-cl-secret         { --jb-hue: var(--rz-info); }
.jb .jb-cl-top-secret     { --jb-hue: var(--rz-success); }
.jb .jb-cl-ts-sci         { --jb-hue: var(--rz-warning); --jb-tint: 18%; }
.jb .jb-cl-ts-sci-ci      { --jb-hue: #ff6a1f; }
.jb .jb-cl-ts-sci-fs      { --jb-hue: var(--rz-danger); }
.jb .jb-cl-ts-sci-unknown { --jb-hue: #8b5cf6; }

/* Locations need their own template: one fixed blue rather than a colour per value, and a fainter
   tint so they sit a step quieter than a clearance. */
.jb .jb-chip {
    background-color: color-mix(in srgb, var(--rz-primary) 12%, transparent);
    color: var(--rz-primary);
}

/* Plain text, not a third chip — a filled chip reads as another location when it is a note about
   the ones already shown. */
.jb .jb-more {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--rz-text-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* ---------- the clearance ladder ----------

   A segmented control: one track, equal-width segments, one of them filled. The `outline: none`
   below is what removes Radzen's per-segment divider, and the fill stays primary whichever
   clearance is picked. */

.jb .rz-selectbar {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
    border-radius: 10px;
    border: var(--rz-border-normal);
    background-color: var(--rz-base-background-color);
}

.jb .rz-selectbar .rz-button {
    flex: 1 1 0;
    min-width: 0;
    margin-inline-start: 0;
    padding: 8px 6px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: transparent;
    color: var(--rz-text-secondary-color);
    border: 0;
    outline: none;
    box-shadow: none;
    transition: none;
    border-radius: 7px !important;
}

.jb .rz-selectbar .rz-button:not(.rz-state-active):not(.rz-state-disabled):hover {
    background-color: transparent;
    color: var(--rz-text-title-color);
}

.jb .rz-selectbar .rz-button.rz-state-active {
    background-color: var(--rz-primary);
    color: var(--rz-on-primary);
    outline: none;
}

/* ---------- the grid ---------- */

.jb .rz-grid-table thead th {
    background-color: var(--rz-card-background-color);
}

.jb .rz-grid-table thead th .rz-column-title {
    padding: 9px 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rz-text-secondary-color);
}

/* Radzen paints the unsorted glyph transparent, so nothing tells you a column is sortable until
   you hover it. Shown at rest instead. */
.jb .rz-sortable-column .rzi-sort:not(.rzi-sort-asc):not(.rzi-sort-desc) {
    color: var(--rz-text-secondary-color);
    opacity: 0.55;
}

/* The row dividers themselves come from GridLines="Horizontal" on the grid; this only drops the one
   under the last row, since the pager below already has a top border and the two would stack. */
.jb .rz-grid-table tbody tr:last-child td {
    border-bottom: 0;
}

/* The whole row is the link — RowSelect navigates to the job. Nothing else would show that. */
.jb .rz-data-row {
    cursor: pointer;
}

/* ---------- row typography ----------

   Title and salary are the two things worth noticing on a row, so they are bolder and darker than
   the rest of it. */

.jb .jb-title {
    font-weight: 600;
    color: var(--rz-text-title-color);
}

.jb .jb-salary {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rz-text-title-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* "Competitive" is the absence of a number, so it should not look like one. */
.jb .jb-salary-none {
    font-size: 13px;
    font-weight: 400;
    color: var(--rz-text-secondary-color);
    letter-spacing: 0;
}

/* ---------- small screens ----------

   Equal-width segments stop being readable long before the labels do, so below this the strip goes
   back to wrapping at each segment's natural width. */

@media (max-width: 900px) {
    .jb .rz-selectbar {
        flex-wrap: wrap;
    }

    .jb .rz-selectbar .rz-button {
        flex: 0 1 auto;
        padding: 7px 9px;
        font-size: 11.5px;
    }
}