/* Compliance module styles.
 *
 * Injected into the host head by ComplianceTagHelperComponent (Order 1000, after the Generic
 * theme's hepra.css at Order 1). Blazor CSS isolation is not wired up in this host, so a
 * .razor.css file would compile and then never load - everything belongs here.
 *
 * Colours live here and not in the components: a status chip paints var(--policy-status-color)
 * and the class decides what that is, so retuning a colour is a CSS edit and nothing else.
 */

.h-policies-intro {
    margin: 0 0 1rem;
    max-width: 70ch;
}

/* Status chips ------------------------------------------------------------ */

.h-policy-status {
    --policy-status-color: #6c757d;
    --policy-status-bg: rgba(108, 117, 125, 0.12);

    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--policy-status-color);
    background: var(--policy-status-bg);
    border: 1px solid var(--policy-status-color);
}

.h-policy-status-confirmed {
    --policy-status-color: #1b7f4d;
    --policy-status-bg: rgba(27, 127, 77, 0.12);
}

.h-policy-status-downloaded {
    --policy-status-color: #9a6700;
    --policy-status-bg: rgba(154, 103, 0, 0.12);
}

.h-policy-status-outstanding {
    --policy-status-color: #b3261e;
    --policy-status-bg: rgba(179, 38, 30, 0.12);
}

/* Grid cells -------------------------------------------------------------- */

.h-policy-agree {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.75rem;
    vertical-align: middle;
}

/* The label greys out with the checkbox so "download first" reads as the reason it is
   unavailable, rather than looking like a rendering fault. */
.h-policy-agree:has(.k-checkbox:disabled) > span {
    opacity: 0.55;
}

.h-policies-outstanding {
    font-weight: 600;
    padding-right: 0.5rem;
}

.h-policy-version-date {
    margin-left: 0.4rem;
    opacity: 0.7;
}

.h-policy-no-document {
    font-style: italic;
    opacity: 0.7;
}

/* Upload window ----------------------------------------------------------- */

.h-policy-upload > p {
    margin: 0 0 0.75rem;
}

.h-policy-upload label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.h-policy-upload .k-textarea {
    width: 100%;
    margin-bottom: 1rem;
}

.h-policy-upload-warning {
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #9a6700;
    background: rgba(154, 103, 0, 0.08);
}

.h-policy-upload-hint {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    opacity: 0.75;
}

/* Editor ------------------------------------------------------------------ */

.h-policy-field-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.h-policy-upload .k-datepicker {
    margin-bottom: 0.25rem;
}

/* Current / superseded version badge -------------------------------------- */

