/* Friendly Operational: presentation adapters, not a layout framework.
   Loaded after page styles. Depth geometry/colours and conditional visibility
   remain owned by their existing component styles. */
:root {
    --color-canvas: #f4f6f8;
    --color-surface: #ffffff;
    --color-surface-muted: #edf1f5;
    --color-text: #263244;
    --color-text-muted: #526174;
    --color-brand: #2457b2;
    --color-brand-hover: #19438f;
    --color-brand-soft: #eaf0fc;
    --color-border: #d4dce5;
    --color-control-border: #7a8798;
    --color-success: #216343;
    --color-success-soft: #e4f3e9;
    --color-warning: #754b08;
    --color-warning-soft: #fff2d5;
    --color-danger: #a52a25;
    --color-danger-soft: #fcebe9;
    --color-offline: #62428b;
    --color-pending: #754b08;
    --color-focus: #ffcf4a;
    --color-focus-edge: #263244;
    --color-action-explore: #e7ddfa;
    --color-action-explore-ink: #503178;
    --color-action-map: #f5cf67;
    --radius-control: 8px;
    --radius-panel: 12px;
    --radius-feature: 16px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --control-height-office: 38px;
    --control-height-field: 48px;
    --font-product: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* Existing Field token contracts. No engineering-specific overrides. */
    --fo-font-ui: var(--font-product);
    --fo-brand-primary: var(--color-brand);
    --fo-brand-deep: var(--color-brand-hover);
    --fo-brand-soft: var(--color-brand-soft);
    --fo-slate-900: var(--color-text);
    --fo-slate-700: var(--color-text-muted);
    --fo-slate-600: var(--color-text-muted);
    --fo-slate-200: var(--color-border);
    --fo-slate-100: var(--color-surface-muted);
    --fo-slate-50: var(--color-canvas);
    --fo-surface: var(--color-surface);
    --fo-success-700: var(--color-success);
    --fo-success-100: var(--color-success-soft);
    --fo-warning-800: var(--color-warning);
    --fo-warning-100: var(--color-warning-soft);
    --fo-danger-700: var(--color-danger);
    --fo-danger-100: var(--color-danger-soft);
    --fo-focus: var(--color-focus);
}
body.office-app, body.mobile-app, body.login-app {
    background: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-product);
}

