/* Shared interactive pieces: side panel, forms, alerts, toasts. */

/* ---------- Dialog: centred pop-up window over the dimmed page ---------- */

.wf-dialog-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6vh 16px 16px;
    overflow-y: auto;
    background: rgba(20, 30, 40, 0.38);
    animation: wf-fade-in 0.15s ease;
}

.wf-dialog {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88vh;
    background: var(--wf-surface);
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(20, 40, 70, 0.28);
    animation: wf-pop-in 0.18s ease;
}

.wf-dialog-md {
    max-width: 640px;
}

.wf-dialog-lg {
    max-width: 880px;
}

.wf-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--wf-border);
}

    .wf-dialog-header h2 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
    }

.wf-dialog-close {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wf-text-muted);
}

.wf-dialog-subtitle {
    margin: 2px 0 0;
    font-size: 0.875rem;
    color: var(--wf-text-muted);
}

.wf-dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
}

.wf-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--wf-border);
    background: #FAFBFC;
    border-radius: 0 0 12px 12px;
}

.wf-dialog-loading {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@keyframes wf-pop-in {
    from { transform: translateY(8px) scale(0.98); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes wf-slide-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes wf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Two-column form inside a large dialog; one column on narrow screens. */
.wf-form-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

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

    .wf-dialog-scrim {
        padding: 0;
    }

    .wf-dialog {
        max-height: 100vh;
        min-height: 100vh;
        border-radius: 0;
    }
}

/* ---------- Forms ---------- */

.wf-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
}

    .wf-field > label,
    .wf-field > legend {
        padding: 0;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .wf-field input:not([type=checkbox]):not([type=radio]),
    .wf-field select,
    .wf-field textarea {
        width: 100%;
        min-height: 38px;
        padding: 8px 10px;
        font: inherit;
        font-size: 0.875rem;
        color: var(--wf-text);
        background: var(--wf-surface);
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
        outline: none;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

    .wf-field textarea {
        resize: vertical;
        line-height: 1.45;
    }

        .wf-field input:focus,
        .wf-field select:focus,
        .wf-field textarea:focus {
            border-color: var(--wf-primary);
            box-shadow: var(--wf-focus-ring);
        }

        .wf-field .invalid {
            border-color: var(--wf-error);
            outline: none;
        }

.wf-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wf-field-hint {
    font-size: 0.8125rem;
    color: var(--wf-text-muted);
}

.wf-required {
    color: var(--wf-error-text);
}

.wf-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

.wf-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 8px;
    font-size: 0.875rem;
    border-radius: 4px;
    cursor: pointer;
}

    .wf-check:hover {
        background: var(--wf-surface-alt);
    }

    .wf-check input {
        width: 16px;
        height: 16px;
        margin: 2px 0 0;
        accent-color: var(--wf-primary-strong);
        flex-shrink: 0;
    }

@media (max-width: 520px) {
    .wf-field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Alerts ---------- */

.wf-alert {
    margin-bottom: 14px;
    padding: 10px 12px;
    font-size: 0.875rem;
    border-left: 3px solid;
    border-radius: var(--wf-radius-sm);
}

.wf-alert-error {
    border-color: var(--wf-error);
    background: #FCEEF1;
    color: var(--wf-error-text);
}

.wf-alert-warning {
    border-color: var(--wf-warning);
    background: var(--wf-warning-soft);
    color: var(--wf-warning-text);
}

.wf-alert-info {
    border-color: var(--wf-info);
    background: var(--wf-primary-tint);
    color: var(--wf-text);
}

/* ---------- Toasts ---------- */

.wf-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(420px, calc(100vw - 32px));
}

.wf-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    font-size: 0.875rem;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-left: 4px solid;
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
    animation: wf-slide-in 0.2s ease;
}

    .wf-toast > span {
        flex: 1;
    }

.wf-toast-success {
    border-left-color: var(--wf-success);
}

.wf-toast-error {
    border-left-color: var(--wf-error);
}

.wf-toast-info {
    border-left-color: var(--wf-info);
}

.wf-toast-close {
    padding: 0 2px;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--wf-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .wf-dialog,
    .wf-dialog-scrim,
    .wf-toast {
        animation: none;
    }
}

/* ---------- Job scheduler (day view of engineers) ---------- */

.wf-scheduler {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wf-scheduler-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.wf-date-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .wf-date-nav input[type=date] {
        height: 30px;
        padding: 0 8px;
        font: inherit;
        font-size: 0.875rem;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
    }

.wf-date-label {
    margin-left: 6px;
    font-weight: 600;
}

.wf-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
}

    .wf-inline-field select {
        height: 30px;
        padding: 0 8px;
        font: inherit;
        font-weight: 400;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
    }

.wf-timeline {
    display: flex;
    flex-direction: column;
    max-height: 46vh;
    overflow-y: auto;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
}

.wf-timeline-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    min-height: 38px;
    border-bottom: 1px solid #EEEEEE;
}

    .wf-timeline-row:last-child {
        border-bottom: none;
    }

    .wf-timeline-row.is-selected {
        background: #F7FAFD;
    }

.wf-timeline-scale {
    position: sticky;
    top: 0;
    z-index: 3;
    min-height: 26px;
    background: #FAFBFC;
}

