/**
 * Work Order completion / closeout surface
 * ---------------------------------------
 * Root cause defense: app.css sets `div { background: transparent !important }`,
 * which strips Bootstrap modal inline backdrop styles and any non-!important panel
 * fill. This stylesheet pinches a dedicated opaque completion shell so the
 * closeout flow remains readable on mobile (and desktop) in light/dark themes.
 */

/* ── Overlay root ─────────────────────────────────────────────────────────── */
.fo-wo-completion {
    position: fixed;
    inset: 0;
    z-index: 1060;
    isolation: isolate;
    display: block;
    /* Completely opaque container cannot use opacity — keep solid stacking only */
    opacity: 1;
    pointer-events: auto;
}

/* Dimmed scrim: separate from the content panel (never share opacity). */
.fo-wo-completion__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(2, 6, 23, 0.72) !important;
    background-color: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: auto;
}

html[data-fo-theme="light"] .fo-wo-completion__backdrop {
    background: rgba(15, 23, 42, 0.48) !important;
    background-color: rgba(15, 23, 42, 0.48) !important;
}

/* Dialog shell sits above the backdrop */
.fo-wo-completion__dialog.modal,
.fo-wo-completion > .modal.fo-wo-completion__dialog {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.75rem;
    /* Transparent by design — content surface is the solid layer */
    background: transparent !important;
    background-color: transparent !important;
    opacity: 1 !important;
    overflow: hidden;
}

.fo-wo-completion__panel.modal-dialog {
    position: relative;
    z-index: 1;
    margin: 0;
    width: 100%;
    max-width: min(720px, 100%);
    max-height: min(92vh, 92dvh);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

/* Solid elevated panel — must beat global div transparent reset */
.fo-wo-completion__surface.modal-content,
.fo-wo-completion__surface {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(92vh, 92dvh);
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    color: var(--fo-text-primary, #f1f5f9) !important;
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155)) !important;
    border-radius: var(--fo-radius-xl, 12px);
    box-shadow: var(--fo-shadow-overlay, 0 12px 32px rgba(0, 0, 0, 0.4));
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    overflow: hidden;
}

.fo-wo-completion__header.modal-header,
.fo-wo-completion__footer.modal-footer,
.fo-wo-completion__body.modal-body {
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    color: var(--fo-text-primary, #f1f5f9) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-wo-completion__header.modal-header {
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--fo-border-default, var(--fo-border, #334155)) !important;
    z-index: 2;
}

.fo-wo-completion__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fo-text-primary) !important;
}

.fo-wo-completion__subtitle {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--fo-text-secondary, #94a3b8) !important;
}

.fo-wo-completion__close.btn-close {
    margin: 0;
    opacity: 0.85;
}

/* Compact section map (not a multi-page wizard — single scroll form) */
.fo-wo-completion__steps {
    width: 100%;
    margin-top: 0.35rem;
}

.fo-wo-completion__step-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.2;
}

.fo-wo-completion__step {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--fo-border-subtle, rgba(148, 163, 184, 0.22));
    background: var(--fo-surface-muted, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    color: var(--fo-text-secondary) !important;
}

html[data-fo-theme="light"] .fo-wo-completion__step {
    background: var(--fo-neutral-100, #f1f5f9) !important;
    background-color: var(--fo-neutral-100, #f1f5f9) !important;
}

.fo-wo-completion__step-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fo-text-primary) !important;
}

.fo-wo-completion__body.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1rem;
    /* room for sticky footer + keyboard */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

.fo-wo-completion__footer.modal-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 3;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--fo-border-default, var(--fo-border, #334155)) !important;
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.18);
}

html[data-fo-theme="light"] .fo-wo-completion__footer.modal-footer {
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.08);
}

.fo-wo-completion__footer .btn {
    min-height: 2.5rem;
    min-width: 6.5rem;
}

.fo-wo-completion__footer .btn-success {
    min-width: 10rem;
}

/* Summary strip */
.fo-wo-completion__summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--fo-radius-sm, 8px);
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155));
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
}