/* Genuine organisational logo, separately configurable product name. */
.product-brand { display: flex; align-items: center; gap: .625rem; }
.product-brand img.product-brand__mark { width: 32px; height: auto; flex: 0 0 32px; }
.product-brand__slash { color: #7386a3; font-weight: 400; }
.product-brand__divider { height: 26px; width: 1px; background: var(--color-border); }
.product-brand__name { color: #275CAE; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; }
.product-header__department { color: var(--color-text-muted); font-size: 0.875rem; border-left: 1px solid var(--color-border); padding-left: .75rem; }
.product-header__actions { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.product-signout { margin: 0; }
.mobile-tools-menu__panel .product-signout { margin-top: .35rem; padding-top: .35rem; border-top: 1px solid var(--color-border); }
.product-signout__button { min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: white; color: var(--color-text-muted); font: inherit; font-size: .875rem; cursor: pointer; }
.product-signout__button:hover { color: var(--color-brand-hover); background: var(--color-surface-muted); }
.product-signout__button:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.product-signout-dialog { width: min(calc(100% - 2rem), 28rem); padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-panel); color: var(--color-text); }
.product-signout-dialog::backdrop { background: rgb(38 50 68 / 35%); }
.product-signout-dialog h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
.product-signout-dialog p { line-height: 1.5; }
.product-signout-dialog .product-header__actions { justify-content: flex-end; }
.product-signout-note { margin: 1rem; color: var(--color-text-muted); font-size: .875rem; }
.mobile-brand__name { color: var(--color-brand); font-size: 1.375rem; font-weight: 600; }
@media (min-width: 1024px) {
    .product-brand__name, .mobile-brand__name { font-size: 1.5rem; }
}
.maker-footer { padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); color: #595c61; font: 400 0.875rem/1.6 var(--font-product); text-align: center; }
.maker-footer__name { display: block; }
.maker-footer__name { font-weight: 600; }

/* Office density: keep the blue feature and the white working surface. */
.office-app .content-card { margin-top: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-feature); box-shadow: none; }
.office-app .btn { min-height: var(--control-height-office); padding: 8px 14px; border-radius: var(--radius-control); font-size: 0.875rem; font-weight: 500; line-height: 1.4; }
.office-app .btn-primary, .office-app .btn-save, .login-app .btn-login { background: var(--color-brand); border-color: var(--color-brand); color: white; }
.office-app .btn-primary:hover, .office-app .btn-save:hover, .login-app .btn-login:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.office-app .btn-back, .office-app .btn-add { color: var(--color-brand-hover); }
.office-app .btn-outline-primary { color: var(--color-brand); border-color: var(--color-brand); }
.office-app .btn-outline-primary:hover { color: white; background: var(--color-brand); }
.office-app .form-control, .office-app .form-select, .office-app #tableFilter { min-height: var(--control-height-office); padding: 7px 12px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); background-color: white; color: var(--color-text); font-size: 0.9375rem; line-height: 1.5; }
.office-app .form-select { padding-right: 2.25rem; }
.office-app .form-label { font-weight: 500; }
.office-app .table thead th { padding: 12px; background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 600; text-transform: none; }
.office-app .table tbody td { padding: 14px 12px; border-color: var(--color-border); font-size: 0.9375rem; }
.office-app .table strong { font-weight: 600; }
.office-app .client-name, .office-app .empty-state { color: var(--color-text-muted); }
.office-app .job-ref { color: var(--color-brand-hover); font-weight: 600; }
.office-app .status-badge { display: inline-block; padding: 5px 12px; font-weight: 500; }
.office-app .status-active { color: var(--color-success); background: var(--color-success-soft); }
.office-app .status-cancelled { color: var(--color-danger); background: var(--color-danger-soft); }
.job-management__actions { flex-wrap: wrap; align-items: center; }
.job-management__actions .btn { white-space: nowrap; }
.job-management__actions .job-action--field { background: white; border-color: white; color: var(--color-brand-hover); font-weight: 600; }
.job-management__actions .job-action--field:hover { background: var(--color-brand-soft); }
.job-management__actions .job-action--explore { background: var(--color-action-explore); border-color: var(--color-action-explore); color: var(--color-action-explore-ink); }
.job-management__actions .job-action--explore:hover { background: #d8c8f4; border-color: #d8c8f4; }
.job-management__actions .job-action--ground { background: var(--color-brand-soft); border-color: var(--color-brand-soft); color: var(--color-brand-hover); }
.job-management__actions .job-action--ground:hover { background: white; border-color: white; }
.job-management__actions .btn-map { background: var(--color-action-map); color: var(--color-text); }
.job-management__actions .btn-map:hover { background: #f0c047; }
.job-management__actions .btn-add { background: transparent; color: white; border: 1px solid #bdcdee; }
.job-management__actions .btn-add:hover { background: var(--color-brand-hover); }
.job-management .sort-indicator { display: inline-block; font-size: 0.625rem; letter-spacing: -0.15em; white-space: nowrap; }
.site-explorer__filters { margin-inline: 0; padding: 4px 12px 20px; border-radius: var(--radius-panel); background: white; border: 1px solid var(--color-border); }
.site-explorer .card { border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
.site-explorer .card-header { padding: 12px 16px; background: var(--color-surface-muted) !important; color: var(--color-text) !important; border-color: var(--color-border); font-weight: 600; border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
.site-explorer .card-body { padding: var(--space-4); }
.site-explorer .card-body strong { font-weight: 500; }

/* Select2 retains its existing positioning and z-index. */
.office-app .select2-container--default .select2-selection--single { height: var(--control-height-office); border: 1px solid var(--color-control-border); border-radius: var(--radius-control); }
.office-app .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 12px; line-height: 36px; color: var(--color-text); }
.office-app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
:is(.office-app, .mobile-app) .select2-dropdown { border-color: var(--color-control-border); font-family: var(--font-product); }
:is(.office-app, .mobile-app) .select2-container--default .select2-results__option--highlighted[aria-selected] { color: white; background: var(--color-brand); }
:is(.office-app, .mobile-app) .select2-container--default .select2-selection__placeholder { color: var(--color-text-muted); }

/* Field adapters: no field order, grid/guide geometry or visibility changes. */
.ff-surface { --ff-border-strong: var(--color-control-border); --maint-border-strong: var(--color-control-border); }
.ff-workspace-shell, .ff-mode-dialog, .preinstall-type { --ff-border-strong: var(--color-control-border); }
.ff-surface .ff-field > label, .ff-surface .ff-field > legend,
.ff-surface .field-group > label, .ff-surface .field-group > legend { font-weight: 500; }
.ff-surface .ff-page-header h1 { font-weight: 600; }
.ff-surface .ff-section > summary h2, .ff-surface .calibration-pair__heading h3 { font-weight: 600; }
.ff-surface .ff-button, .ff-surface .button { min-height: var(--control-height-field); border-radius: var(--radius-control); font-weight: 500; }
.ff-surface .button--primary { background: var(--color-brand); border-color: var(--color-brand); color: white; font-weight: 600; }
.ff-surface .button--primary:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.ff-surface .button--secondary { border-color: var(--color-control-border); color: var(--color-brand-hover); background: white; }
.ff-surface .button--quiet { color: var(--color-text-muted); }
.ff-surface .unit-input > span { border-color: var(--color-control-border); background: var(--color-surface-muted); color: var(--color-text-muted); font-weight: 500; }
.ff-surface .ff-segmented { border-radius: var(--radius-control); }
.ff-surface .ff-segmented span { font-weight: 500; }
.ff-surface .ff-segmented input:checked + span { font-weight: 600; }
.ff-surface .ff-form input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
.ff-surface .ff-form select, .ff-surface .ff-form textarea,
.ff-surface .ff-form .select2-container .select2-selection { border-color: var(--color-control-border); }
.ff-surface :is(input, select, textarea):disabled,
.office-app :is(input, select, textarea):disabled,
:is(.office-app, .mobile-app) .select2-container--disabled .select2-selection { background-color: var(--color-surface-muted); color: var(--color-text-muted); opacity: 1; }
.office-app :is(input, textarea)::placeholder { color: var(--color-text-muted); }

/* Dark keyline + yellow ring remains visible on white and coloured surfaces. */
:is(.office-app, .mobile-app, .login-app) :is(a, button, input, select, textarea, summary):focus-visible,
:is(.office-app, .mobile-app) .select2-container--focus .select2-selection { outline: 3px solid var(--color-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--color-focus-edge); }
.ff-surface .ff-segmented input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: -5px; box-shadow: inset 0 0 0 2px var(--color-focus-edge); }

/* Opaque login, independent of decorative images and remote fonts. */
body.login-app { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
.login-app .login-main { flex: 1; display: grid; place-items: center; padding: 3rem 1.25rem 1.5rem; }
.login-app .login-card { width: 100%; max-width: 420px; padding: var(--space-8); background: white; border: 1px solid var(--color-border); border-top: 5px solid var(--color-brand); border-radius: var(--radius-feature); box-shadow: 0 4px 16px rgb(38 50 68 / 5%); }
.login-app .login-wordmark { color: var(--color-brand); font-size: 2rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; text-align: left; margin: 0 0 0.5rem; }
.login-app .login-identity { display: flex; align-items: center; gap: .625rem; margin-bottom: .5rem; --color-brand: #275CAE; }
.login-app .login-identity img { width: 36px; height: auto; flex: 0 0 36px; }
.login-app .login-identity .login-wordmark { margin: 0; }
.login-app .login-subtitle { color: var(--color-text); font-size: 1.1875rem; line-height: 1.4; font-weight: 500; text-align: left; margin: 0 0 1.5rem; }
.login-app label { display: block; margin-bottom: 6px; font-weight: 500; }
.login-app input { width: 100%; min-height: 48px; border: 1px solid var(--color-control-border); border-radius: var(--radius-control); padding: 10px 12px; font: inherit; }
.login-app .btn-login { width: 100%; min-height: 48px; border-radius: var(--radius-control); font-weight: 600; }
.login-app .footer-text { margin-top: 1.5rem; color: var(--color-text-muted); font-size: 0.875rem; }
.login-app .errorlist { padding-left: 1.25rem; color: var(--color-danger); }
@media (max-width: 620px) {
    .product-header__department { font-size: 0.8125rem; }
    .product-brand { gap: var(--space-3); }
    .product-brand img { width: 108px; }
    /* Clear the existing fixed Installation action area at the page bottom. */
    .mobile-app:has(.install-page) .maker-footer { padding-bottom: calc(8rem + env(safe-area-inset-bottom)); }
}

/* One desktop working sheet for all four Site Checks modes. Narrow layouts,
   specialist measurement geometry and the mobile Save bar remain unchanged. */
@media (min-width: 1024px) {
    .mobile-main > .ff-surface:is(.install-page, .maintenance-page) {
        width: min(calc(100% - 3rem), 64rem);
        margin: 1.5rem auto 0;
        padding: 1.75rem clamp(1.5rem, 3vw, 2.5rem) 2rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-feature);
        background: var(--color-surface);
        box-shadow: 0 2px 8px rgb(38 50 68 / 3%);
        /* Do not clip dropdowns, focus rings or existing sticky descendants. */
        overflow: visible;
    }

    .mobile-main > .ff-surface:is(.install-page, .maintenance-page) .ff-section {
        overflow: visible;
    }

    .mobile-main > .ff-surface:is(.install-page, .maintenance-page) .ff-section + .ff-section {
        border-top: 1px solid var(--color-border);
    }

    /* Release only broad content containers from legacy form measures.
       Do not change shared measure tokens: Depth, velocity and map sizing
       must retain their own established geometry. */
    .mobile-main > .ff-surface:is(.install-page, .maintenance-page) :is(
        .ff-workspace-shell__modes .ff-work-types,
        .ff-context__fields,
        .site-briefing,
        .outcome-groups,
        .equipment-essentials,
        .ff-comments,
        .ff-savebar,
        .install-context-composition,
        .known-site
    ) {
        max-width: none;
    }

    /* Keep the time/Now control compact inside the broader paired row. */
    .mobile-main > .maintenance-page .equipment-essentials .field-group--time {
        max-width: 23rem;
    }
}