/**
 * Phase 61F.2 — FieldOps Operating System layout primitives.
 * Complements fieldops-design-system.css. No routing / scheduling behavior.
 */

/* Theme-aware shell surfaces */
html[data-fo-theme="light"] {
    color-scheme: light;
}

html[data-fo-theme="dark"] {
    color-scheme: dark;
}

/* Light is the product default until an explicit dark preference is applied.
   Full control/surface tokens live in light-surface-consistency.css on html. */
html:not([data-fo-theme]),
html[data-fo-theme="light"] {
    color-scheme: light;
}

html[data-fo-theme="light"] body,
html[data-fo-theme="light"] .fieldops-shell,
html:not([data-fo-theme]) body,
html:not([data-fo-theme]) .fieldops-shell {
    --fo-bg: var(--fo-neutral-50, #f8fafc);
    --fo-bg-alt: var(--fo-neutral-100, #f1f5f9);
    --fo-card: #ffffff;
    --fo-card-hover: var(--fo-neutral-50, #f8fafc);
    --fo-border: var(--fo-neutral-200, #e2e8f0);
    --fo-border-hover: var(--fo-neutral-300, #cbd5e1);
    --fo-text-primary: var(--fo-neutral-900, #0f172a);
    --fo-text-secondary: var(--fo-neutral-700, #334155);
    --fo-text-tertiary: var(--fo-neutral-500, #64748b);
    --fo-surface-primary: #ffffff;
    --fo-surface-secondary: var(--fo-neutral-100, #f1f5f9);
    --fo-surface-raised: #ffffff;
    --fo-control-bg: #ffffff;
    --fo-control-text: #0f172a;
}

html[data-fo-theme="light"] .fieldops-topbar,
html[data-fo-theme="light"] .main-sidebar,
html:not([data-fo-theme]) .fieldops-topbar,
html:not([data-fo-theme]) .main-sidebar {
    background: var(--fo-card) !important;
    border-color: var(--fo-border) !important;
    color: var(--fo-text-primary);
}

html[data-fo-theme="light"] .workspace-nav-link {
    color: var(--fo-text-secondary);
}

html[data-fo-theme="light"] .workspace-nav-link:hover {
    color: var(--fo-text-primary);
    background: var(--fo-surface-hover);
}

html[data-fo-theme="light"] .workspace-nav-link--active,
html[data-fo-theme="light"] .workspace-nav-link.active {
    color: var(--fo-brand-700);
    background: var(--fo-surface-selected);
    border-left-color: var(--fo-brand-500);
}

/* Content area workspace transitions */
.content-area {
    animation: fo-workspace-enter var(--fo-duration-normal) var(--fo-ease-standard);
}

@keyframes fo-workspace-enter {
    from { opacity: 0.86; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .content-area {
        animation: none;
    }
}

/* Page header */
.fo-page-header-block {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fo-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--fo-space-lg);
}

.fo-page-header-block__copy {
    min-width: 0;
    flex: 1 1 16rem;
}

.fo-page-header-block__title {
    margin: 0;
    font-size: var(--fo-type-page-title);
    font-weight: var(--fo-font-weight-semibold);
    color: var(--fo-text-primary);
    line-height: 1.25;
    display: flex;
    align-items: center;
    gap: var(--fo-space-sm);
}

.fo-page-header-block__subtitle {
    margin: 0.35rem 0 0;
    font-size: var(--fo-type-compact);
    color: var(--fo-text-tertiary);
    max-width: 42rem;
}

.fo-page-header-block__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-sm);
    align-items: center;
}

.fo-page-header-block__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fo-type-caption);
    color: var(--fo-text-tertiary);
    margin-bottom: 0.35rem;
}

.fo-page-header-block__crumbs a {
    color: var(--fo-text-secondary);
    text-decoration: none;
}

.fo-page-header-block__crumbs a:hover {
    color: var(--fo-accent-text);
}

/* Workspace hero summary */
.fo-workspace-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fo-space-md);
    margin: 0 var(--fo-space-lg) var(--fo-space-md);
    padding: var(--fo-space-md) var(--fo-space-lg);
    border: 1px solid var(--fo-border-default);
    border-radius: var(--fo-radius-md);
    background: var(--fo-surface-raised);
    box-shadow: var(--fo-shadow-subtle);
}

.fo-workspace-hero__statement {
    margin: 0;
    font-size: var(--fo-type-body);
    font-weight: var(--fo-font-weight-semibold);
    color: var(--fo-text-primary);
}

.fo-workspace-hero__support {
    margin: 0.25rem 0 0;
    font-size: var(--fo-type-compact);
    color: var(--fo-text-tertiary);
}

.fo-workspace-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-sm);
}

/* Action / toolbar bars */
.fo-action-bar,
.fo-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fo-space-sm);
    padding: var(--fo-space-sm) var(--fo-space-lg);
    border-bottom: 1px solid var(--fo-border-subtle);
    background: var(--fo-surface-muted);
}

