/* Record pages (CLAUDE.md "Record pages"): header strip, left section menu + summary blocks, main panel.
   Layout after the team's Route Local account page, in Wayforce colours. */

/* ---------- Header ---------- */

.wf-record-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 18px;
}

.wf-record-back {
    margin-top: 2px;
    color: var(--wf-text-muted);
}

.wf-record-heading {
    flex: 1;
    min-width: 0;
}

    .wf-record-heading h1 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.25;
    }

.wf-record-ref {
    margin-right: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wf-text-muted);
    vertical-align: 2px;
}

.wf-record-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

/* Actions ▾ */
.wf-actions {
    position: relative;
    flex-shrink: 0;
}

    .wf-actions > summary {
        list-style: none;
    }

        .wf-actions > summary::-webkit-details-marker {
            display: none;
        }

    .wf-actions[open] > summary .wf-chevron {
        transform: rotate(180deg);
    }

.wf-actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: 220px;
    padding: 6px;
    background: var(--wf-surface);
    border: 1px solid var(--wf-border);
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
}

/* ---------- Body: side panel + main ---------- */

.wf-record-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.wf-record-side {
    padding: 12px;
}

.wf-record-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Section menu */
.wf-section-menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--wf-border);
}

.wf-section-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    font-size: 0.875rem;
    color: var(--wf-text);
    text-decoration: none;
    border-radius: var(--wf-radius-sm);
}

    .wf-section-link .wf-icon {
        color: var(--wf-text-muted);
    }

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

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

    .wf-section-link.active {
        background: var(--wf-primary-tint);
        color: var(--wf-primary-strong);
        font-weight: 600;
    }

        .wf-section-link.active .wf-icon {
            color: var(--wf-primary-strong);
        }

/* Summary blocks */
.wf-summary-block {
    padding: 14px 6px 10px;
    border-bottom: 1px solid var(--wf-border);
}

    .wf-summary-block:last-child {
        border-bottom: none;
    }

.wf-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

    .wf-summary-heading h2,
    .wf-key-heading {
        margin: 0;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wf-text-muted);
    }

.wf-summary-title {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 600;
}

.wf-summary-address,
.wf-key-address {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-style: normal;
    line-height: 1.45;
}

/* Free text at the top of a block (e.g. the job's description). */
.wf-summary-text {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    line-height: 1.45;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* A labelled part of a block, with its own ✎ and content underneath (e.g. the job's summary note and tags). */
.wf-summary-part {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--wf-border);
}

.wf-summary-subheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--wf-text-muted);
}

    .wf-summary-part .wf-job-tags-editor {
        padding: 8px;
    }

    .wf-summary-part .wf-note-form-actions {
        flex-wrap: wrap;
    }

        .wf-summary-part .wf-note-form-actions select {
            flex: 1 1 100%;
            margin-right: 0;
        }

.wf-summary-block .wf-muted {
    margin: 0;
    font-size: 0.8125rem;
}

/* Label/value rows */
.wf-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.8125rem;
}

.wf-detail-label {
    color: var(--wf-text-muted);
    flex-shrink: 0;
}

.wf-detail-value {
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

    .wf-detail-value a {
        color: var(--wf-text);
        text-decoration: none;
    }

        .wf-detail-value a:hover {
            color: var(--wf-primary-strong);
            text-decoration: underline;
        }

/* Key details strip (Address, Contact) */
.wf-key-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 24px 48px;
    padding: 18px 22px;
}

.wf-key-group .wf-key-heading {
    margin-bottom: 8px;
}

.wf-key-address {
    font-size: 0.875rem;
}

.wf-key-group .wf-detail-row {
    justify-content: flex-start;
    font-size: 0.875rem;
}

.wf-key-group .wf-detail-label {
    width: 110px;
}

.wf-key-group .wf-detail-value {
    text-align: left;
}