html[data-fo-theme="light"] .fo-wo-completion__summary {
    background: var(--fo-neutral-100, #f1f5f9) !important;
    background-color: var(--fo-neutral-100, #f1f5f9) !important;
}

.fo-wo-completion__summary-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    font-size: 0.8125rem;
}

.fo-wo-completion__summary-label {
    color: var(--fo-text-secondary) !important;
}

.fo-wo-completion__summary-value {
    color: var(--fo-text-primary) !important;
    font-weight: 600;
    text-align: right;
}

/* Sections */
.fo-wo-completion__section {
    margin-bottom: 1.15rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--fo-border-subtle, rgba(148, 163, 184, 0.18));
}

.fo-wo-completion__section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.fo-wo-completion__section-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fo-text-primary) !important;
}

/* Solid labor / form cards */
.fo-wo-completion__card {
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155)) !important;
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    opacity: 1 !important;
}

html[data-fo-theme="light"] .fo-wo-completion__card {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Solid callouts (no glass over busy content) */
.fo-wo-completion__callout {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

.fo-wo-completion__callout--danger {
    background: #3b1518 !important;
    background-color: #3b1518 !important;
    border-color: #f87171 !important;
    color: #fecaca !important;
}

.fo-wo-completion__callout--warning {
    background: #3d2c0a !important;
    background-color: #3d2c0a !important;
    border-color: #fbbf24 !important;
    color: #fde68a !important;
}

.fo-wo-completion__callout--info {
    background: #0c2a4a !important;
    background-color: #0c2a4a !important;
    border-color: #60a5fa !important;
    color: #bfdbfe !important;
}

html[data-fo-theme="light"] .fo-wo-completion__callout--danger {
    background: #fef2f2 !important;
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #991b1b !important;
}

html[data-fo-theme="light"] .fo-wo-completion__callout--warning {
    background: #fffbeb !important;
    background-color: #fffbeb !important;
    border-color: #d97706 !important;
    color: #92400e !important;
}

html[data-fo-theme="light"] .fo-wo-completion__callout--info {
    background: #eff6ff !important;
    background-color: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1e3a8a !important;
}

.fo-wo-completion__callout-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fo-wo-completion__callout-body {
    margin: 0;
    font-size: 0.8125rem;
}

/* Inputs inside completion — solid, readable */
.fo-wo-completion__surface .form-control,
.fo-wo-completion__surface .form-select {
    min-height: 2.5rem;
    background-color: var(--fo-surface-inset, #0f172a) !important;
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155)) !important;
    color: var(--fo-text-primary, #f1f5f9) !important;
    opacity: 1 !important;
}

html[data-fo-theme="light"] .fo-wo-completion__surface .form-control,
html[data-fo-theme="light"] .fo-wo-completion__surface .form-select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.fo-wo-completion__surface .form-control:focus,
.fo-wo-completion__surface .form-select:focus {
    border-color: var(--fo-border-focus, #93c5fd) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

.fo-wo-completion__surface .form-control:disabled,
.fo-wo-completion__surface .form-select:disabled {
    opacity: 1 !important;
    color: var(--fo-text-secondary) !important;
    background-color: var(--fo-surface-muted, #1e293b) !important;
}

.fo-wo-completion__surface .form-control::placeholder {
    color: var(--fo-text-tertiary, #64748b) !important;
    opacity: 1;
}

/* Nested conflict accept dialog — above completion */
.fo-wo-completion__nested {
    position: fixed;
    inset: 0;
    z-index: 1070;
    isolation: isolate;
}

.fo-wo-completion__nested .fo-wo-completion__backdrop {
    background: rgba(2, 6, 23, 0.55) !important;
    background-color: rgba(2, 6, 23, 0.55) !important;
}

.fo-wo-completion__nested .fo-wo-completion__panel {
    max-width: min(480px, 100%);
}

/* Lock body scroll while open (modern browsers) */
body:has(.fo-wo-completion) {
    overflow: hidden;
}

/* ── Mobile full-screen sheet ─────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .fo-wo-completion__dialog.modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .fo-wo-completion__panel.modal-dialog {
        max-width: 100%;
        width: 100%;
        height: 100vh; /* fallback */
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
    }

    .fo-wo-completion__surface.modal-content,
    .fo-wo-completion__surface {
        height: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none;
    }

    .fo-wo-completion__header.modal-header {
        position: sticky;
        top: 0;
        z-index: 4;
    }

    .fo-wo-completion__footer.modal-footer {
        position: sticky;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 0.5rem;
    }

    .fo-wo-completion__footer .btn {
        width: 100%;
        min-width: 0;
    }

    .fo-wo-completion__body.modal-body {
        /* keyboard: content scrolls; sticky footer stays solid */
        max-height: none;
        padding-bottom: 1.25rem;
    }
}

/* Short landscape phones */
@media (max-width: 767.98px) and (max-height: 480px) {
    .fo-wo-completion__step-list {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fo-wo-completion__backdrop,
    .fo-wo-completion__surface {
        transition: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ── Mobile field stepper solid fallbacks ─────────────────────────────────── */
.fo-m-stepper {
    background: var(--fo-surface-page, var(--fo-bg, #0f172a)) !important;
    background-color: var(--fo-surface-page, var(--fo-bg, #0f172a)) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-m-stepper__header,
.fo-m-stepper__footer {
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    opacity: 1 !important;
}

.fo-m-stepper-backdrop {
    background: rgba(2, 6, 23, 0.72) !important;
    background-color: rgba(2, 6, 23, 0.72) !important;
}

/* ── Command Center light polish (page chrome only) ───────────────────────── */
.wo-cmd-header.kpi-card {
    background: var(--fo-surface-raised, var(--fo-card)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card)) !important;
    opacity: 1 !important;
}

.wo-cmd-pill {
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    border: 1px solid var(--fo-border-subtle, rgba(148, 163, 184, 0.22)) !important;
    color: var(--fo-text-primary) !important;
}

html[data-fo-theme="light"] .wo-cmd-pill {
    background: var(--fo-neutral-100, #f1f5f9) !important;
    background-color: var(--fo-neutral-100, #f1f5f9) !important;
}

.wo-cmd-sticky-action {
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    border-top: 1px solid var(--fo-border-default, var(--fo-border, #334155));
    box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.18);
    opacity: 1 !important;
}

.wo-cmd-sticky-action .btn-success {
    min-height: 2.75rem;
    font-weight: 600;
}

/* Profitability compact strip */
.wo-financial-snapshot__compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
}

@media (min-width: 576px) {
    .wo-financial-snapshot__compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wo-financial-snapshot__metric {
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--fo-border-subtle, rgba(148, 163, 184, 0.22));
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    min-width: 0;
}

html[data-fo-theme="light"] .wo-financial-snapshot__metric {
    background: var(--fo-neutral-50, #f8fafc) !important;
    background-color: var(--fo-neutral-50, #f8fafc) !important;
}

.wo-financial-snapshot__metric-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fo-text-secondary) !important;
    margin-bottom: 0.15rem;
}

.wo-financial-snapshot__metric-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fo-text-primary) !important;
    overflow-wrap: anywhere;
}

.wo-financial-snapshot__metric-value--neg {
    color: var(--fo-danger-text, #fca5a5) !important;
}

.wo-financial-snapshot__metric-value--neg::before {
    content: "▼ ";
    font-size: 0.7em;
    speak: never;
}

.wo-financial-snapshot__bar {
    display: flex;
    height: 0.45rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--fo-surface-muted, #1e293b) !important;
    margin: 0.35rem 0 0.85rem;
}

.wo-financial-snapshot__bar-seg {
    height: 100%;
    min-width: 0;
}

.wo-financial-snapshot__bar-seg--revenue {
    background: #3b82f6;
}

.wo-financial-snapshot__bar-seg--cost {
    background: #f59e0b;
}

.wo-financial-snapshot__bar-seg--profit {
    background: #22c55e;
}

.wo-financial-snapshot__bar-seg--loss {
    background: #ef4444;
}

.wo-financial-snapshot__bar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    font-size: 0.75rem;
    color: var(--fo-text-secondary);
    margin-bottom: 0.75rem;
}

.wo-financial-snapshot__dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 63A — Work Order dialog design language
   Shared by completion, receipts, drawers, and Command Center panels.
   Only backdrops may be translucent. All content surfaces are solid.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Unified aliases: treat FO WO modal shell as the dialog standard */
.fo-wo-dialog,
.fo-wo-completion {
    /* root only */
}

.fo-wo-card.fo-os-card,
.fo-wo-completion .fo-os-card,
.fo-wo-completion .fo-wo-card {
    margin-bottom: 0.85rem;
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155)) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-wo-card:last-child {
    margin-bottom: 0;
}

.fo-wo-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
}

.fo-wo-card__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    color: var(--fo-text-primary) !important;
    font-size: 1.05rem;
}

.fo-wo-card__titles {
    flex: 1 1 auto;
    min-width: 0;
}

.fo-wo-card__help {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--fo-text-secondary, #94a3b8) !important;
}

.fo-wo-card__actions {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Hero summary */
.fo-wo-summary-hero {
    margin-bottom: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: var(--fo-radius-md, 10px);
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155));
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    opacity: 1 !important;
}

html[data-fo-theme="light"] .fo-wo-summary-hero {
    background: var(--fo-neutral-100, #f1f5f9) !important;
    background-color: var(--fo-neutral-100, #f1f5f9) !important;
}

.fo-wo-summary-hero__title {
    margin: 0 0 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fo-text-secondary) !important;
}

.fo-wo-summary-hero__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.75rem;
}

@media (min-width: 576px) {
    .fo-wo-summary-hero__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.fo-wo-summary-hero__item {
    min-width: 0;
}

.fo-wo-summary-hero__label {
    display: block;
    font-size: 0.7rem;
    color: var(--fo-text-secondary) !important;
    margin-bottom: 0.1rem;
}

.fo-wo-summary-hero__value {
    display: block;
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--fo-text-primary) !important;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.fo-wo-summary-hero__value--loss {
    color: var(--fo-danger-text, #fca5a5) !important;
}

/* Outstanding actionable rows */
.fo-wo-outstanding {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fo-wo-outstanding__row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155));
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    opacity: 1 !important;
}

.fo-wo-outstanding__icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--fo-warning-text, #fbbf24);
}

.fo-wo-outstanding__body {
    flex: 1 1 auto;
    min-width: 0;
}

.fo-wo-outstanding__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--fo-text-primary) !important;
}

.fo-wo-outstanding__detail {
    margin: 0.1rem 0 0;
    font-size: 0.78rem;
    color: var(--fo-text-secondary) !important;
    overflow-wrap: anywhere;
}

.fo-wo-outstanding__action {
    flex-shrink: 0;
}

.fo-wo-outstanding--empty {
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--fo-border-subtle, rgba(148, 163, 184, 0.22));
    background: var(--fo-success-bg, rgba(16, 185, 129, 0.12)) !important;
    color: var(--fo-success-text, #6ee7b7) !important;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Checklist rows — large touch targets */
.fo-wo-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fo-wo-checklist__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--fo-border-subtle, rgba(148, 163, 184, 0.22));
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
}

html[data-fo-theme="light"] .fo-wo-checklist__row {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.fo-wo-checklist__mark {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0.05rem;
    border-radius: 0.35rem;
    border: 2px solid var(--fo-border-strong, #64748b);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: transparent;
    background: var(--fo-surface-raised, var(--fo-card)) !important;
}

.fo-wo-checklist__row.is-done .fo-wo-checklist__mark {
    border-color: var(--fo-success-fg-strong, #34d399);
    background: var(--fo-success-bg, rgba(16, 185, 129, 0.18)) !important;
    color: var(--fo-success-fg-strong, #34d399) !important;
}

.fo-wo-checklist__row.is-blocked .fo-wo-checklist__mark {
    border-color: var(--fo-warning-fg-strong, #f59e0b);
}

.fo-wo-checklist__label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fo-text-primary) !important;
}

.fo-wo-checklist__hint {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--fo-text-secondary) !important;
}

/* Solid notes field */
.fo-wo-notes {
    width: 100%;
    min-height: 6rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155)) !important;
    background: var(--fo-surface-inset, #0f172a) !important;
    background-color: var(--fo-surface-inset, #0f172a) !important;
    color: var(--fo-text-primary, #f1f5f9) !important;
    font-size: 0.9375rem;
    line-height: 1.45;
    resize: vertical;
    opacity: 1 !important;
}

html[data-fo-theme="light"] .fo-wo-notes {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

.fo-wo-notes::placeholder {
    color: var(--fo-text-tertiary, #64748b) !important;
    opacity: 1;
}

.fo-wo-notes:focus {
    outline: none;
    border-color: var(--fo-border-focus, #93c5fd) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.fo-wo-notes:disabled {
    opacity: 1 !important;
    color: var(--fo-text-secondary) !important;
}

/* Finish line confirmation */
.fo-wo-finish {
    text-align: center;
    padding: 1.25rem 1rem;
    border-radius: var(--fo-radius-md, 10px);
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155));
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    opacity: 1 !important;
}

html[data-fo-theme="light"] .fo-wo-finish {
    background: var(--fo-neutral-50, #f8fafc) !important;
    background-color: var(--fo-neutral-50, #f8fafc) !important;
}

.fo-wo-finish__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0.65rem;
    border-radius: 999px;
    background: var(--fo-success-bg, rgba(16, 185, 129, 0.16)) !important;
    color: var(--fo-success-fg-strong, #34d399) !important;
    font-size: 1.35rem;
}

.fo-wo-finish__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 750;
    color: var(--fo-text-primary) !important;
}

.fo-wo-finish__subtitle {
    margin: 0.35rem 0 0.85rem;
    font-size: 0.9rem;
    color: var(--fo-text-secondary) !important;
}

.fo-wo-finish .fo-btn {
    min-height: 2.75rem;
    min-width: min(16rem, 100%);
}

.fo-wo-finish--blocked .fo-wo-finish__mark {
    background: var(--fo-warning-bg, rgba(245, 158, 11, 0.14)) !important;
    color: var(--fo-warning-fg-strong, #f59e0b) !important;
}

/* Footer button hierarchy inside FO WO footer */
.fo-wo-completion__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.fo-wo-completion__footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
    align-items: center;
}

.fo-wo-completion__footer .fo-btn,
.fo-wo-completion__footer .btn {
    min-height: 2.5rem;
}

.fo-wo-completion__footer .fo-btn--success,
.fo-wo-completion__footer .btn-success {
    min-width: 10rem;
    font-weight: 650;
}

.fo-wo-completion__disabled-reason {
    width: 100%;
    order: 3;
    margin: 0;
    font-size: 0.75rem;
    color: var(--fo-text-secondary) !important;
    text-align: right;
}

/* Generic FO modal shell for receipts & other WO dialogs */
.fo-wo-dialog-root {
    position: fixed;
    inset: 0;
    z-index: 1080;
    isolation: isolate;
}

.fo-wo-dialog-root .fo-wo-completion__dialog {
    padding: 0.75rem;
}

.fo-wo-dialog-root .modal-content.fo-wo-completion__surface,
.fo-wo-dialog-root .fo-wo-completion__surface {
    max-height: min(90vh, 90dvh);
}

/* Command Center panel surface consistency */
.wo-cmd-section-panel .kpi-card,
.wo-cmd-section-panel .fo-os-card,
.wo-cmd-section-panel .fo-card {
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

.wo-closeout-panel {
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    border: 1px solid var(--fo-border-default, var(--fo-border, #334155));
    border-radius: var(--fo-radius-md, 10px);
    padding: 1rem 1.1rem;
    opacity: 1 !important;
}

.wo-closeout-panel .list-group-item {
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    color: var(--fo-text-primary) !important;
    border-color: var(--fo-border-subtle, rgba(148, 163, 184, 0.22)) !important;
}

@media (max-width: 767.98px) {
    .fo-wo-card__head {
        flex-wrap: wrap;
    }

    .fo-wo-card__actions {
        width: 100%;
        margin-left: 0;
        margin-top: 0.35rem;
    }

    .fo-wo-outstanding__row {
        flex-wrap: wrap;
    }

    .fo-wo-outstanding__action {
        width: 100%;
    }

    .fo-wo-outstanding__action .fo-btn {
        width: 100%;
    }
}