.fo-action-bar__actions,
.fo-toolbar__actions,
.fo-action-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-sm);
    align-items: center;
}

.fo-toolbar__meta {
    font-size: var(--fo-type-caption);
    color: var(--fo-text-tertiary);
}

/* Section */
.fo-section {
    margin-bottom: var(--fo-space-xl);
}

.fo-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--fo-space-md);
    margin-bottom: var(--fo-space-md);
    flex-wrap: wrap;
}

.fo-section__title {
    margin: 0;
    font-size: var(--fo-type-section);
    font-weight: var(--fo-font-weight-semibold);
    color: var(--fo-text-primary);
}

.fo-section__description {
    margin: 0.2rem 0 0;
    font-size: var(--fo-type-compact);
    color: var(--fo-text-tertiary);
}

/* Cards — solid surfaces defeat app.css `div { background: transparent !important }` */
.fo-os-card {
    border: 1px solid var(--fo-border-default, var(--fo-border));
    border-radius: var(--fo-radius-md, 10px);
    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) !important;
    overflow: hidden;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-os-card--interactive {
    cursor: pointer;
    transition: border-color var(--fo-duration-fast) var(--fo-ease-standard),
                background var(--fo-duration-fast) var(--fo-ease-standard);
}

.fo-os-card--interactive:hover {
    border-color: var(--fo-border-strong);
    background: var(--fo-surface-hover);
}

.fo-os-card--selected {
    border-color: var(--fo-border-selected);
    background: var(--fo-surface-selected);
}

.fo-os-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fo-space-md);
    padding: var(--fo-space-md) var(--fo-space-lg);
    border-bottom: 1px solid var(--fo-border-subtle);
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
}

.fo-os-card__title {
    margin: 0;
    font-size: var(--fo-type-card-title, 0.95rem);
    font-weight: var(--fo-font-weight-semibold, 600);
    color: var(--fo-text-primary) !important;
}

.fo-os-card__body {
    padding: var(--fo-space-md) var(--fo-space-lg);
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
}

.fo-os-card__footer {
    padding: var(--fo-space-sm) var(--fo-space-lg);
    border-top: 1px solid var(--fo-border-subtle);
    background: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    background-color: var(--fo-surface-secondary, var(--fo-bg-alt, #172033)) !important;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-sm);
}

/* Metric grid */
.fo-metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--fo-space-sm);
}

.fo-metric {
    padding: var(--fo-space-sm) var(--fo-space-md);
    border-radius: var(--fo-radius-sm);
    border: 1px solid var(--fo-border-subtle);
    background: var(--fo-surface-inset);
    min-width: 0;
}

.fo-metric--urgent {
    background: var(--fo-warning-bg);
    border-color: var(--fo-warning-border);
}

.fo-metric__label {
    font-size: var(--fo-type-label);
    color: var(--fo-text-tertiary);
    font-weight: var(--fo-font-weight-semibold);
}