.h-policy-current,
.h-policy-superseded {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.h-policy-current {
    color: #1b7f4d;
    background: rgba(27, 127, 77, 0.12);
}

/* Muted, not alarming: a superseded row is history, not a problem. */
.h-policy-superseded {
    color: #6c757d;
    background: rgba(108, 117, 125, 0.1);
}

/* Retired policy marker. Muted amber: withdrawn is a state worth noticing, not an error. */
.h-policy-retired {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9a6700;
    background: rgba(154, 103, 0, 0.12);
}

/* Document link ------------------------------------------------------------
   The policy title IS the download, which is what people expect of a document on
   the web. Styled as a link so it reads as one - a title that only looks like text
   would never get clicked. */

/* Blue and underlined, always - not on hover. A download has to look like a download
   at rest, or nobody clicks it. The colours are the portal's own link colours from
   site.css (a / a:hover), so these read as ordinary links rather than a second style
   of link invented here.

   Selectors carry the element and the grid context so they outrank anything Kendo
   applies to an anchor inside a cell; policies.css already loads after hepra.css, but
   source order only settles ties. */
a.h-policy-link,
.k-grid a.h-policy-link {
    color: var(--h-policy-link-color, #007bff);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

a.h-policy-link:hover,
a.h-policy-link:focus-visible,
.k-grid a.h-policy-link:hover,
.k-grid a.h-policy-link:focus-visible {
    color: var(--h-policy-link-hover-color, #015eac);
    text-decoration: underline;
}

/* PDF glyph via a pseudo-element: no extra markup per row, and the grid keeps a
   plain string in the cell for sorting. */
.h-policy-link-icon::before {
    content: "\f1c1";           /* fa-file-pdf */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    margin-right: 0.4rem;
    opacity: 0.9;
}

/* Mandatory / optional marker --------------------------------------------- */

.h-policy-mandatory,
.h-policy-optional {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.h-policy-mandatory {
    color: #b3261e;
    background: rgba(179, 38, 30, 0.1);
}

.h-policy-optional {
    color: #6c757d;
    background: rgba(108, 117, 125, 0.1);
}

/* ==========================================================================
   Requirements
   ========================================================================== */

.h-requirements-intro {
    margin: 0 0 1rem;
    max-width: 70ch;
}

/* Status chips. Same mechanism as the policy chips: the chip paints
   var(--requirement-status-color) and the status class decides what that is. */

.h-requirement-status {
    --requirement-status-color: #6c757d;
    --requirement-status-bg: rgba(108, 117, 125, 0.12);

    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--requirement-status-color);
    background: var(--requirement-status-bg);
    border: 1px solid var(--requirement-status-color);
}

.h-requirement-status-valid {
    --requirement-status-color: #1b7f4d;
    --requirement-status-bg: rgba(27, 127, 77, 0.12);
}

.h-requirement-status-expiringsoon {
    --requirement-status-color: #9a6700;
    --requirement-status-bg: rgba(154, 103, 0, 0.12);
}

/* Missing means nothing has been done yet - the same situation as Outstanding on a policy,
   so it wears exactly the .h-policy-status-outstanding look. Keep the two in step. */
.h-requirement-status-missing {
    --requirement-status-color: #b3261e;
    --requirement-status-bg: rgba(179, 38, 30, 0.12);
}

/* Expired has to read differently from Missing, since the Outstanding look is Missing's:
   the same red, filled solid, with white text. */
.h-requirement-status-expired {
    --requirement-status-color: #b3261e;
    --requirement-status-bg: #b3261e;
    color: #fff;
}

.h-requirement-summary {
    font-weight: 600;
    padding-right: 0.5rem;
}

/* Markers ------------------------------------------------------------------ */

.h-requirement-optional,
.h-requirement-current {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.h-requirement-optional {
    color: #6c757d;
    background: rgba(108, 117, 125, 0.1);
}

.h-requirement-current {
    color: #1b7f4d;
    background: rgba(27, 127, 77, 0.12);
}

/* Inactive requirement, or a requirement that no longer applies - history, worth
   noticing, not an error. Matches the retired-policy marker. */
.h-requirement-inactive {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9a6700;
    background: rgba(154, 103, 0, 0.12);
}

.h-requirement-row-actions {
    display: inline-flex;
    gap: 0.25rem;
}

/* Proof link - the portal's own link colours, as for policy links. */

a.h-requirement-link,
.k-grid a.h-requirement-link {
    color: var(--h-policy-link-color, #007bff);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

a.h-requirement-link:hover,
a.h-requirement-link:focus-visible,
.k-grid a.h-requirement-link:hover,
.k-grid a.h-requirement-link:focus-visible {
    color: var(--h-policy-link-hover-color, #015eac);
}

.h-requirement-link-icon::before {
    content: "\f15b";           /* fa-file - proofs may be PDFs or images */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    margin-right: 0.4rem;
    opacity: 0.9;
}

/* Editor and record window ------------------------------------------------- */

.h-requirement-field-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.h-requirement-field-warning {
    color: #b3261e;
    opacity: 1;
}

.h-requirement-form label {
    display: block;
    margin: 0.9rem 0 0.25rem;
    font-weight: 600;
}

.h-requirement-form > label:first-child {
    margin-top: 0;
}

.h-requirement-form-value {
    margin: 0;
}

.h-requirement-form .k-textarea {
    width: 100%;
}

.h-requirement-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.h-requirement-form-row > div {
    flex: 1 1 12rem;
}

.h-requirement-document {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Validation and server refusals, shown in the record window rather than as a toast. */
.h-requirement-form-error {
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #b3261e;
    background: rgba(179, 38, 30, 0.08);
    color: #b3261e;
}

.h-requirement-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.h-requirement-history-heading {
    margin: 0 0 0.75rem;
}

/* ==========================================================================
   Notices
   ========================================================================== */

.h-notices-intro {
    margin: 0 0 1rem;
    max-width: 70ch;
}

/* Status chips, same mechanism as policies: the class sets the colour variables. Not issued is
   "nothing done yet" and wears the Outstanding / Missing look; Received matches Confirmed. */

.h-notice-status {
    --notice-status-color: #6c757d;
    --notice-status-bg: rgba(108, 117, 125, 0.12);

    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--notice-status-color);
    background: var(--notice-status-bg);
    border: 1px solid var(--notice-status-color);
}

.h-notice-status-notissued {
    --notice-status-color: #b3261e;
    --notice-status-bg: rgba(179, 38, 30, 0.12);
}

.h-notice-status-downloaded {
    --notice-status-color: #9a6700;
    --notice-status-bg: rgba(154, 103, 0, 0.12);
}

.h-notice-status-confirmed {
    --notice-status-color: #1b7f4d;
    --notice-status-bg: rgba(27, 127, 77, 0.12);
}

/* Values or template changed since issue - worth noticing, not an error. */
.h-notice-changed,
.h-notice-not-issuable {
    display: inline-block;
    margin: 0.15rem 0 0 0.3rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.h-notice-changed {
    color: #9a6700;
    background: rgba(154, 103, 0, 0.12);
}

.h-notice-not-issuable {
    color: #6c757d;
    background: rgba(108, 117, 125, 0.1);
}

.h-notice-summary {
    font-weight: 600;
    padding-right: 0.5rem;
}

.h-notice-multiline {
    white-space: pre-line;
}

.h-notice-row-actions {
    display: inline-flex;
    gap: 0.75rem;
}

.h-notice-confirm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    vertical-align: middle;
}

.h-notice-confirm:has(.k-checkbox:disabled) > span {
    opacity: 0.55;
}

.h-notice-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
}

/* Page toolbar: template, year stepper, issue date. */
.h-notice-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.h-notice-toolbar > label {
    font-weight: 600;
}

.h-notice-year-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.h-notice-year {
    min-width: 3.5rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
}

.h-notice-empty {
    padding: 2rem 1rem;
    text-align: center;
    opacity: 0.7;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

/* Links - the portal's own link colours, as for policies. */
a.h-notice-link,
.k-grid a.h-notice-link {
    color: var(--h-policy-link-color, #007bff);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
}

a.h-notice-link:hover,
a.h-notice-link:focus-visible,
.k-grid a.h-notice-link:hover,
.k-grid a.h-notice-link:focus-visible {
    color: var(--h-policy-link-hover-color, #015eac);
}

.h-notice-link-icon::before {
    content: "\f1c1";           /* fa-file-pdf */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    margin-right: 0.4rem;
    opacity: 0.9;
}

.h-notice-link-icon-word::before {
    content: "\f1c2";           /* fa-file-word */
}

.h-notice-version-date {
    margin-left: 0.4rem;
    opacity: 0.7;
}

.h-notice-no-document {
    font-style: italic;
    opacity: 0.7;
}

/* Editor, upload window, variables ------------------------------------------ */

.h-notice-field-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.h-notice-upload > p {
    margin: 0 0 0.75rem;
}

.h-notice-upload label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.h-notice-upload .k-textarea {
    width: 100%;
    margin-bottom: 1rem;
}

.h-notice-upload-hint {
    font-size: 0.8125rem;
    opacity: 0.75;
}

.h-notice-upload-success {
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #1b7f4d;
    background: rgba(27, 127, 77, 0.08);
}

.h-notice-upload-warning {
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #9a6700;
    background: rgba(154, 103, 0, 0.08);
}

.h-notice-form-error {
    margin: 1rem 0 0.5rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #b3261e;
    background: rgba(179, 38, 30, 0.08);
    color: #b3261e;
    white-space: pre-line;
}

.h-notice-form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.h-notice-variables > p {
    margin: 0 0 0.75rem;
    max-width: 70ch;
}

.h-notice-variables-scroll {
    max-height: 60vh;
    overflow: auto;
}

.h-notice-variables-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.h-notice-variables-table th,
.h-notice-variables-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.h-notice-variables-table code {
    font-weight: 600;
    white-space: nowrap;
}

.h-notice-variable-example {
    white-space: pre-line;
    opacity: 0.8;
}

.h-notice-variable-flag {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    color: #6c757d;
    background: rgba(108, 117, 125, 0.1);
}

/* ==========================================================================
   Requests
   ========================================================================== */

.h-requests-intro {
    margin: 0 0 1rem;
    max-width: 70ch;
}

.h-requests-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.h-requests-summary {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Status chips - the requirement chip mechanism. Pending amber, approved green, rejected red:
   the colours of Attendance's h-clo-* approval stripe, in chip form. */

.h-request-status {
    --request-status-color: #6c757d;
    --request-status-bg: rgba(108, 117, 125, 0.12);

    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--request-status-color);
    background: var(--request-status-bg);
    border: 1px solid var(--request-status-color);
}

.h-request-status-pending {
    --request-status-color: #9a6700;
    --request-status-bg: rgba(154, 103, 0, 0.12);
}

.h-request-status-approved {
    --request-status-color: #1b7f4d;
    --request-status-bg: rgba(27, 127, 77, 0.12);
}

.h-request-status-rejected {
    --request-status-color: #b3261e;
    --request-status-bg: rgba(179, 38, 30, 0.12);
}

/* Free text keeps the employee's line breaks, and a long IBAN or URL still wraps. */
.h-request-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Deleted and withdrawn rows, shown only with Include deleted. */
.k-grid tr.h-request-deleted td {
    opacity: 0.55;
}

.k-grid tr.h-request-deleted .h-request-text {
    text-decoration: line-through;
}

.h-request-deleted-marker,
.h-request-inactive {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.h-request-deleted-marker {
    color: #6c757d;
    background: rgba(108, 117, 125, 0.14);
}

.h-request-inactive {
    color: #9a6700;
    background: rgba(154, 103, 0, 0.12);
}

.h-request-edited {
    font-style: italic;
}

/* Attachments - one link per file, the portal's ordinary link colours, as the requirement proofs. */
.h-request-attachments {
    margin: 0;
    padding: 0;
    list-style: none;
}

.h-request-attachments li + li {
    margin-top: 0.15rem;
}

/* In the edit window each kept file has a remove button after it. */
.h-request-attachments-editable {
    margin-bottom: 0.5rem;
}

.h-request-attachments-editable li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

a.h-request-link,
.k-grid a.h-request-link {
    color: var(--h-policy-link-color, #007bff);
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    overflow-wrap: anywhere;
}

a.h-request-link:hover,
a.h-request-link:focus-visible,
.k-grid a.h-request-link:hover,
.k-grid a.h-request-link:focus-visible {
    color: var(--h-policy-link-hover-color, #015eac);
}

.h-request-link-icon::before {
    content: "0c6";          /* fa-paperclip */
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    margin-right: 0.35rem;
    opacity: 0.8;
}

.h-request-attachment-size,
.h-request-attachments-none {
    margin-left: 0.4rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.h-request-attachments-none {
    margin-left: 0;
}

/* Request window, detail window and type editor ----------------------------- */

.h-request-field-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    opacity: 0.7;
}

.h-request-counter {
    text-align: right;
}

.h-request-form label {
    display: block;
    margin: 0.9rem 0 0.25rem;
    font-weight: 600;
}

.h-request-form > label:first-child {
    margin-top: 0;
}

.h-request-form-value {
    margin: 0;
}

.h-request-form .k-textarea {
    width: 100%;
}

.h-request-detail-text {
    max-height: 40vh;
    overflow: auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 0.25rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.h-request-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0.9rem 0 0;
}

.h-request-facts dt {
    font-weight: 600;
}

.h-request-facts dd {
    margin: 0;
}

/* Validation and server refusals, shown in the window rather than as a toast. */
.h-request-form-error {
    margin-top: 1rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid #b3261e;
    background: rgba(179, 38, 30, 0.08);
    color: #b3261e;
}

.h-request-form-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* ==========================================================================
   Overview - module level, so h-compliance-*
   A plain CSS Grid like the Attendance absence timeline: column 1 is the frozen employee
   name, then one column per policy and requirement. Row 1 groups the columns, row 2 names
   them; both stick to the top of the single scroll container. The component emits only the
   column count - widths, heights and colours are the custom properties below.
   ========================================================================== */

.h-compliance-intro {
    margin: 0 0 1rem;
    max-width: 70ch;
}

.h-compliance-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.h-compliance-matrix {
    --h-compliance-name-width: 14rem;
    --h-compliance-col-width: 9.5rem;
    --h-compliance-group-height: 1.75rem;
    --h-compliance-bg: #ffffff;
    --h-compliance-row-alt: #f7f8fa;
    --h-compliance-line: rgba(15, 23, 42, 0.08);
    --h-compliance-header-line: #ced4da;

    overflow: auto;
    max-height: calc(100vh - 260px);
    min-height: 240px;
    background: var(--h-compliance-bg);
}

.h-compliance-grid {
    display: grid;
    grid-template-rows: var(--h-compliance-group-height) auto;
    grid-auto-rows: auto;
    width: max-content;
    min-width: 100%;
}

/* Frozen corner and headers. z-index stays below the portal top bar's 7. */

.h-compliance-corner {
    grid-row: 1 / 3;
    grid-column: 1;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--h-compliance-bg);
    border-right: 1px solid var(--h-compliance-header-line);
    border-bottom: 1px solid var(--h-compliance-header-line);
}

.h-compliance-group {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: var(--h-compliance-bg);
    border-left: 1px solid var(--h-compliance-header-line);
    border-bottom: 1px solid var(--h-compliance-line);
}

.h-compliance-col {
    position: sticky;
    top: var(--h-compliance-group-height);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    background: var(--h-compliance-bg);
    border-left: 1px solid var(--h-compliance-line);
    border-bottom: 1px solid var(--h-compliance-header-line);
}

/* Long titles wrap to three lines; the full title is on the tooltip. */
.h-compliance-col-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.h-compliance-col .h-requirement-optional {
    margin-left: 0;
}

/* Frozen employee column and body cells */

.h-compliance-name {
    grid-column: 1;
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem;
    background: var(--h-compliance-bg);
    border-right: 1px solid var(--h-compliance-header-line);
    border-bottom: 1px solid var(--h-compliance-line);
}

.h-compliance-name-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.h-compliance-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.25rem;
    text-align: center;
    background: var(--h-compliance-bg);
    border-left: 1px solid var(--h-compliance-line);
    border-bottom: 1px solid var(--h-compliance-line);
}

.h-compliance-name.h-compliance-row-alt,
.h-compliance-cell.h-compliance-row-alt {
    background-color: var(--h-compliance-row-alt);
}

/* The expiry date under a requirement pill. */
.h-compliance-cell-date {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    opacity: 0.7;
    white-space: nowrap;
}

/* Does not apply to this employee. Quiet, so the pills carry the page. */
.h-compliance-cell-na {
    opacity: 0.35;
}

.h-compliance-empty {
    padding: 2rem 1rem;
    text-align: center;
    opacity: 0.7;
    border: 1px solid rgba(15, 23, 42, 0.08);
}