/**
 * Solid Field mobile surfaces.
 *
 * Global app.css scopes transparent page shells (not every div) with:
 *   body:not(:has(.fo-field-shell)) :is(main, .content, .page, .page-content, .content-wrapper)
 * so Field pages are exempt from the force-transparent reset entirely.
 * These rules still paint operational Field surfaces solid for light/dark tokens
 * and defeat any residual glass effects from field-overhaul packs.
 */

.fo-field-shell,
.fo-field-shell.fo-field-shell--simple,
.fo-field-shell.fo-field-shell--standalone {
    background: var(--fo-bg, #0f172a) !important;
    background-color: var(--fo-bg, #0f172a) !important;
    color: var(--fo-text, var(--fo-text-primary, #f1f5f9)) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-field-surface,
.fo-field-topbar,
.fo-field-main,
.fo-field-reconnect,
.fo-field-loading,
.fo-field-error-banner {
    background: var(--fo-bg, #0f172a) !important;
    background-color: var(--fo-bg, #0f172a) !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-field-topbar {
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    border-bottom-color: var(--fo-border, rgba(255, 255, 255, 0.1)) !important;
}

.fo-field-card,
.fo-field-home-clock-card,
.fo-field-progress-strip,
.fo-field-hero-job,
.fo-field-stat-card,
.fo-field-clock-status,
.fo-field-current-job,
.fo-field-assignment,
.fo-mx-route-card,
.fo-mx-today-card,
.fo-mx-kpi,
.fo-mx-clock,
.fo-mx-details,
.fo-field-action-panel,
.fo-field-drawer,
.fo-field-drawer__header,
.fo-field-drawer__body,
.fo-field-drawer__footer,
.fo-field-drawer-header,
.fo-field-drawer-body,
.fo-field-drawer-footer,
.fo-field-skeleton-card,
.fo-field-empty,
.fo-empty-state.fo-field-empty,
.fo-field-crew-panel,
.fo-field-receipt-panel,
.fo-field-photo-panel,
.fo-field-workflow-cta,
.fo-field-home-active-job {
    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;
    -webkit-backdrop-filter: none !important;
    color: var(--fo-text, var(--fo-text-primary, #f1f5f9)) !important;
}

/* Status accents stay solid (not glass) */
.fo-field-clock-status--in,
.fo-field-home-clock-card--in {
    background: color-mix(in srgb, var(--fo-success, #22c55e) 18%, var(--fo-surface-raised, var(--fo-card, #1e293b))) !important;
    background-color: color-mix(in srgb, var(--fo-success, #22c55e) 18%, var(--fo-surface-raised, var(--fo-card, #1e293b))) !important;
}

.fo-field-tabbar,
.fo-field-sticky-actions {
    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;
    -webkit-backdrop-filter: none !important;
    border-top: 1px solid var(--fo-border, rgba(255, 255, 255, 0.1));
}

.fo-field-action-btn,
.fo-field-btn-xxl,
.fo-field-btn-lg,
.fo-field-btn-hero,
.fo-field-clock-actions .fo-btn {
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-field-shell input,
.fo-field-shell select,
.fo-field-shell textarea,
.fo-field-shell .form-control,
.fo-field-shell .form-select {
    background: var(--fo-input-bg, var(--fo-bg, #0f172a)) !important;
    background-color: var(--fo-input-bg, var(--fo-bg, #0f172a)) !important;
    color: var(--fo-text, var(--fo-text-primary, #f1f5f9)) !important;
    opacity: 1 !important;
}

/* Tab buttons intentionally transparent chrome over solid tabbar */
.fo-field-tab {
    background: transparent !important;
    background-color: transparent !important;
}

.fo-field-tab--active {
    background: rgba(59, 130, 246, 0.16) !important;
    background-color: rgba(59, 130, 246, 0.16) !important;
}

/* Legacy CrewHome page cards if still rendered */
.cd-shell,
.cd-job-card,
.cd-perf-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;
    -webkit-backdrop-filter: none !important;
}

/* Light theme tokens: still solid, not transparent */
html[data-theme="light"] .fo-field-shell,
html.theme-light .fo-field-shell,
body.theme-light .fo-field-shell {
    background: var(--fo-bg, #f8fafc) !important;
    background-color: var(--fo-bg, #f8fafc) !important;
    color: var(--fo-text, #0f172a) !important;
}

html[data-theme="light"] .fo-field-card,
html[data-theme="light"] .fo-field-home-clock-card,
html[data-theme="light"] .fo-field-assignment,
html[data-theme="light"] .fo-field-tabbar,
html[data-theme="light"] .fo-field-sticky-actions,
html[data-theme="light"] .fo-field-drawer,
html.theme-light .fo-field-card,
html.theme-light .fo-field-home-clock-card,
html.theme-light .fo-field-assignment,
html.theme-light .fo-field-tabbar,
html.theme-light .fo-field-sticky-actions,
html.theme-light .fo-field-drawer,
body.theme-light .fo-field-card,
body.theme-light .fo-field-home-clock-card,
body.theme-light .fo-field-assignment,
body.theme-light .fo-field-tabbar,
body.theme-light .fo-field-sticky-actions,
body.theme-light .fo-field-drawer {
    background: var(--fo-surface-raised, var(--fo-card, #ffffff)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #ffffff)) !important;
    color: var(--fo-text, #0f172a) !important;
}