.fo-metric__value {
    font-size: var(--fo-type-metric);
    font-weight: var(--fo-font-weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--fo-text-primary);
    line-height: 1.15;
}

.fo-metric__note {
    font-size: var(--fo-type-caption);
    color: var(--fo-text-tertiary);
}

/* Split layout */
.fo-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: var(--fo-space-lg);
    min-height: 0;
    align-items: start;
}

.fo-split--list-detail {
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
}

.fo-split__primary,
.fo-split__secondary {
    min-width: 0;
}

@media (max-width: 900px) {
    .fo-split,
    .fo-split--list-detail {
        grid-template-columns: 1fr;
    }
}

/* Drawer */
.fo-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--fo-z-panel) - 1);
    background: var(--fo-surface-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fo-duration-normal) var(--fo-ease-standard);
}

.fo-drawer-backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

.fo-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--fo-z-panel);
    display: flex;
    flex-direction: column;
    width: min(28rem, 100vw);
    height: 100vh;
    max-height: 100dvh;
    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) !important;
    border-left: 1px solid var(--fo-border-default);
    box-shadow: var(--fo-shadow-overlay);
    transform: translateX(100%);
    transition: transform var(--fo-duration-normal) var(--fo-ease-standard);
    outline: none;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fo-drawer--sm { width: min(22rem, 100vw); }
.fo-drawer--md { width: min(28rem, 100vw); }
.fo-drawer--lg { width: min(36rem, 100vw); }
.fo-drawer--xl { width: min(44rem, 100vw); }

.fo-drawer--open {
    transform: translateX(0);
}

.fo-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fo-space-md);
    padding: var(--fo-space-md) var(--fo-space-lg);
    padding-top: calc(var(--fo-space-md) + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--fo-border-default);
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    flex-shrink: 0;
}

.fo-drawer__title {
    margin: 0;
    font-size: var(--fo-type-section);
    font-weight: var(--fo-font-weight-semibold);
}

.fo-drawer__subtitle {
    margin: 0.2rem 0 0;
    font-size: var(--fo-type-caption);
    color: var(--fo-text-tertiary);
}

.fo-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--fo-space-md) var(--fo-space-lg);
}

.fo-drawer__footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-sm);
    justify-content: flex-end;
    padding: var(--fo-space-md) var(--fo-space-lg);
    padding-bottom: calc(var(--fo-space-md) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--fo-border-default);
    background: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #1e293b)) !important;
    position: sticky;
    bottom: 0;
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .fo-drawer,
    .fo-drawer-backdrop {
        transition: none;
    }
}

@media (max-width: 576px) {
    .fo-drawer,
    .fo-drawer--sm,
    .fo-drawer--md,
    .fo-drawer--lg,
    .fo-drawer--xl {
        width: 100vw;
    }
}

/* Design gallery */
.fo-gallery {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--fo-space-lg);
}

.fo-gallery-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-sm);
}

.fo-gallery-swatch {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: var(--fo-radius-sm);
    border: 1px solid var(--fo-border-default);
    display: flex;
    align-items: flex-end;
    padding: 0.25rem;
    font-size: 0.65rem;
    color: var(--fo-text-primary);
}

/* Board refinements (visual only) */
.dispatch-hour-line {
    border-color: var(--fo-border-subtle) !important;
    opacity: 0.55;
}

.dispatch-now-line {
    background: var(--fo-danger-fg-strong) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}

.dispatch-block--draggable:hover {
    filter: brightness(1.05);
}

.dispatch-block--selected {
    box-shadow: 0 0 0 2px var(--fo-border-selected) !important;
}

.dispatch-block--proposed-ghost {
    border: 1px dashed var(--fo-border-selected) !important;
    background: rgba(37, 99, 235, 0.1) !important;
}

.dispatch-crew-columns {
    gap: var(--fo-space-sm);
}

/* Theme toggle */
.fo-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.topbar-dropdown-item .fo-theme-toggle {
    color: inherit;
}