.wf-timeline-name {
    padding: 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-timeline-track {
    position: relative;
    height: 100%;
    min-height: 26px;
    border-left: 1px solid #EEEEEE;
    /* Hour lines */
    background-image: repeating-linear-gradient(to right, #EEF1F4 0 1px, transparent 1px calc(100% / var(--wf-hours)));
}

.wf-timeline-scale .wf-timeline-track {
    background-image: none;
}

.wf-timeline-hour {
    position: absolute;
    top: 5px;
    padding-left: 3px;
    font-size: 0.6875rem;
    color: var(--wf-text-muted);
}

.wf-tl-available,
.wf-tl-booking,
.wf-tl-selected {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 4px;
}

.wf-tl-available {
    z-index: 0;
    background: #E6F6F1;
}

    .wf-tl-available.is-admin {
        background: repeating-linear-gradient(45deg, #FFF1E6 0 5px, #FCE3CC 5px 10px);
    }

.wf-tl-booking {
    z-index: 1;
    background: #B9C4CE;
}

    .wf-tl-booking.is-booking-code {
        background: repeating-linear-gradient(45deg, #E3C9CF 0 5px, #D7B4BC 5px 10px);
    }

.wf-tl-selected {
    z-index: 2;
    background: var(--wf-primary-strong);
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--wf-primary);
}

/* Invisible clickable half-hour slots over each track */
.wf-tl-slot {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

    .wf-tl-slot:hover {
        background: rgba(62, 135, 196, 0.12);
    }

    .wf-tl-slot:focus-visible {
        outline: 2px solid var(--wf-primary);
        outline-offset: -2px;
    }

.wf-scheduler-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.75rem;
    color: var(--wf-text-muted);
}

    .wf-scheduler-legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.wf-tl-key {
    display: inline-block;
    width: 18px;
    height: 10px;
    border-radius: 3px;
}

    .wf-tl-key.is-available { background: #E6F6F1; }
    .wf-tl-key.is-admin { background: repeating-linear-gradient(45deg, #FFF1E6 0 3px, #FCE3CC 3px 6px); }
    .wf-tl-key.is-booking { background: #B9C4CE; }
    .wf-tl-key.is-selected { background: var(--wf-primary-strong); }

.wf-scheduler-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    font-size: 0.875rem;
    background: var(--wf-primary-tint);
    border-radius: var(--wf-radius-sm);
}

.wf-scheduler-warning {
    color: #8A4A12;
    font-size: 0.8125rem;
}

.wf-footer-hint {
    margin-right: auto;
    align-self: center;
    font-size: 0.8125rem;
    color: var(--wf-text-muted);
}

@media (max-width: 720px) {
    .wf-timeline-row {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .wf-footer-hint {
        display: none;
    }
}

/* Maximised dialog: fills the window (e.g. the scheduler, to see more of the diary) */
.wf-dialog-header-buttons {
    display: flex;
    align-items: center;
    gap: 2px;
}

    .wf-dialog-header-buttons .wf-icon-btn {
        color: var(--wf-text-muted);
    }

.wf-dialog.is-maximized {
    position: fixed;
    inset: 12px;
    width: auto;
    max-width: none;
    max-height: none;
}

    .wf-dialog.is-maximized .wf-dialog-body {
        display: flex;
        flex-direction: column;
    }

    .wf-dialog.is-maximized .wf-scheduler {
        flex: 1;
        min-height: 0;
    }

    .wf-dialog.is-maximized .wf-timeline {
        flex: 1;
        max-height: none;
    }

    .wf-dialog.is-maximized .wf-timeline-row {
        grid-template-columns: 200px minmax(0, 1fr);
        min-height: 46px;
    }

/* Bookings are clickable ("book straight after"), above the 15-minute slots */
button.wf-tl-booking {
    z-index: 5;
    padding: 0;
    border: none;
    cursor: pointer;
}

    button.wf-tl-booking:hover {
        filter: brightness(0.9);
        box-shadow: 3px 0 0 var(--wf-primary);
    }

    button.wf-tl-booking:focus-visible {
        outline: 2px solid var(--wf-primary);
        outline-offset: 1px;
    }

.wf-scheduler-choice-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

    .wf-scheduler-choice-line input[type=time] {
        height: 30px;
        padding: 0 8px;
        font: inherit;
        font-weight: 400;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
        background: var(--wf-surface);
    }

/* Scheduler click area: the whole row, under the bookings */
.wf-tl-hit {
    position: absolute;
    inset: 0;
    z-index: 4;
    cursor: crosshair;
}

    .wf-tl-hit:hover {
        background: rgba(62, 135, 196, 0.06);
    }

    .wf-tl-hit:focus-visible {
        outline: 2px solid var(--wf-primary);
        outline-offset: -2px;
    }

.wf-tl-selected {
    pointer-events: none;
}

/* Equipment form extras */
.wf-check-standalone {
    padding: 4px 0;
}

.wf-custom-fields {
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    background: #FAFBFC;
}

    .wf-custom-fields > legend {
        padding: 0 4px;
    }

/* Field grids: 3 or 4 fields across, fewer on narrow screens */
.wf-field-grid {
    display: grid;
    gap: 14px 16px;
}

    .wf-field-grid.wf-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wf-field-grid.wf-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

@media (max-width: 860px) {
    .wf-field-grid.wf-cols-3,
    .wf-field-grid.wf-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .wf-field-grid.wf-cols-3,
    .wf-field-grid.wf-cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sectioned forms (e.g. Edit customer) */
.wf-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEEEEE;
    scroll-margin-top: 8px;
}

    .wf-form-section:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

    .wf-form-section > h3,
    .wf-form-heading {
        margin: 0;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wf-primary-strong);
    }

.wf-field-grid.wf-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {
    .wf-field-grid.wf-cols-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wf-check-inline {
    padding: 2px 0;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--wf-text-muted);
}

.wf-field-ok {
    font-size: 0.8125rem;
    color: #1E6F5C;
}

/* Tag editor (Edit customer) */
.wf-tag-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    background: #FAFBFC;
}

.wf-tag-removable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 4px;
}

    .wf-tag-removable button {
        padding: 0 3px;
        font-size: 0.9375rem;
        line-height: 1;
        color: inherit;
        background: none;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }

        .wf-tag-removable button:hover {
            background: rgba(20, 112, 183, 0.15);
        }

/* File drop area (Upload document): the file input covers the whole area */
.wf-field-label {
    font-size: 0.875rem;
    font-weight: 600;
}

.wf-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    text-align: center;
    font-size: 0.875rem;
    color: var(--wf-text);
    background: #FAFBFC;
    border: 2px dashed var(--wf-border);
    border-radius: var(--wf-radius);
    transition: border-color 0.15s, background-color 0.15s;
}

    .wf-dropzone .wf-icon {
        color: var(--wf-primary);
    }

    .wf-dropzone:hover,
    .wf-dropzone:focus-within {
        border-color: var(--wf-primary);
        background: var(--wf-primary-tint);
    }

    .wf-dropzone.has-file {
        border-style: solid;
        border-color: var(--wf-primary);
    }

    .wf-dropzone input[type=file] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

/* Diary page: the full-width day view (shared DiaryTimeline, large) */
.wf-diary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.wf-diary-date {
    margin-right: auto;
    font-size: 0.9375rem;
}

.wf-timeline.is-large {
    max-height: calc(100vh - 290px);
    min-height: 240px;
}

    .wf-timeline.is-large .wf-timeline-row:not(.wf-timeline-scale) {
        grid-template-columns: 180px minmax(0, 1fr);
        min-height: 52px;
    }

    .wf-timeline.is-large .wf-timeline-scale {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .wf-timeline.is-large .wf-tl-available,
    .wf-timeline.is-large .wf-tl-booking {
        top: 5px;
        bottom: 5px;
    }

/* Visits in their job type's colour (from the company's job type definitions) */
.wf-tl-booking.is-coloured {
    background: var(--wf-entry);
}

button.wf-tl-booking {
    overflow: hidden;
    text-align: left;
}

.wf-tl-label {
    display: block;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-tl-booking.is-coloured .wf-tl-label {
    color: #FFFFFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.wf-tl-key.is-booking-code {
    background: repeating-linear-gradient(45deg, #E3C9CF 0 3px, #D7B4BC 3px 6px);
}

@media (max-width: 720px) {
    .wf-timeline.is-large .wf-timeline-row:not(.wf-timeline-scale),
    .wf-timeline.is-large .wf-timeline-scale {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

/* Diary page: jobs awaiting schedule beside the diary */
.wf-diary-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.wf-diary-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    position: sticky;
    top: 12px;
}

.wf-diary-side-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
}

.wf-count {
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--wf-primary-strong);
    background: var(--wf-primary-tint);
    border-radius: 999px;
}

.wf-diary-side-filters {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

    .wf-diary-side-filters input,
    .wf-diary-side-filters select {
        height: 32px;
        padding: 0 8px;
        font: inherit;
        font-size: 0.8125rem;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
        background: var(--wf-surface);
    }

.wf-diary-hint {
    margin: 4px 0;
    font-size: 0.8125rem;
}

.wf-diary-jobs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf-diary-job {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    font-size: 0.8125rem;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    cursor: grab;
}

    .wf-diary-job:hover {
        border-color: var(--wf-primary);
    }

    .wf-diary-job:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

    .wf-diary-job.is-picked {
        background: var(--wf-primary-tint);
        border-color: var(--wf-primary-strong);
        box-shadow: inset 3px 0 0 var(--wf-primary-strong);
    }

    .wf-diary-job.is-parked {
        border-style: dashed;
    }

.wf-diary-job-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .wf-diary-job-top .wf-muted:last-of-type {
        margin-left: auto;
    }

.wf-diary-job-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-diary-job-desc {
    color: var(--wf-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wf-diary-unpark {
    margin-left: 4px;
    padding: 0 4px;
    font-size: 0.75rem;
    line-height: 1.4;
}

.wf-diary-more {
    align-self: center;
    margin-top: 8px;
}

.wf-diary-parked {
    padding: 8px;
    margin: -4px -4px 0;
    border: 1px dashed transparent;
    border-radius: var(--wf-radius);
}

    .wf-diary-parked.is-drop-target {
        background: var(--wf-primary-tint);
        border-color: var(--wf-primary);
    }

/* The confirm bar for booking or moving */
.wf-diary-choice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    font-size: 0.875rem;
    background: var(--wf-primary-tint);
    border: 1px solid #CFE2F2;
    border-radius: var(--wf-radius-sm);
}

.wf-diary-choice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Dragging: rows show as drop targets; the visit being moved is faded */
.wf-timeline.is-dragging .wf-tl-hit {
    background: rgba(62, 135, 196, 0.05);
}

    .wf-timeline.is-dragging .wf-tl-hit:hover {
        background: rgba(62, 135, 196, 0.14);
    }

button.wf-tl-booking[draggable=true] {
    cursor: grab;
}

.wf-tl-booking.is-moving {
    opacity: 0.4;
    outline: 2px dashed var(--wf-primary-strong);
    outline-offset: 1px;
}

/* Engineer names as buttons (show that engineer's route) */
.wf-timeline-name-btn {
    height: 100%;
    text-align: left;
    color: var(--wf-text);
    background: none;
    border: none;
    cursor: pointer;
}

    .wf-timeline-name-btn:hover {
        color: var(--wf-primary-strong);
        text-decoration: underline;
    }

    .wf-timeline-name-btn:focus-visible {
        outline: 2px solid var(--wf-primary);
        outline-offset: -2px;
    }

.wf-timeline-row.is-highlighted {
    background: var(--wf-primary-tint);
}

    .wf-timeline-row.is-highlighted .wf-timeline-name-btn {
        color: var(--wf-primary-strong);
    }

@media (max-width: 960px) {
    .wf-diary-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .wf-diary-side {
        position: static;
        max-height: 40vh;
    }
}

/* Diary route map (one engineer's day) */
.wf-route-map {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--wf-border);
}

.wf-route-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .wf-route-map-header h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
    }

.wf-route-map-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 12px;
}

.wf-route-map-canvas {
    height: 420px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    background: var(--wf-surface-alt);
    z-index: 0;
}

.wf-route-stops {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    max-height: 420px;
    overflow-y: auto;
    list-style: none;
    font-size: 0.8125rem;
}

.wf-route-stop {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    font: inherit;
    text-align: left;
    color: var(--wf-text);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--wf-radius-sm);
}

button.wf-route-stop {
    cursor: pointer;
}

    button.wf-route-stop:hover {
        background: var(--wf-primary-tint);
    }

    button.wf-route-stop:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

.wf-route-stop.is-missing {
    color: var(--wf-text-muted);
}

.wf-route-stop-text {
    display: flex;
    flex-direction: column;
}

.wf-route-stop-label {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--wf-pin, var(--wf-neutral));
    border-radius: 50%;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

    .wf-route-stop-label.is-van {
        background: none;
        text-shadow: none;
    }

/* Map pins (Leaflet divIcons) */
.wf-map-pin-host {
    background: none;
    border: none;
}

.wf-map-pin {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    background: var(--wf-pin);
    border: 2px solid #FFFFFF;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

    .wf-map-pin > span {
        transform: rotate(45deg);
        font-size: 0.75rem;
        font-weight: 700;
        color: #FFFFFF;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    }

    .wf-map-pin.is-hq > span {
        font-size: 0.625rem;
    }

    .wf-map-pin.is-van {
        border-color: var(--wf-primary-strong);
    }

        .wf-map-pin.is-van > span {
            text-shadow: none;
        }

@media (max-width: 960px) {
    .wf-route-map-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .wf-route-map-canvas {
        height: 320px;
    }
}

/* Timeline covers the whole day: it opens on the working hours, scrolls sideways to earlier or later times,
   and keeps engineers' names and the hour scale in view. --wf-zoom = 24 / hours visible at once. */
.wf-timeline {
    --wf-name-w: 150px;
    overflow: auto;
}

.wf-timeline.is-large {
    --wf-name-w: 180px;
}

.wf-dialog.is-maximized .wf-timeline {
    --wf-name-w: 200px;
}

.wf-timeline-inner {
    display: flex;
    flex-direction: column;
    flex: none;
    min-width: 100%;
    width: calc(var(--wf-name-w) + (100% - var(--wf-name-w)) * var(--wf-zoom, 1));
}

.wf-timeline .wf-timeline-row,
.wf-dialog.is-maximized .wf-timeline-row,
.wf-timeline.is-large .wf-timeline-row:not(.wf-timeline-scale),
.wf-timeline.is-large .wf-timeline-scale {
    grid-template-columns: var(--wf-name-w) minmax(0, 1fr);
    align-items: stretch;
}

.wf-timeline .wf-timeline-scale {
    z-index: 8;
}

.wf-timeline-name {
    position: sticky;
    left: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    min-width: 0;
    background: var(--wf-surface);
    border-right: 1px solid #EEEEEE;
}

    .wf-timeline-name > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wf-timeline-scale .wf-timeline-name {
    background: #FAFBFC;
}

.wf-timeline-row.is-selected > .wf-timeline-name {
    background: #F7FAFD;
}

.wf-timeline-row.is-highlighted > .wf-timeline-name {
    background: var(--wf-primary-tint);
}

.wf-timeline-name-btn:hover {
    background: var(--wf-primary-tint);
}

@media (max-width: 720px) {
    .wf-timeline,
    .wf-timeline.is-large,
    .wf-dialog.is-maximized .wf-timeline {
        --wf-name-w: 96px;
    }
}

/* Time already passed on the day shown */
.wf-tl-past {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(118, 118, 118, 0.10) 0 4px, rgba(118, 118, 118, 0.04) 4px 8px);
    border-right: 2px solid var(--wf-error);
}

/* While dragging onto the diary: where the visit would land, with its start and end time */
.wf-tl-ghost {
    position: fixed;
    z-index: 2000;
    display: flex;
    align-items: center;
    padding: 0 6px;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--wf-primary-strong);
    background: rgba(62, 135, 196, 0.18);
    border: 2px dashed var(--wf-primary-strong);
    border-radius: 4px;
    pointer-events: none;
}

    .wf-tl-ghost[hidden] {
        display: none;
    }

/* The drop's start time: a line from the block's start to just below the row, with the time at its foot */
.wf-tl-marker {
    position: fixed;
    z-index: 2001;
    display: flex;
    align-items: flex-end;
    border-left: 2px solid var(--wf-primary-strong);
    pointer-events: none;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    color: #FFFFFF;
}

    .wf-tl-marker[hidden] {
        display: none;
    }

    .wf-tl-marker::before {
        content: "";
        position: absolute;
        left: -5px;
        bottom: -1px;
        width: 8px;
        height: 8px;
        background: var(--wf-primary-strong);
        border-radius: 50%;
    }

    /* The time, beside the foot of the line, on a pill so it reads over whatever row is below */
    .wf-tl-marker > span {
        position: absolute;
        left: 6px;
        bottom: -8px;
        padding: 3px 6px;
        background: var(--wf-primary-strong);
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }

/* Text for screen readers only (e.g. a label for a field whose purpose is shown another way) */
.wf-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Inline "add a note" form at the top of a notes card */
.wf-note-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px 12px;
    background: var(--wf-primary-tint);
    border-bottom: 1px solid var(--wf-border);
}

    .wf-note-form textarea {
        width: 100%;
        min-height: 72px;
        padding: 8px 10px;
        font: inherit;
        font-size: 0.875rem;
        resize: vertical;
        background: var(--wf-surface);
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
    }

        .wf-note-form textarea:focus {
            outline: none;
            border-color: var(--wf-primary);
            box-shadow: var(--wf-focus-ring);
        }

.wf-note-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
}

    .wf-note-form-actions .wf-inline-field {
        margin-right: auto;
    }

    .wf-note-form-actions select {
        height: 30px;
        padding: 0 6px;
        font: inherit;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
        background: var(--wf-surface);
    }

/* Visit progress in the block: completed (visit status) or the latest step from the mobile app */
button.wf-tl-booking {
    display: flex;
    align-items: center;
}

.wf-tl-progress {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 3px;
    color: var(--wf-neutral);
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

    .wf-tl-progress .wf-icon {
        stroke-width: 2.5;
    }

    .wf-tl-progress.is-completed { color: #1E8A6E; }
    .wf-tl-progress.is-onsite { color: var(--wf-primary-strong); }
    .wf-tl-progress.is-travelling,
    .wf-tl-progress.is-travelstopped { color: #B85E1E; }
    .wf-tl-progress.is-accepted { color: var(--wf-primary-strong); }
    .wf-tl-progress.is-rejected { color: var(--wf-error-text); }
    .wf-tl-progress.is-sent { color: var(--wf-neutral); }

.wf-tl-progress + .wf-tl-label {
    padding-left: 4px;
}

.wf-diary-progress-note {
    font-style: italic;
}

/* Small dialogs (confirmations) */
.wf-dialog-sm {
    max-width: 440px;
}

/* Footer buttons that belong on the left (e.g. a job's status actions), with Close and the main action on the right */
.wf-dialog-footer {
    flex-wrap: wrap;
    align-items: center;
}

.wf-dialog-footer-start {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-right: auto;
}

.wf-field-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Printable pages (PrintLayout), e.g. the job sheet: A4, plain, printed with the browser */
.wf-print-page {
    max-width: 210mm;
    margin: 0 auto;
    padding: 16px;
    background: var(--wf-surface);
}

.wf-sheet-toolbar {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.wf-sheet {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 0.875rem;
    color: #000000;
}

.wf-sheet-header {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--wf-text);
}

.wf-sheet-company {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.wf-sheet-logo {
    max-width: 150px;
    max-height: 80px;
    object-fit: contain;
}

.wf-sheet-title {
    text-align: right;
}

    .wf-sheet-title h1 {
        margin: 0;
        font-size: 1.5rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

.wf-sheet-number {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.wf-sheet-title dl {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 10px;
    margin: 0;
    justify-content: end;
    font-size: 0.8125rem;
}

    .wf-sheet-title dl div {
        display: contents;
    }

    .wf-sheet-title dt {
        color: #555555;
    }

    .wf-sheet-title dd {
        margin: 0;
        font-weight: 600;
    }

.wf-sheet-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.wf-sheet-box {
    padding: 10px 12px;
    line-height: 1.45;
    border: 1px solid #999999;
    border-radius: 4px;
}

.wf-sheet h2 {
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #333333;
}

.wf-sheet-section {
    break-inside: avoid;
}

.wf-sheet-text {
    margin: 0 0 6px;
    white-space: pre-line;
    line-height: 1.45;
}

.wf-sheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

    .wf-sheet-table th,
    .wf-sheet-table td {
        padding: 5px 6px;
        text-align: left;
        border: 1px solid #999999;
    }

    .wf-sheet-table th {
        background: #EEEEEE;
    }

    .wf-sheet-table .is-number {
        text-align: right;
    }

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body {
        background: #FFFFFF;
    }

    .wf-print-page {
        max-width: none;
        padding: 0;
    }

    .wf-sheet-toolbar {
        display: none;
    }

    .wf-sheet-table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Extra-large dialog: the report viewer */
.wf-dialog-xl {
    max-width: min(1200px, 96vw);
    height: 88vh;
}

    .wf-dialog-xl .wf-dialog-body {
        display: flex;
        padding: 0;
        overflow: hidden;
    }

.wf-dialog.is-maximized.wf-dialog-xl {
    height: auto;
}

.wf-report-frame {
    flex: 1;
    width: 100%;
    min-height: 0;
    border: none;
    background: #FFFFFF;
}

/* A button that looks like a link (e.g. a document title that opens the report viewer) */
.wf-link-plain {
    padding: 0;
    font: inherit;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.wf-link-plain:disabled {
    color: inherit;
    cursor: default;
}

.wf-job-customer-name.wf-link-plain {
    font-size: 1rem;
    font-weight: 600;
}

/* A searchable pick list in a dialog (e.g. choosing a landlord) */
.wf-landlord-search {
    width: 100%;
    margin-bottom: 8px;
}

.wf-pick-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 46vh;
    margin: 0 0 8px;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.wf-pick-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    text-align: left;
    color: var(--wf-text);
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    cursor: pointer;
}

    .wf-pick-item:hover {
        border-color: var(--wf-primary);
    }

    .wf-pick-item:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

    .wf-pick-item.is-selected {
        background: var(--wf-primary-tint);
        border-color: var(--wf-primary-strong);
        box-shadow: inset 3px 0 0 var(--wf-primary-strong);
    }

    .wf-pick-item .wf-status {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

.wf-pick-title {
    font-weight: 600;
}

/* Service covers in the contract agreement pop-up */
.wf-cover-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf-cover {
    padding: 8px 10px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

    .wf-cover.is-selected {
        background: var(--wf-primary-tint);
        border-color: var(--wf-primary);
    }

    .wf-cover .wf-check span {
        display: flex;
        flex-direction: column;
    }

.wf-cover-equipment {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 6px 0 2px 28px;
}

    .wf-cover-equipment p {
        margin: 0 0 4px;
    }

/* Master–detail (e.g. Stock): a list on the left, the selected item's details on the right */
.wf-master-detail {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.wf-master-detail-wide {
    grid-template-columns: 360px minmax(0, 1fr);
}

.wf-master {
    display: flex;
    flex-direction: column;
    padding: 0;
    max-height: calc(100vh - 200px);
    position: sticky;
    top: 12px;
    overflow: hidden;
}

.wf-master-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-bottom: 1px solid var(--wf-border);
}

    .wf-master-search .wf-search {
        width: 100%;
    }

.wf-master-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
}

.wf-master-count {
    margin-right: auto;
    font-size: 0.75rem;
}

.wf-master-empty,
.wf-master-note {
    margin: 0;
    padding: 6px 12px 10px;
    font-size: 0.8125rem;
}

.wf-master-scroll {
    padding-bottom: 6px;
    overflow-y: auto;
}

    .wf-master-scroll:focus-visible {
        outline: none;
        box-shadow: inset var(--wf-focus-ring);
    }

/* Stock locations navigator: groups (Main stores, Vans), each a two-level tree */
.wf-loc-group + .wf-loc-group {
    border-top: 1px solid var(--wf-border);
}

.wf-loc-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 4px 12px;
}

.wf-loc-group-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wf-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

    .wf-loc-group-toggle:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
        border-radius: 4px;
    }

.wf-loc-tree {
    margin: 0;
    padding: 0 6px;
    list-style: none;
}

.wf-loc-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 4px 0 6px;
    font-size: 0.875rem;
    border-radius: var(--wf-radius-sm);
}

    .wf-loc-row:hover {
        background: var(--wf-surface-alt);
    }

    .wf-loc-row.is-selected {
        background: var(--wf-primary-tint);
        box-shadow: inset 3px 0 0 var(--wf-primary-strong);
    }

.wf-loc-child {
    padding-left: 34px;
}

    .wf-loc-child::before {
        content: "└";
        margin-right: 6px;
        color: var(--wf-text-muted);
    }

.wf-loc-name {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 0;
    font: inherit;
    text-align: left;
    color: var(--wf-text);
    background: none;
    border: none;
    cursor: pointer;
}

    .wf-loc-name > .wf-icon {
        flex: none;
        color: var(--wf-primary-strong);
    }

.wf-loc-label {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .wf-loc-label > * {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* A row's buttons show when it's hovered, focused or selected (always on touch screens) */
.wf-loc-actions {
    display: flex;
    flex: none;
    gap: 2px;
    opacity: 0;
}

.wf-loc-row:hover .wf-loc-actions,
.wf-loc-row:focus-within .wf-loc-actions,
.wf-loc-row.is-selected .wf-loc-actions {
    opacity: 1;
}

@media (hover: none) {
    .wf-loc-actions {
        opacity: 1;
    }
}

.wf-tree-toggle,
.wf-tree-toggle-space {
    display: inline-block;
    flex: none;
    width: 22px;
}

.wf-tree-toggle {
    padding: 0;
    font: inherit;
    color: var(--wf-text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

    .wf-tree-toggle:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
        border-radius: 4px;
    }

.wf-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 320px;
    padding: 16px;
}

.wf-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

    .wf-detail-header h2 {
        margin: 0;
        font-size: 1.25rem;
    }

    .wf-detail-header p {
        margin: 2px 0 0;
    }

.wf-store-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.875rem;
    color: var(--wf-text-muted);
}

    .wf-store-figures strong {
        color: var(--wf-text);
    }

@media (max-width: 900px) {
    .wf-master-detail,
    .wf-master-detail-wide {
        grid-template-columns: minmax(0, 1fr);
    }

    .wf-master {
        position: static;
        max-height: 45vh;
    }
}

/* A location's stock: figures above the stock actions */
.wf-detail-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.wf-detail-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* A chosen item in a pop-up (e.g. the part being adjusted), with "Change" */
.wf-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--wf-surface-alt);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

@media (max-width: 640px) {
    .wf-detail-header {
        flex-direction: column;
    }

    .wf-detail-aside {
        align-items: flex-start;
    }
}

/* Tabs within a panel (e.g. a location's Stock and Movements) */
.wf-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--wf-border);
}

.wf-tab {
    margin-bottom: -1px;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wf-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

    .wf-tab:hover {
        color: var(--wf-text);
    }

    .wf-tab.is-selected {
        color: var(--wf-primary-strong);
        border-bottom-color: var(--wf-primary-strong);
    }

    .wf-tab:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
        border-radius: 4px 4px 0 0;
    }

/* A filter that's been applied, with ✕ to remove it */
.wf-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 10px;
    font-size: 0.8125rem;
    background: var(--wf-primary-tint);
    border-radius: 999px;
}

    .wf-filter-chip button {
        padding: 0 4px;
        font: inherit;
        color: var(--wf-text-muted);
        background: none;
        border: none;
        cursor: pointer;
    }

/* A search box with suggestions underneath */
.wf-typeahead {
    position: relative;
}

.wf-typeahead-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 20;
    width: max(100%, 300px);
    max-height: 280px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    box-shadow: var(--wf-shadow);
}

    .wf-typeahead-list button {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 6px 8px;
        font: inherit;
        font-size: 0.875rem;
        text-align: left;
        color: var(--wf-text);
        background: none;
        border: none;
        border-radius: var(--wf-radius-sm);
        cursor: pointer;
    }

        .wf-typeahead-list button:hover,
        .wf-typeahead-list button:focus-visible {
            outline: none;
            background: var(--wf-surface-alt);
        }

/* Stock quantities in and out */
.wf-qty-in {
    color: var(--wf-success-text);
}

.wf-qty-out {
    color: var(--wf-error-text);
}

/* A button showing that what it opens is open (e.g. a stock line's recent movements) */
.wf-icon-btn.is-active {
    color: var(--wf-primary-strong);
    background: var(--wf-surface);
}

/* A stock line's recent movements, under the line */
.wf-part-history {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

    .wf-part-history p {
        margin: 0;
    }

.wf-part-history-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-part-history-list li {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr) 56px minmax(0, 160px);
        gap: 10px;
        padding: 4px 0;
        border-bottom: 1px solid #EEEEEE;
    }

        .wf-part-history-list li:last-child {
            border-bottom: none;
        }

    .wf-part-history-list .is-number {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

@media (max-width: 768px) {
    .wf-part-history-list li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2px 10px;
    }
}

.wf-part-history-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Administration: a section within a selected item's panel (e.g. an equipment type's custom fields) */
.wf-admin-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--wf-border);
}