.wf-link-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wf-primary-strong);
    text-decoration: none;
}

    .wf-link-icon:hover {
        text-decoration: underline;
    }

.wf-preferred {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wf-warning-text);
}

    .wf-preferred .wf-icon {
        fill: #F2B705;
        stroke: #C99400;
    }

.wf-record-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ---------- Overview: History on the left, Jobs / Notes / Equipment on the right ---------- */

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

.wf-overview-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* List cards */
.wf-list-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wf-list-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid #EEEEEE;
}

    .wf-list-card-header h2 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 600;
    }

.wf-count {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--wf-surface-alt);
    color: var(--wf-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.6;
}

.wf-list-card-body {
    max-height: 340px;
    overflow-y: auto;
}

.wf-overview-history .wf-list-card-body {
    max-height: 420px;
}

.wf-list-card-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-list-card-items > li {
        padding: 10px 18px;
        border-bottom: 1px solid #F1F1F1;
    }

        .wf-list-card-items > li:last-child {
            border-bottom: none;
        }

.wf-list-card-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 18px;
    font-size: 0.875rem;
    text-align: center;
}

.wf-list-card-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 18px;
}

/* Card rows */
.wf-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.wf-item-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.wf-item-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--wf-text-muted);
    white-space: nowrap;
}

.wf-item-text {
    margin: 3px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.wf-note-text {
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wf-item-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--wf-text-muted);
}

/* History as a timeline */
.wf-overview-history .wf-list-card-items > li {
    position: relative;
    padding-left: 34px;
    border-bottom: none;
}

    .wf-overview-history .wf-list-card-items > li::before {
        content: "";
        position: absolute;
        left: 18px;
        top: 15px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--wf-primary);
    }

    .wf-overview-history .wf-list-card-items > li::after {
        content: "";
        position: absolute;
        left: 21px;
        top: 25px;
        bottom: -12px;
        width: 2px;
        background: #E6EDF3;
    }

    .wf-overview-history .wf-list-card-items > li:last-child::after {
        content: none;
    }

/* Jobs */
.wf-job-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wf-job-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--wf-primary-tint);
    color: var(--wf-primary-strong);
}

.wf-job-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

    .wf-job-text .wf-item-sub {
        margin-top: 0;
        font-size: 0.8125rem;
    }

.wf-job-status {
    flex-shrink: 0;
    font-size: 0.8125rem;
    color: var(--wf-text-muted);
    text-align: right;
}

/* ---------- Narrow screens ---------- */

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

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

    .wf-section-menu {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .wf-section-link {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .wf-key-details {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }

    .wf-record-header {
        flex-wrap: wrap;
    }
}

/* Jobs card rows */
.wf-list-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-job-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.wf-job-type {
    font-size: 0.875rem;
}

.wf-job-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.wf-job-item.is-closed .wf-job-icon {
    background: var(--wf-surface-alt);
    color: var(--wf-text-muted);
}

.wf-job-item.is-closed .wf-item-title,
.wf-job-item.is-closed .wf-job-type {
    color: var(--wf-text-muted);
}

/* Job type badge: the job type's own colour and icon (from the company's job type definitions) */
.wf-jobtype-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--wf-primary-strong);
}

    .wf-jobtype-badge.is-default {
        background: var(--wf-primary-tint);
        color: var(--wf-primary-strong);
    }

.wf-job-item.is-closed .wf-jobtype-badge {
    opacity: 0.55;
}

/* Clickable card rows (e.g. a job, which pops out its summary) */
.wf-list-card-items > li.is-clickable {
    cursor: pointer;
    transition: background-color 0.12s;
}

    .wf-list-card-items > li.is-clickable:hover {
        background: #F7FAFD;
    }

    .wf-list-card-items > li.is-clickable:focus-visible {
        outline: 2px solid var(--wf-primary);
        outline-offset: -2px;
    }

