/*
 * People's one label/value component, for the client portal, the profile and the contract summary.
 *
 *   <dl class="ido-field"><dt class="ido-field-label">Label</dt><dd class="ido-field-value">Value</dd></dl>
 *
 * Label on the left, value on the right, in two columns that line up from one row to the next; the label
 * is bold (600), a hint or a blank value is italic, a long value breaks inside its own column, and below
 * 575px the label sits above its value. The older class names (the portal's worker-hr-portal-field,
 * the profile's people-profile-meta-row and people-profile-fact-standing, the contract summary's
 * ido-field-table) share these rules, so the screens cannot drift apart again.
 *
 * It also holds the form-field pattern (bold label, description under it, control, error) that People's forms share.
 *
 * Loaded by workerHrPortalHead() on every portal page and by worker_hr_add_head_components() on People's.
 */

/* One spacing scale: 4, 8, 12, 16 and 24px. Rows, sections and cards use these and nothing in between. */
:root {
    --ido-space-1: 4px;
    --ido-space-2: 8px;
    --ido-space-3: 12px;
    --ido-space-4: 16px;
    --ido-space-5: 24px;
    /* Aliases of the global colour roles (assets/ido-ui/tokens/README.md); no colour of its own. Use the roles in new code. */
    --ido-field-label-color: var(--ido-text-label, #374151);
    --ido-field-value-color: var(--ido-text-strong, #111827);
    --ido-field-muted-color: var(--ido-text-muted, #6b7280);
    --ido-field-line: var(--ido-line, #e5e7eb);
}

/* A list of rows, and the gap between the lists and headings that follow one another. */
.ido-field-list {
    margin: 0 0 var(--ido-space-5);
}

.ido-section-title {
    margin: 0 0 var(--ido-space-1);
    font-size: 15px;
    font-weight: 700;
    color: var(--ido-field-value-color);
}

/* ---- The row ---------------------------------------------------------------------------------- */

dl.ido-field,
.worker-hr-portal-field {
    display: grid;
    margin: 0;
    grid-template-columns: minmax(140px, 32%) minmax(0, 1fr);
    gap: var(--ido-space-1) var(--ido-space-5);
    padding: var(--ido-space-3) 0;
    border-bottom: 1px solid var(--ido-field-line);
}

dl.ido-field:last-child,
.worker-hr-portal-field:last-child {
    border-bottom: 0;
}

.ido-field-label,
.worker-hr-portal-field-label {
    margin: 0;
    font-weight: 600;
    color: var(--ido-field-label-color);
    overflow-wrap: anywhere;
}

.ido-field-value,
.worker-hr-portal-field-value {
    margin: 0;
    color: var(--ido-field-value-color);
    font-weight: 400;
    /* An address, a URL or a long note breaks where it must; a note's own line breaks stay. */
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* A blank value and a hint read as secondary: italic, quieter. */
.ido-field-empty,
.ido-field-hint {
    font-style: italic;
    font-weight: 400;
    color: var(--ido-field-muted-color);
}

.ido-field-hint {
    display: block;
    margin-top: var(--ido-space-1);
    font-size: 12px;
}

/* ---- The profile's pairs ---------------------------------------------------------------------- */

/* Same two columns, tighter: the profile cards hold many short pairs side by side. */
.people-profile-meta-row {
    display: grid;
    grid-template-columns: minmax(110px, 40%) minmax(0, 1fr);
    gap: var(--ido-space-1) var(--ido-space-4);
    align-items: baseline;
    font-size: 13px;
}

.people-profile-meta-row > span {
    font-weight: 600;
    color: var(--ido-field-label-color);
    overflow-wrap: anywhere;
}

.people-profile-meta-row > strong {
    min-width: 0;
    font-weight: 400;
    color: var(--ido-field-value-color);
    text-align: right;
    overflow-wrap: anywhere;
}

.people-profile-meta-row-wide {
    grid-template-columns: minmax(0, 1fr);
}

.people-profile-meta-row-wide > strong {
    text-align: left;
}

.people-profile-fact-standing dt {
    font-weight: 600;
    color: var(--ido-field-label-color);
}

.people-profile-fact-standing dd {
    font-weight: 400;
}

/* ---- The contract summary --------------------------------------------------------------------- */

.ido-field-table {
    width: 100%;
    margin-bottom: var(--ido-space-4);
}

.ido-field-table td {
    padding: var(--ido-space-2) var(--ido-space-3);
    vertical-align: top;
    border-top: 1px solid var(--ido-field-line);
    overflow-wrap: anywhere;
}

.ido-field-table td:first-child {
    padding-left: 0;
    font-weight: 600;
    color: var(--ido-field-label-color);
}

.ido-field-table td:last-child {
    padding-right: 0;
}

.ido-field-table td + td {
    font-weight: 400;
    color: var(--ido-field-value-color);
}

/* ---- Form fields: label in bold, then the control, its error, and its description below ---- */

/*
 * One pattern for every People form (scope: a form marked .ido-form, and, where the browser knows :has(), any form that holds a
 * Bootstrap .form-group, which is what Perfex's render_input()/render_select() and People's own fields draw):
 *
 *   <div class="form-group ido-form-field">
 *     <label class="control-label ido-form-field-label" for="x">Label <span class="ido-required">*</span></label>
 *     <div class="ido-form-field-control"> ...the control... </div>
 *     <div class="ido-form-field-error" id="x-error" role="alert">What is wrong.</div>
 *     <small class="ido-form-field-help" id="x-help">What it is for.</small>
 *   </div>
 *
 * Order, always: label, control, error (directly under the control), description (last, small and muted).
 *
 * The .form-group wrapper and the first <label> stay: People's scripts read the field's label through them.
 */
.ido-form .form-group,
.ido-form-field {
    margin-bottom: var(--ido-space-4);
}

.ido-form .form-group > label,
.ido-form .form-group > .control-label,
.ido-form .ido-form-field > label,
.ido-form-field-label {
    display: block;
    margin: 0 0 var(--ido-space-1);
    font-weight: 600;
    color: var(--ido-field-label-color);
    line-height: 1.4;
}

/* The description: below the control (and below its error), 4px from it, smaller and quieter, never italic unless it says "optional" or "not available". */
.ido-form-field-help {
    display: block;
    margin: var(--ido-space-1) 0 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ido-field-muted-color);
}

.ido-form-field-help[hidden] {
    display: none;
}

.ido-form-field-help.is-optional,
.ido-form-field-help.is-unavailable {
    font-style: italic;
}

/* A description that needs attention before saving, but is not an error yet: why a field the form would have filled is still empty. */
.ido-form-field-help.is-warning {
    color: #92400e;
}

.ido-required,
.ido-form .form-group > label .text-danger {
    margin-left: 2px;
    font-weight: 700;
    color: #dc2626;
}

.ido-form-field-error,
.ido-form .has-error .help-block,
.ido-form .form-group label.error {
    display: block;
    margin: var(--ido-space-1) 0 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #dc2626;
}

.ido-form-field-error:empty {
    display: none;
}

/* A checkbox or radio: the control first, its label beside it, the error and the description under that row. */
.ido-form-field-check {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--ido-space-2);
    align-items: start;
}

.ido-form-field-check > input {
    margin: 3px 0 0;
}

.ido-form-field-check > .ido-form-field-label {
    margin: 0;
}

.ido-form-field-check > .ido-form-field-help,
.ido-form-field-check > .ido-form-field-error {
    grid-column: 2;
}

/* Two fields side by side where there is room, one above the other where there is not. */
.ido-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--ido-space-5);
}

.ido-form-grid > .ido-form-field-wide {
    grid-column: 1 / -1;
}

/* A select whose options say what they are, then what they mean: the name in bold, the note under it, wrapping instead of running on. */
.bootstrap-select.ido-stacked-options .dropdown-menu li a {
    white-space: normal;
}

.ido-option-name {
    display: block;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ido-field-value-color);
}

.ido-option-note {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ido-field-muted-color);
    white-space: normal;
}

/* Where the browser knows :has(), every People form that draws a Bootstrap field gets the same pattern without being marked. */
@supports selector(:has(a)) {
    form:has(.form-group) .form-group > label,
    form:has(.form-group) .form-group > .control-label {
        display: block;
        margin: 0 0 var(--ido-space-1);
        font-weight: 600;
        color: var(--ido-field-label-color);
        line-height: 1.4;
    }

    form:has(.form-group) .form-group > label .text-danger {
        margin-left: 2px;
        font-weight: 700;
        color: #dc2626;
    }
}

/* ---- Narrow screens: the label above its value ------------------------------------------------ */

@media (max-width: 575px) {
    .ido-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    dl.ido-field,
    .worker-hr-portal-field,
    .people-profile-meta-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .people-profile-meta-row > strong {
        text-align: left;
    }

    .ido-field-label,
    .worker-hr-portal-field-label {
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }
}