.wf-admin-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .wf-admin-section-header h3 {
        margin: 0;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--wf-text-muted);
    }

    .wf-admin-section-header p {
        margin: 2px 0 0;
        font-size: 0.8125rem;
    }

.wf-admin-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

    .wf-admin-list > li {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 12px;
        font-size: 0.875rem;
    }

        .wf-admin-list > li + li {
            border-top: 1px solid #EEEEEE;
        }

.wf-admin-list-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wf-admin-list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.8125rem;
}

.wf-option-chip {
    padding: 1px 8px;
    font-size: 0.75rem;
    background: var(--wf-surface-alt);
    border: 1px solid var(--wf-border);
    border-radius: 999px;
}

/* Radio choices in a form */
.wf-choice-group {
    margin: 0;
    padding: 0;
    border: none;
}

    .wf-choice-group legend {
        margin-bottom: 4px;
        padding: 0;
        font-size: 0.8125rem;
        font-weight: 600;
    }

.wf-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 16px;
    font-size: 0.875rem;
    cursor: pointer;
}

/* An editable list of options (e.g. a custom field's choices) */
.wf-option-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 8px;
    padding-left: 20px;
}

    .wf-option-list li {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .wf-option-list li input {
            flex: 1;
            min-width: 0;
        }

.wf-field-hint-error {
    color: var(--wf-error-text);
}

/* An admin list whose rows open (e.g. a make, showing its models underneath) */
.wf-admin-list > li.wf-admin-list-selectable {
    align-items: center;
}

    .wf-admin-list > li.wf-admin-list-selectable:hover {
        background: var(--wf-surface-alt);
    }

    .wf-admin-list > li.wf-admin-list-selectable.is-selected {
        background: var(--wf-primary-tint);
    }

.wf-admin-list-button {
    flex: 1;
    padding: 0;
    font: inherit;
    text-align: left;
    color: var(--wf-text);
    background: none;
    border: none;
    cursor: pointer;
}

    .wf-admin-list-button .wf-cell-sub {
        padding-left: 22px;
    }

    .wf-admin-list-button:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
        border-radius: 4px;
    }