/* Job summary pop-up */
.wf-job-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wf-job-summary-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.wf-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px 20px;
    margin: 0;
}

    .wf-facts dt {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wf-text-muted);
    }

    .wf-facts dd {
        margin: 2px 0 0;
        font-size: 0.875rem;
    }

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

.wf-job-description p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-line;
}

.wf-job-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Cards inside a dialog: lighter, no shadow */
.wf-dialog-card {
    box-shadow: none;
}

    .wf-dialog-card .wf-list-card-body {
        max-height: 220px;
    }

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

/* Equipment name: TYPE label, then make (bold) and model */
.wf-equipment-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

    .wf-equipment-name.is-inline {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 2px 8px;
    }

.wf-equipment-type {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wf-primary-strong);
}

.wf-equipment-makemodel {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: 0.875rem;
}

.wf-equipment-make {
    font-weight: 600;
}

/* Header commands: visible icon-and-text buttons (not a drop-down) */
.wf-record-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

/* Standard ✎ edit icon in panel headings */
.wf-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--wf-text-muted);
    background: transparent;
    border: none;
    border-radius: var(--wf-radius-sm);
    cursor: pointer;
}

    .wf-edit-btn:hover:not(:disabled) {
        color: var(--wf-primary-strong);
        background: var(--wf-primary-tint);
    }

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

    .wf-edit-btn:disabled {
        opacity: 0.4;
        cursor: default;
    }

.wf-key-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

    .wf-key-heading-row .wf-key-heading {
        margin-bottom: 0;
    }

.wf-summary-heading {
    min-height: 28px;
}

/* Tags beside the record name */
.wf-record-title-extras {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: 10px;
    vertical-align: 4px;
}

.wf-tag-lg {
    padding: 2px 10px;
    font-size: 0.8125rem;
}

/* Long tag descriptions beside the name are shortened with "…" (full text on hover) */
.wf-record-title-extras .wf-tag-lg {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* A record section shown as one card (e.g. Documents): heading + filters, then the shared list */
.wf-section-card {
    overflow: hidden;
}

.wf-section-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--wf-border);
}

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

.wf-section-card .wf-grid {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.wf-link {
    color: var(--wf-primary-strong);
    text-decoration: none;
}

    .wf-link:hover {
        text-decoration: underline;
    }

/* Section card tools (search, filters, + New) */
.wf-section-card-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

    .wf-section-card-tools select {
        height: 36px;
        padding: 0 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);
    }

    .wf-section-card-tools .wf-search {
        width: 220px;
    }

        .wf-section-card-tools .wf-search input {
            height: 36px;
        }

/* Job number with its job-type badge in a list */
.wf-job-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .wf-job-cell .wf-jobtype-badge {
        width: 30px;
        height: 30px;
    }

.wf-status-inline {
    margin-left: 6px;
}

/* Equipment list */
.wf-primary-mark {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wf-warning-text);
}

    .wf-primary-mark .wf-icon {
        fill: #F2B705;
        stroke: #C99400;
    }

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

/* Job tags in the job pop-up */
.wf-job-tags h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wf-text-muted);
}

.wf-job-tags p {
    margin: 0;
    font-size: 0.875rem;
}

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

.wf-job-tags-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--wf-primary-tint);
    border-radius: var(--wf-radius-sm);
}

    .wf-job-tags-editor select {
        margin-right: auto;
    }

/* The job's customer in the job pop-up */
.wf-job-customer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--wf-surface-alt);
    border-radius: var(--wf-radius-sm);
}

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

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

.wf-job-customer-details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 0.8125rem;
}

    .wf-job-customer-details > * {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .wf-job-customer-details .wf-icon {
        flex: none;
        color: var(--wf-text-muted);
    }

/* A visit's actions in the job pop-up (Send to mobile, Reschedule, Complete, Cancel visit) */
.wf-visit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 4px;
}

