/* The module's own styles. The shell links this once, from the descriptor's Stylesheets:
   <link rel="stylesheet" href="_content/Promisoft.Dashboard.Modules.Careers/careers-module.css" />
   Colours come from the shell's theme variables, never hard-coded, so the module follows
   light/dark and the installation's accent by construction. */

/* Forms: a row of fields that wraps rather than scrolls, because these popups are opened on
   laptops in interviews as often as on a desk. */
.careers-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.careers-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.careers-form label,
.careers-site label,
.careers-settings label {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.careers-form small,
.careers-site small,
.careers-settings small {
    color: var(--shell-content-secondary);
}

/* One headed block of a job description, with its reorder and delete buttons. */
.careers-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.5rem;
}

.careers-section__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.careers-section__head > :first-child {
    flex: 1 1 auto;
}

/* The candidate sheet: sections stacked, each with a quiet heading. */
.careers-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.careers-detail h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
}

.careers-detail dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.careers-detail dt {
    color: var(--shell-content-secondary);
}

.careers-detail dd {
    margin: 0;
}

.careers-attachments,
.careers-trail,
.careers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.careers-attachments li,
.careers-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.careers-trail li {
    display: flex;
    gap: 0.75rem;
    color: var(--shell-content-secondary);
    font-size: 0.875rem;
}

.careers-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.careers-note > :first-child {
    flex: 1 1 auto;
}

.careers-note__item {
    padding: 0.5rem 0;
    border-top: 1px solid color-mix(in srgb, currentcolor 12%, transparent);
}

.careers-note__item p {
    margin: 0.25rem 0 0;
}

.careers-note__item small {
    color: var(--shell-content-secondary);
}

.careers-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.careers-inline > :first-child {
    flex: 1 1 18rem;
}

.careers-site,
.careers-settings {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.careers-status {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

/* A real two-column grid, not a wide inline-block: the value here is a sentence, and a
   sentence wraps. With min-width alone the second line started at the left edge and ran
   straight through the label beside it. */
.careers-status li {
    display: grid;
    grid-template-columns: minmax(6rem, 12rem) 1fr;
    gap: 0.25rem 0.75rem;
    align-items: start;
}

/* Narrow enough and the two stack, which reads better than a 6rem label column. */
@media (max-width: 40rem) {
    .careers-status li {
        grid-template-columns: 1fr;
    }
}

/* A key exists in the clear exactly once, on the screen that issued it. It is meant to be
   read and copied there and then, so it is set large and monospaced rather than tucked away. */
.careers-key {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.375rem;
    background: var(--shell-bg);
    font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.9375rem;
    word-break: break-all;
}

/* Said plainly wherever browser mode is on: the endpoint is a public form. */
.careers-warning {
    color: var(--shell-danger-fg, var(--shell-content));
    background: var(--shell-danger-bg, transparent);
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    margin: 0;
}