.wf-admin-list > li.wf-admin-list-detail {
    display: block;
    padding: 0 12px 12px 34px;
    background: var(--wf-primary-tint);
    border-top: none;
}

/* An admin section shown inside a pop-up (e.g. a type's custom fields) needs no divider above it */
.wf-dialog-body > .wf-admin-section {
    padding-top: 0;
    border-top: none;
}

/* A make's models, under the open make */
.wf-models {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-models-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
}

    .wf-models-header > .wf-muted {
        margin-right: auto;
    }

.wf-models-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

    .wf-models-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 10px;
        font-size: 0.875rem;
    }

        .wf-models-list li + li {
            border-top: 1px solid #EEEEEE;
        }

.wf-models-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.wf-models-list li.is-highlighted {
    background: var(--wf-primary-tint);
    box-shadow: inset 3px 0 0 var(--wf-primary-strong);
}

/* Equipment: find a model by model, make or type */
.wf-model-finder {
    width: min(340px, 100%);
}

    .wf-model-finder .wf-search {
        width: 100%;
    }

.wf-model-finder-list {
    width: max(100%, 380px);
}

    .wf-model-finder-list button.is-active {
        background: var(--wf-surface-alt);
    }

.wf-model-finder-note {
    padding: 6px 8px;
    font-size: 0.8125rem;
    color: var(--wf-text-muted);
}