.wf-link-btn {
    padding: 2px 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wf-primary-strong);
    background: none;
    border: none;
    cursor: pointer;
}

    .wf-link-btn:hover {
        text-decoration: underline;
    }

    .wf-link-btn:focus-visible {
        outline: none;
        box-shadow: var(--wf-focus-ring);
        border-radius: 2px;
    }

    .wf-link-btn.is-danger {
        color: var(--wf-error-text);
    }

.wf-job-summary-edit {
    margin-left: auto;
}

    .wf-job-summary-edit {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

/* Notes card: edit/delete beside each note, shown on hover or focus */
.wf-note-actions {
    display: inline-flex;
    gap: 2px;
    margin-left: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wf-note-item:hover .wf-note-actions,
.wf-note-item:focus-within .wf-note-actions {
    opacity: 1;
}

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

.wf-note-item .wf-note-form {
    margin: 6px 0;
    padding: 8px;
    border-radius: var(--wf-radius-sm);
}

.wf-note-quote {
    padding: 8px 10px;
    font-size: 0.875rem;
    white-space: pre-line;
    background: var(--wf-surface-alt);
    border-left: 3px solid var(--wf-border);
    border-radius: var(--wf-radius-sm);
}

.wf-spacer {
    margin-right: auto;
}

/* Visit detail pop-up (what the engineer sent back from site) */
.wf-visit-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

    .wf-visit-detail section > p {
        margin: 0;
    }

.wf-visit-notes {
    white-space: pre-wrap;
}

.wf-visit-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-visit-files li {
        display: flex;
        align-items: baseline;
        gap: 12px;
        font-size: 0.875rem;
    }

    .wf-visit-files .wf-link-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.875rem;
    }

.wf-visit-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .wf-visit-photos button {
        display: block;
        width: 100%;
        aspect-ratio: 1;
        padding: 0;
        overflow: hidden;
        cursor: zoom-in;
        background: var(--wf-surface-alt);
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
    }

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

    .wf-visit-photos img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.wf-visit-signatures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .wf-visit-signatures figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 100px;
        margin: 0;
        padding: 10px;
        background: #FFFFFF;
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
    }

    .wf-visit-signatures img {
        max-width: 100%;
        max-height: 120px;
    }

    .wf-visit-signatures figcaption {
        font-size: 0.75rem;
        color: var(--wf-text-muted);
    }

/* A fact with a small action beside it (e.g. the job's Owner with Change) */
.wf-fact-with-action {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

/* Invoice pop-up: bill-to beside the facts */
.wf-invoice-parties {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 16px;
    align-items: start;
}

.wf-invoice-address {
    display: flex;
    flex-direction: column;
    font-style: normal;
    font-size: 0.875rem;
}

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

/* A Charges section: the account totals in its heading, payments as credits. */
.wf-charge-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    font-size: 0.8125rem;
}

    .wf-charge-totals div {
        display: flex;
        gap: 6px;
    }

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

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

    .wf-charge-totals .is-owed dd {
        color: var(--wf-error-text);
    }

.wf-amount-credit {
    color: var(--wf-success-text);
}

/* Settings: the company's panels in a grid, the current logo, and a document's versions. */
.wf-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
    gap: 16px;
    align-items: start;
}

.wf-settings-card {
    padding: 16px 18px;
}

.wf-settings-logo {
    display: block;
    max-width: 220px;
    max-height: 90px;
    margin: 4px 0 10px;
    object-fit: contain;
}

.wf-settings-versions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

    .wf-settings-versions li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
    }

/* Upload a new logo: the current and new logos side by side. */
.wf-logo-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

    .wf-logo-compare figure {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 120px;
        margin: 0;
        padding: 12px;
        background: var(--wf-surface-alt);
        border: 1px solid var(--wf-border);
        border-radius: var(--wf-radius-sm);
    }

    .wf-logo-compare figcaption {
        align-self: flex-start;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--wf-text-muted);
    }

    .wf-logo-compare img {
        max-width: 100%;
        max-height: 90px;
        object-fit: contain;
    }