/* A master list row for something no longer in use (e.g. an obsolete report template) */
.wf-loc-row.is-muted .wf-loc-label strong {
    font-weight: 400;
    color: var(--wf-text-muted);
}

/* Chips for what something is linked to, each with ✕ to remove (e.g. a form's job types) */
.wf-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 12px;
    font-size: 0.875rem;
    background: var(--wf-primary-tint);
    border-radius: 999px;
}

    .wf-chip button {
        padding: 0 6px;
        font: inherit;
        color: var(--wf-text-muted);
        background: none;
        border: none;
        border-radius: 999px;
        cursor: pointer;
    }

        .wf-chip button:hover {
            color: var(--wf-error-text);
        }

        .wf-chip button:focus-visible {
            outline: none;
            box-shadow: var(--wf-focus-ring);
        }

/* Pick something to link, then add it (e.g. assign a form to a job type) */
.wf-assign {
    display: flex;
    gap: 6px;
}

    .wf-assign select {
        min-height: 32px;
        padding: 4px 8px;
        font: inherit;
        font-size: 0.875rem;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
        background: var(--wf-surface);
    }

/* Job types: the selected one's heading with a large badge */
.wf-jobtype-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wf-jobtype-badge.wf-jobtype-badge-lg {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

/* A short list of plain-language statements (e.g. what a job type does) */
.wf-plain-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
    font-size: 0.875rem;
}

/* A chip that only shows a link, with nothing to click */
.wf-chip.wf-chip-static {
    padding-right: 12px;
}

/* Job types: New job type (form beside a live preview of the badge) */
.wf-jobtype-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 20px;
    align-items: start;
}

.wf-jobtype-preview {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    text-align: center;
    background: var(--wf-surface-alt);
    border-radius: var(--wf-radius);
}

    .wf-jobtype-preview strong {
        overflow-wrap: anywhere;
    }

.wf-jobtype-badge.wf-jobtype-badge-xl {
    width: 64px;
    height: 64px;
    border-radius: 14px;
}

.wf-code-input {
    text-transform: uppercase;
}

.wf-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wf-swatch {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid var(--wf-surface);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--wf-border);
    cursor: pointer;
}

    .wf-swatch.is-selected {
        box-shadow: 0 0 0 2px var(--wf-text);
    }

    .wf-swatch:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

.wf-icon-search {
    margin-bottom: 6px;
}

.wf-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
    max-height: 220px;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

.wf-icon-choice {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: none;
    border: 2px solid transparent;
    border-radius: var(--wf-radius-sm);
    cursor: pointer;
}

    .wf-icon-choice:hover {
        background: var(--wf-surface-alt);
    }

    .wf-icon-choice.is-selected {
        border-color: var(--wf-primary-strong);
        background: var(--wf-primary-tint);
    }

    .wf-icon-choice:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

@media (max-width: 720px) {
    .wf-jobtype-editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .wf-jobtype-preview {
        position: static;
        order: -1;
    }
}

/* Job types: costing options, indented under the switch that turns them on */
.wf-costing-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 26px;
}

.wf-indent {
    margin-left: 26px;
}

/* A service fee rule read back as its sentence */
.wf-rule-preview {
    margin: 0;
    padding: 10px 12px;
    background: var(--wf-primary-tint);
    border-radius: var(--wf-radius-sm);
}

/* Job types: the cost tester's breakdown */
.wf-cost-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .wf-cost-table th,
    .wf-cost-table td {
        padding: 6px 8px;
        text-align: left;
        border-bottom: 1px solid var(--wf-border);
    }

    .wf-cost-table thead th {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--wf-text-muted);
    }

    .wf-cost-table .is-number {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .wf-cost-table tfoot th,
    .wf-cost-table tfoot td {
        border-bottom: none;
    }

/* Buttons in a navigator group heading (e.g. rename or delete a job type category) show on hover or focus too */
.wf-loc-group-header:hover .wf-loc-actions,
.wf-loc-group-header:focus-within .wf-loc-actions {
    opacity: 1;
}

/* Employees: initials avatar, the mobile app badge and the team filter */
.wf-person-avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-weight: 600;
    color: #fff;
    background: var(--wf-primary-strong);
    border-radius: 50%;
}

    .wf-person-avatar.is-inactive {
        background: var(--wf-neutral);
    }

.wf-mobile-badge {
    display: inline-flex;
    flex: none;
    margin-left: auto;
    color: var(--wf-primary-strong);
}

.wf-master-search > select {
    min-height: 34px;
    padding: 4px 8px;
    font: inherit;
    font-size: 0.875rem;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

/* Working hours: one row per day on a 24-hour track */
.wf-week {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
}

    .wf-week.is-not-applied .wf-week-bar {
        opacity: 0.45;
    }

.wf-week-row,
.wf-week-scale {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.wf-week-day {
    font-weight: 600;
}

.wf-week-track {
    position: relative;
    height: 26px;
    background: var(--wf-surface-alt);
    border-radius: var(--wf-radius-sm);
}

.wf-week-scale .wf-week-track {
    height: 16px;
    background: none;
}

.wf-week-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.6875rem;
    color: var(--wf-text-muted);
}

.wf-week-bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.6875rem;
    white-space: nowrap;
    color: #fff;
    background: var(--wf-primary-strong);
    border-radius: 4px;
}

    .wf-week-bar.is-admin {
        background: repeating-linear-gradient(135deg, var(--wf-neutral) 0 6px, #8a8a8a 6px 12px);
    }

.wf-week-none {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 0.75rem;
}

.wf-week-legend {
    display: flex;
    gap: 16px;
    margin: 6px 0 0;
    font-size: 0.75rem;
    color: var(--wf-text-muted);
}

.wf-week-key {
    display: inline-block;
    width: 14px;
    height: 10px;
    margin-right: 4px;
    vertical-align: -1px;
    background: var(--wf-primary-strong);
    border-radius: 2px;
}

    .wf-week-key.is-admin {
        background: repeating-linear-gradient(135deg, var(--wf-neutral) 0 3px, #8a8a8a 3px 6px);
    }

/* A grid of checkboxes (e.g. an employee's teams) */
.wf-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px 12px;
}

/* Working hours: bars open their window; day picker; a footer button on the left */
button.wf-week-bar {
    padding: 0 4px;
    font: inherit;
    font-size: 0.6875rem;
    border: none;
    cursor: pointer;
}

    button.wf-week-bar:hover {
        filter: brightness(1.1);
    }

    button.wf-week-bar:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

.wf-day-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wf-day-toggle {
    min-width: 52px;
    padding: 6px 10px;
    font: inherit;
    font-size: 0.875rem;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: 999px;
    cursor: pointer;
}

    .wf-day-toggle.is-selected {
        color: #fff;
        background: var(--wf-primary-strong);
        border-color: var(--wf-primary-strong);
    }

    .wf-day-toggle:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

.wf-footer-start {
    margin-right: auto;
}

/* A list of tick boxes in a pop-up (e.g. skills to add) */
.wf-check-list {
    max-height: 320px;
    overflow-y: auto;
}

    .wf-check-list li {
        padding: 6px 8px;
    }

    .wf-check-list .wf-check {
        align-items: flex-start;
    }

/* Qualification expiry: four boxes (expired, 7 days, 30 days, later) that choose the list below */
.wf-expiry-boxes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.wf-expiry-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 16px;
    font: inherit;
    text-align: left;
    border: 2px solid transparent;
    border-left-width: 6px;
    border-radius: var(--wf-radius);
    cursor: pointer;
}

    .wf-expiry-box:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

    .wf-expiry-box.is-selected {
        box-shadow: var(--wf-shadow);
        border-top-color: currentColor;
        border-right-color: currentColor;
        border-bottom-color: currentColor;
    }

    .wf-expiry-box.is-expired {
        color: var(--wf-error-text);
        background: var(--wf-error-soft);
        border-left-color: var(--wf-error);
    }

    .wf-expiry-box.is-week {
        color: var(--wf-warning-text);
        background: var(--wf-warning-soft);
        border-left-color: var(--wf-warning);
    }

    .wf-expiry-box.is-month {
        color: var(--wf-primary-strong);
        background: var(--wf-primary-tint);
        border-left-color: var(--wf-info);
    }

    .wf-expiry-box.is-later {
        color: var(--wf-success-text);
        background: var(--wf-success-soft);
        border-left-color: var(--wf-success);
    }

.wf-expiry-count {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.wf-expiry-label {
    font-size: 0.875rem;
    font-weight: 600;
}

@media (max-width: 720px) {
    .wf-expiry-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wf-section-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
}

/* Tabs across a page (e.g. Employees, Teams, Skills, Qualifications) */
.wf-page-tabs {
    margin-bottom: 16px;
}

/* A toolbar button pushed to the right */
.wf-toolbar-end {
    margin-left: auto;
}

.wf-chip.is-muted {
    color: var(--wf-text-muted);
    background: var(--wf-surface-alt);
}

/* Tabs that are links (each tab its own page, e.g. Financials) */
a.wf-tab {
    text-decoration: none;
}

.wf-tab.is-disabled {
    cursor: default;
    opacity: 0.5;
}

/* ---------- Printable invoice (InvoiceSheet) ---------- */

.wf-inv {
    display: flex;
    flex-direction: column;
    gap: 22px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--wf-text);
}

    .wf-inv h2 {
        margin: 0 0 4px;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wf-text-muted);
    }

    .wf-inv dl {
        margin: 0;
    }

.wf-inv-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 3px solid var(--wf-primary-strong);
}

.wf-inv-from {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-inv-logo {
    max-width: 180px;
    max-height: 70px;
    object-fit: contain;
    object-position: left center;
}

.wf-inv-company {
    display: flex;
    flex-direction: column;
    color: var(--wf-text-muted);
}

    .wf-inv-company strong {
        font-size: 0.9375rem;
        color: var(--wf-text);
    }

.wf-inv-heading {
    min-width: 230px;
    text-align: right;
}

    .wf-inv-heading h1 {
        margin: 0 0 10px;
        font-size: 1.75rem;
        font-weight: 300;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--wf-primary-strong);
    }

    .wf-inv-heading dl div {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }

    .wf-inv-heading dt {
        color: var(--wf-text-muted);
    }

    .wf-inv-heading dd {
        min-width: 90px;
        margin: 0;
        font-weight: 600;
        text-align: right;
    }

.wf-inv-parties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

    .wf-inv-parties > div {
        display: flex;
        flex-direction: column;
    }

    .wf-inv-parties strong {
        font-size: 0.875rem;
    }

.wf-inv-notes {
    margin: 0;
    white-space: pre-wrap;
}

.wf-inv-lines {
    width: 100%;
    border-collapse: collapse;
}

    .wf-inv-lines th {
        padding: 8px 10px;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
        color: var(--wf-surface);
        background: var(--wf-primary-strong);
    }

    .wf-inv-lines td {
        padding: 9px 10px;
        vertical-align: top;
        border-bottom: 1px solid var(--wf-border);
    }

    .wf-inv-lines .is-number {
        width: 1%;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

.wf-inv-item {
    display: block;
    font-weight: 600;
}

.wf-inv-part,
.wf-inv-item-notes {
    display: block;
    font-size: 0.75rem;
    color: var(--wf-text-muted);
}

.wf-inv-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.wf-inv-summary-notes {
    flex: 1;
}

.wf-inv-totals {
    min-width: 250px;
}

    .wf-inv-totals div {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 5px 10px;
    }

    .wf-inv-totals dt {
        color: var(--wf-text-muted);
    }

    .wf-inv-totals dd {
        margin: 0;
        font-variant-numeric: tabular-nums;
    }

    .wf-inv-totals .is-total {
        margin-top: 4px;
        padding: 8px 10px;
        font-size: 1rem;
        font-weight: 700;
        background: var(--wf-primary-tint);
        border-top: 2px solid var(--wf-primary-strong);
    }

        .wf-inv-totals .is-total dt {
            color: var(--wf-text);
        }

.wf-inv-payment {
    padding: 12px 14px;
    background: var(--wf-surface-alt);
    border: 1px solid var(--wf-border);
    border-radius: 6px;
}

    .wf-inv-payment p {
        margin: 0 0 6px;
    }

    .wf-inv-payment dl {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 24px;
    }

        .wf-inv-payment dl div {
            display: flex;
            gap: 6px;
        }

    .wf-inv-payment dt {
        color: var(--wf-text-muted);
    }

    .wf-inv-payment dd {
        margin: 0;
        font-weight: 600;
    }

.wf-inv-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    padding-top: 10px;
    font-size: 0.6875rem;
    color: var(--wf-text-muted);
    border-top: 1px solid var(--wf-border);
}

@media print {
    .wf-inv-lines th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .wf-inv-totals .is-total,
    .wf-inv-payment {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .wf-inv-lines tr {
        break-inside: avoid;
    }
}

.wf-inv-totals .is-balance {
    font-weight: 700;
}

.wf-inv-payments th {
    background: var(--wf-text-muted);
}

/* ---------- Customer picker (CustomerPicker) and part search ---------- */

.wf-customer-picker,
.wf-invoice-part-search {
    position: relative;
}

    .wf-customer-picker input,
    .wf-invoice-part-search input {
        width: 100%;
    }

.wf-customer-picker-chosen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: var(--wf-surface-alt);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

    .wf-customer-picker-chosen > div {
        display: flex;
        flex-direction: column;
    }

.wf-customer-picker-hint {
    margin: 4px 0 0;
    font-size: 0.8125rem;
}

.wf-customer-picker-results {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    max-height: 280px;
    margin: 4px 0 0;
    padding: 4px 0;
    overflow-y: auto;
    list-style: none;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

    .wf-customer-picker-results button {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 6px 10px;
        font: inherit;
        font-size: 0.875rem;
        text-align: left;
        color: var(--wf-text);
        background: none;
        border: none;
        cursor: pointer;
    }

        .wf-customer-picker-results button:hover,
        .wf-customer-picker-results button:focus-visible {
            outline: none;
            background: var(--wf-primary-tint);
        }

/* ---------- Invoice editor (InvoiceEditDialog) ---------- */

.wf-invoice-edit {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .wf-invoice-edit h3 {
        margin: 0;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wf-text-muted);
    }

.wf-invoice-edit-lines-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.wf-invoice-edit-add {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1;
    width: 100%;
}

    .wf-invoice-edit-add .wf-invoice-part-search {
        flex: 1;
    }

.wf-invoice-edit-table input {
    height: 32px;
    padding: 0 8px;
    font: inherit;
    font-size: 0.875rem;
    color: var(--wf-text);
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

.wf-invoice-edit-description {
    width: 100%;
    min-width: 200px;
}

.wf-invoice-edit-number {
    width: 90px;
    text-align: right;
}

.wf-invoice-edit-top {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 16px 28px;
    align-items: start;
}

.wf-invoice-edit-billto {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    font-style: normal;
    font-size: 0.875rem;
    background: var(--wf-surface-alt);
    border-radius: var(--wf-radius-sm);
}

.wf-invoice-edit-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-invoice-edit-empty {
    padding: 18px 8px !important;
    text-align: center !important;
}

.wf-invoice-edit-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 16px 28px;
    align-items: start;
}

.wf-invoice-edit-totals {
    margin: 0;
}

    .wf-invoice-edit-totals div {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 5px 8px;
        font-variant-numeric: tabular-nums;
    }

    .wf-invoice-edit-totals dt {
        color: var(--wf-text-muted);
    }

    .wf-invoice-edit-totals dd {
        margin: 0;
    }

    .wf-invoice-edit-totals .is-total {
        margin-top: 4px;
        font-weight: 700;
        background: var(--wf-primary-tint);
        border-top: 2px solid var(--wf-primary-strong);
    }

        .wf-invoice-edit-totals .is-total dt {
            color: var(--wf-text);
        }

@media (max-width: 720px) {
    .wf-invoice-edit-top,
    .wf-invoice-edit-bottom {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* The job's tracked costs offer in the invoice editor */
.wf-invoice-edit-costs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

/* Email invoice: who to send to */
.wf-email-choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    border: none;
}

.wf-email-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    cursor: pointer;
}

    .wf-email-choice.is-selected {
        border-color: var(--wf-primary);
        background: var(--wf-primary-tint);
    }

    .wf-email-choice > span {
        display: flex;
        flex-direction: column;
    }

/* Several printed invoices together: each starts on a new page */
.wf-inv-page + .wf-inv-page {
    margin-top: 48px;
    padding-top: 48px;
    border-top: 1px dashed var(--wf-border);
}

@media print {
    .wf-inv-page + .wf-inv-page {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        break-before: page;
    }

    .wf-no-print {
        display: none;
    }
}

/* Two-button choice (e.g. a quote without a job: invoice without one, or create one first) */
.wf-choice-pair {
    display: inline-flex;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    overflow: hidden;
}

    .wf-choice-pair button {
        padding: 4px 10px;
        font: inherit;
        font-size: 0.8125rem;
        white-space: nowrap;
        color: var(--wf-text);
        background: var(--wf-surface);
        border: none;
        cursor: pointer;
    }

        .wf-choice-pair button + button {
            border-left: 1px solid var(--wf-border);
        }

        .wf-choice-pair button:hover:not(:disabled) {
            background: var(--wf-surface-alt);
        }

        .wf-choice-pair button.is-selected {
            font-weight: 600;
            color: var(--wf-surface);
            background: var(--wf-primary-strong);
        }

        .wf-choice-pair button:focus-visible {
            outline: none;
            box-shadow: var(--wf-focus-ring);
        }

/* A field label with a small action on the right (e.g. "Tick all"). */
.wf-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Text reporting a failure in place (e.g. a part that couldn't be used). */
.wf-error-text {
    color: var(--wf-error-text);
}

/* Order job parts: "Order all" and "All from" above the parts, and a compact cost box per row. */
.wf-order-defaults {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 24px;
    margin-bottom: 12px;
}

    .wf-order-defaults .wf-field {
        flex: 1 1 260px;
        margin: 0;
    }

.wf-order-table select {
    width: 100%;
    min-width: 180px;
}

.wf-order-table td {
    vertical-align: top;
}

.wf-order-cost {
    width: 7em;
    text-align: right;
}

/* SMS template: the placeholder buttons under the message. */
.wf-sms-placeholders {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Administration › Postcode priority: "Who covers a postcode?" above the list */
.wf-coverage-check {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 18px;
}

.wf-coverage-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

    .wf-coverage-form input {
        width: 140px;
        text-transform: uppercase;
    }

    .wf-coverage-form .wf-check-inline {
        margin-left: auto;
    }

.wf-coverage-result {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-left: 22px;
}

    .wf-coverage-result li span {
        margin-left: 8px;
    }

/* Administration › Customer feedback: the period summary (boxes, trend bars, engineers) and the comment */
.wf-feedback-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
    padding: 16px 18px;
}

.wf-feedback-summary-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

    .wf-feedback-summary-header .wf-section-title {
        margin: 0;
    }

.wf-feedback-boxes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 0;
}

.wf-expiry-box.is-neutral {
    color: var(--wf-text);
    background: var(--wf-surface-alt);
    border-left-color: var(--wf-neutral);
}

.wf-feedback-charts {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 24px;
}

.wf-feedback-trend {
    margin: 0;
}

    .wf-feedback-trend figcaption {
        margin-bottom: 8px;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--wf-text-muted);
    }

.wf-bars {
    display: flex;
    align-items: stretch;
    gap: 6px;
    height: 160px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--wf-border);
}

.wf-bar {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

.wf-bar-stack {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 40px;
    min-height: 1px;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}

.wf-bar-part {
    display: block;
    flex-basis: 0;
}

    .wf-bar-part.is-happy {
        background: var(--wf-success);
    }

    .wf-bar-part.is-ok {
        background: var(--wf-warning);
    }

    .wf-bar-part.is-sad {
        background: var(--wf-error);
    }

.wf-bar-label {
    max-width: 100%;
    margin-top: 4px;
    overflow: hidden;
    font-size: 0.6875rem;
    color: var(--wf-text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wf-simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .wf-simple-table th {
        padding: 6px 8px;
        font-size: 0.75rem;
        font-weight: 600;
        text-align: left;
        color: var(--wf-text-muted);
        border-bottom: 1px solid var(--wf-border);
    }

    .wf-simple-table td {
        padding: 6px 8px;
        border-bottom: 1px solid var(--wf-surface-alt);
    }

    .wf-simple-table .wf-num {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

.wf-cell-clip {
    display: -webkit-box;
    max-width: 420px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wf-feedback-text {
    margin: 0;
    padding: 10px 14px;
    white-space: pre-wrap;
    background: var(--wf-surface-alt);
    border-left: 4px solid var(--wf-primary);
    border-radius: var(--wf-radius-sm);
}

@media (max-width: 900px) {
    .wf-feedback-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wf-feedback-charts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Administration › Job dispatcher */
.wf-dispatch-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 760px;
    margin-bottom: 20px;
    padding: 16px 18px;
}

.wf-dispatch-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .wf-dispatch-header .wf-section-title {
        margin: 0;
    }

.wf-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Web addresses and codes, e.g. a webhook's address */
.wf-mono {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.8125rem;
}

/* Documents › Edit details */
.wf-doc-edit-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-bottom: 12px;
}

.wf-doc-section + .wf-doc-section {
    margin-top: 16px;
}

.wf-doc-answer {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 4px 16px;
    align-items: start;
    padding: 8px 10px;
    border-bottom: 1px solid var(--wf-surface-alt);
    border-left: 3px solid transparent;
}

    .wf-doc-answer.is-changed {
        background: var(--wf-primary-tint);
        border-left-color: var(--wf-primary);
    }

    .wf-doc-answer.is-locked {
        color: var(--wf-text-muted);
    }

.wf-doc-question {
    padding-top: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.wf-doc-input {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .wf-doc-input input,
    .wf-doc-input textarea {
        width: 100%;
    }

.wf-doc-locked {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
    overflow-wrap: anywhere;
}

.wf-doc-missing {
    color: var(--wf-warning-text);
    font-weight: 600;
}

.wf-change-old {
    color: var(--wf-text-muted);
    text-decoration: line-through;
}

.wf-change-new {
    font-weight: 600;
}

@media (max-width: 720px) {
    .wf-doc-answer {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Contracts › Contract definitions: the service covers in plain words */
.wf-definition-covers {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-definition-covers > li {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--wf-surface-alt);
    }

        .wf-definition-covers > li:last-child {
            border-bottom: none;
        }

.wf-definition-cover-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

    .wf-definition-cover-text span {
        color: var(--wf-text-muted);
    }

/* A number with its unit side by side, e.g. "Every [1] [year(s)]" */
.wf-inline-pair {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 8px;
}

/* Contracts › Letter template pop-up: the form, with the placeholders you can use beside it */
.wf-letter-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(220px, 2fr);
    gap: 20px;
    align-items: start;
}

.wf-letter-library {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--wf-surface-alt);
    border-radius: var(--wf-radius);
}

.wf-letter-library-list {
    max-height: 320px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: 0.8125rem;
}

.wf-letter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-letter-chips li {
        padding: 3px 8px;
        font-size: 0.8125rem;
        border-radius: 999px;
    }

        .wf-letter-chips li.is-ok {
            color: var(--wf-success-text);
            background: var(--wf-success-soft);
        }

        .wf-letter-chips li.is-bad {
            color: var(--wf-error-text);
            background: var(--wf-error-soft);
        }

.wf-dropzone.invalid {
    border-color: var(--wf-error);
}

@media (max-width: 820px) {
    .wf-letter-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Word document preview (DocxViewer): the pages on a grey desk, as in Word */
.wf-docx-view {
    max-height: 70vh;
    overflow: auto;
    background: var(--wf-surface-alt);
    border-radius: var(--wf-radius-sm);
}

    .wf-docx-view.is-hidden {
        display: none;
    }

.wf-dialog.is-maximized .wf-docx-view {
    max-height: none;
}

/* A link back to the page this one belongs to, above a page title */
.wf-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wf-primary-strong);
    text-decoration: none;
}

.wf-btn.wf-btn-xs {
    height: 24px;
    padding: 0 8px;
    font-size: 0.75rem;
    gap: 4px;
}

/* Contracts › Service cover process: a top-down flow beside the editor */
.wf-process-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

.wf-process-canvas {
    padding: 20px;
    overflow: auto;
    background:
        radial-gradient(circle, var(--wf-border) 1px, transparent 1px) 0 0 / 18px 18px,
        var(--wf-surface);
}

.wf-process-editor {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

    .wf-process-editor .wf-section-title::first-letter {
        text-transform: uppercase;
    }

.wf-process-condition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

    .wf-process-condition select {
        min-width: 0;
    }

.wf-process-remove {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--wf-surface-alt);
    font-size: 0.875rem;
}

/* The flow: each step's children below it, joined by lines (a CSS tree, laid out automatically) */
.wf-flow,
.wf-flow ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-flow ul {
        position: relative;
        padding-top: 24px;
    }

    .wf-flow li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px 10px 0;
    }

    .wf-flow > li {
        padding-top: 0;
    }

        /* Lines: across to the siblings, and down into each box. */
        .wf-flow li::before,
        .wf-flow li::after {
            content: "";
            position: absolute;
            top: 0;
            width: 50%;
            height: 24px;
            border-top: 2px solid var(--wf-border);
        }

        .wf-flow li::before {
            right: 50%;
        }

        .wf-flow li::after {
            left: 50%;
            border-left: 2px solid var(--wf-border);
        }

        .wf-flow > li::before,
        .wf-flow > li::after,
        .wf-flow li:only-child::before {
            display: none;
        }

        .wf-flow li:only-child::after {
            width: 0;
            border-top: none;
        }

        .wf-flow li:first-child::before,
        .wf-flow li:last-child::after {
            border-top: none;
        }

        .wf-flow li:last-child::before {
            border-right: 2px solid var(--wf-border);
        }

    /* The line down from a box to its children. */
    .wf-flow ul::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        height: 24px;
        border-left: 2px solid var(--wf-border);
    }

.wf-flow-box {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 220px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    text-align: left;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-top: 4px solid var(--wf-primary);
    border-radius: var(--wf-radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

    .wf-flow-box.is-action {
        border-top-color: var(--wf-success);
    }

    .wf-flow-box.has-problem {
        border-top-color: var(--wf-error);
    }

    .wf-flow-box:hover {
        box-shadow: var(--wf-shadow);
    }

    .wf-flow-box:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
    }

    .wf-flow-box.is-selected {
        background: var(--wf-primary-tint);
        border-color: var(--wf-primary);
    }

    .wf-flow-box strong::first-letter {
        text-transform: uppercase;
    }

.wf-flow-kind {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
}

.wf-flow-detail {
    color: var(--wf-text-muted);
}

.wf-flow-problem {
    color: var(--wf-error-text);
    font-weight: 600;
}

.wf-flow-add {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

@media (max-width: 960px) {
    .wf-process-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .wf-process-editor {
        position: static;
    }
}

.wf-process-sms {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--wf-surface-alt);
}

/* Contracts › Dashboard: problems of one kind, grouped, with their jobs */
.wf-dashboard-kind {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
}

.wf-dashboard-kind-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .wf-dashboard-kind-header .wf-section-title {
        margin: 0;
    }

.wf-dashboard-groups,
.wf-dashboard-jobs {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-dashboard-groups > li {
        border-bottom: 1px solid var(--wf-surface-alt);
    }

.wf-dashboard-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
}

.wf-dashboard-group-title {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 8px;
    padding: 0;
    font: inherit;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

    .wf-dashboard-group-title .wf-icon.is-collapsed {
        transform: rotate(-90deg);
    }

.wf-dashboard-jobs {
    padding: 0 0 8px 34px;
}

    .wf-dashboard-jobs > li {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        font-size: 0.875rem;
    }

.wf-dashboard-job-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wf-dashboard-message {
    color: var(--wf-text-muted);
    font-size: 0.8125rem;
}

/* Inventory › Supplier: its stores and catalogues */
.wf-supplier-stores {
    margin: 0;
    padding: 0 18px;
    list-style: none;
}

    .wf-supplier-stores > li {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 0;
        border-bottom: 1px solid var(--wf-surface-alt);
    }

        .wf-supplier-stores > li:last-child {
            border-bottom: none;
        }

.wf-supplier-store-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.875rem;
}

    .wf-supplier-store-text > span:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

.wf-section-card-note {
    margin: 8px 18px 0;
    font-size: 0.8125rem;
}

/* Catalogue item: the linked part, and making the item one of your parts */
.wf-catalogue-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--wf-surface-alt);
    border-radius: var(--wf-radius-sm);
}

.wf-catalogue-create {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--wf-surface-alt);
}

.wf-catalogue-markup {
    align-items: center;
}

/* Catalogue import: the preview's problem lines */
.wf-import-problems {
    margin: 6px 0 0;
    padding-left: 18px;
}

.wf-import-bad td {
    background: var(--wf-warning-soft);
}

.wf-import-template {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--wf-border);
    border-radius: 8px;
    background: var(--wf-surface-alt);
}

.wf-import-template > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (max-width: 600px) {
    .wf-import-template {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Reports: the menu's cards and a report's page */
.wf-report-group + .wf-report-group {
    margin-top: 28px;
}

.wf-report-group-heading {
    margin: 0 0 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
}

.wf-report-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.wf-report-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    background: var(--wf-surface);
    color: var(--wf-text);
    text-decoration: none;
}

a.wf-report-card:hover,
a.wf-report-card:focus-visible {
    border-color: var(--wf-primary);
    box-shadow: var(--wf-shadow);
}

a.wf-report-card:focus-visible {
    outline: none;
    box-shadow: var(--wf-focus-ring);
}


.wf-report-card-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--wf-radius-sm);
    background: var(--wf-primary-tint);
    color: var(--wf-primary-strong);
}

.wf-report-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wf-report-card-text > span {
    color: var(--wf-text-muted);
    font-size: 0.9rem;
}

.wf-report-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    background: var(--wf-surface);
}

.wf-report-period {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.wf-report-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 4px;
}

.wf-report-run {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.wf-report-results-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.wf-report-results-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.wf-report-results-head p {
    margin: 2px 0 0;
}

.wf-report-cell {
    max-width: 320px;
    white-space: pre-line;
}

/* MultiPick: choose several from a list */
.wf-multipick {
    position: relative;
    min-width: 200px;
}

.wf-multipick-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
    background: var(--wf-surface);
    color: var(--wf-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wf-multipick-button:focus-visible {
    outline: none;
    box-shadow: var(--wf-focus-ring);
}

.wf-multipick-summary {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wf-multipick-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    width: max(100%, 280px);
    padding: 8px;
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    background: var(--wf-surface);
    box-shadow: var(--wf-shadow);
}

.wf-multipick-search {
    margin-bottom: 6px;
}

.wf-multipick-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    padding: 2px;
}

.wf-multipick-foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--wf-border);
}

.wf-report-period {
    margin: 0;
    padding: 0;
    border: none;
}

.wf-report-period legend {
    padding: 0;
    margin-bottom: 6px;
    font-weight: 600;
}

.wf-report-check {
    align-self: center;
}