/**
 * Phase 68 — Office UI consistency.
 * Shared list/page shell standards. Complements fieldops-os + light-surface.
 * No business logic. No glass. Theme tokens only.
 */

/* ── Office page anatomy ─────────────────────────────────────────────── */
.fo-office-page {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-lg, 16px);
    padding: var(--fo-space-lg, 16px) var(--fo-space-xl, 24px) var(--fo-space-2xl, 32px);
    max-width: 100%;
    min-width: 0;
    color: var(--fo-text-primary);
}

@media (min-width: 1024px) {
    .fo-office-page {
        padding-left: var(--fo-space-2xl, 32px);
        padding-right: var(--fo-space-2xl, 32px);
        gap: var(--fo-space-xl, 24px);
    }
}

@media (max-width: 430px) {
    .fo-office-page {
        padding: var(--fo-space-md, 12px) var(--fo-space-md, 12px) var(--fo-space-xl, 24px);
    }
}

.fo-office-page > .fo-page-header-block {
    margin-bottom: 0;
}

.fo-office-page__body {
    display: flex;
    flex-direction: column;
    gap: var(--fo-space-lg, 16px);
    min-width: 0;
}

.fo-office-panel {
    background: var(--fo-surface-raised, var(--fo-card, #ffffff)) !important;
    background-color: var(--fo-surface-raised, var(--fo-card, #ffffff)) !important;
    border: 1px solid var(--fo-border, #e2e8f0);
    border-radius: var(--fo-radius-md, 12px);
    padding: var(--fo-space-lg, 16px);
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none;
}

.fo-office-panel--flush {
    padding: 0;
    overflow: hidden;
}

.fo-office-panel__title {
    margin: 0 0 var(--fo-space-md, 12px);
    font-size: var(--fo-type-section, 1.05rem);
    font-weight: var(--fo-font-weight-semibold, 600);
    color: var(--fo-text-primary);
}

/* ── List toolbar (search / filters / actions) ───────────────────────── */
.fo-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--fo-space-md, 12px);
    padding: var(--fo-space-md, 12px) var(--fo-space-lg, 16px);
    background: var(--fo-toolbar-bg, var(--fo-surface, #ffffff)) !important;
    background-color: var(--fo-toolbar-bg, var(--fo-surface, #ffffff)) !important;
    border: 1px solid var(--fo-border, #e2e8f0);
    border-radius: var(--fo-radius-md, 12px);
    min-height: 3.25rem;
}

.fo-list-toolbar__leading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fo-space-sm, 8px);
    flex: 1 1 16rem;
    min-width: 0;
}

.fo-list-toolbar__search {
    flex: 1 1 14rem;
    min-width: min(100%, 12rem);
    max-width: 28rem;
}

.fo-list-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fo-space-sm, 8px);
}

.fo-list-toolbar__trailing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fo-space-sm, 8px);
    margin-left: auto;
}

.fo-list-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fo-space-sm, 8px);
}

.fo-list-toolbar__meta {
    font-size: var(--fo-type-caption, 0.78rem);
    color: var(--fo-text-tertiary);
    white-space: nowrap;
}

/* Equal-height compact controls in toolbars */
.fo-list-toolbar .form-select,
.fo-list-toolbar .form-control,
.fo-list-toolbar .btn,
.fo-list-toolbar .fo-btn {
    min-height: 2.5rem;
}

.fo-list-toolbar .btn,
.fo-list-toolbar .fo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

/* ── Search field standard ───────────────────────────────────────────── */
.fo-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.fo-search-field__icon {
    position: absolute;
    left: 0.85rem;
    color: var(--fo-control-placeholder, #64748b);
    font-size: 0.95rem;
    pointer-events: none;
    z-index: 1;
}

.fo-search-field__input,
.fo-search-field .form-control {
    width: 100%;
    min-height: 2.5rem;
    padding-left: 2.35rem !important;
    padding-right: 2.5rem !important;
    border-radius: var(--fo-radius-sm, 8px) !important;
    background: var(--fo-control-bg, #ffffff) !important;
    border-color: var(--fo-control-border, #cbd5e1) !important;
    color: var(--fo-control-text, #0f172a) !important;
}

.fo-search-field__input:focus,
.fo-search-field .form-control:focus {
    border-color: var(--fo-control-focus-border, #2563eb) !important;
    box-shadow: 0 0 0 0.2rem var(--fo-control-focus-ring, rgba(37, 99, 235, 0.22)) !important;
}

.fo-search-field__clear {
    position: absolute;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--fo-text-tertiary);
    cursor: pointer;
}

.fo-search-field__clear:hover {
    background: var(--fo-surface-subtle, #f1f5f9);
    color: var(--fo-text-primary);
}

.fo-search-field__busy {
    position: absolute;
    right: 0.75rem;
}

/* ── Office tables ───────────────────────────────────────────────────── */
.fo-office-table,
.fo-office-page .table-dark-custom,
.fo-office-page table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--fo-text-primary);
    background: var(--fo-table-bg, #ffffff);
}

.fo-office-table thead th,
.fo-office-page .table-dark-custom thead th,
.fo-office-page table.table thead th {
    background: var(--fo-table-header-bg, #f8fafc) !important;
    color: var(--fo-table-header-text, #475569) !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--fo-divider, #e2e8f0) !important;
    white-space: nowrap;
}

.fo-office-table tbody td,
.fo-office-page .table-dark-custom tbody td,
.fo-office-page table.table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--fo-table-border, #e2e8f0);
    color: var(--fo-text-secondary);
    vertical-align: middle;
    background: transparent;
}

.fo-office-table tbody tr:hover,
.fo-office-page .table-dark-custom tbody tr:hover,
.fo-office-page table.table tbody tr:hover {
    background: var(--fo-table-row-hover, #f1f5f9) !important;
}

.fo-office-page .table-link,
.fo-office-page a.table-link,
.fo-office-page .table a:not(.btn):not(.fo-btn) {
    color: var(--fo-text-primary) !important;
}

.fo-office-page .table a:not(.btn):not(.fo-btn):hover {
    color: var(--fo-brand-600, #2563eb) !important;
}

.fo-office-page .customer-name {
    color: var(--fo-text-primary) !important;
}

/* Dense clickable rows keep usable hit area */
.fo-office-page .clickable-row,
.fo-office-page .table-link {
    min-height: 2.75rem;
}

/* ── Button hierarchy inside office pages (Bootstrap bridge) ─────────── */
.fo-office-page .btn-primary,
.fo-office-panel .btn-primary {
    color: var(--fo-btn-primary-text, #fff) !important;
    background-color: var(--fo-btn-primary-bg, #2563eb) !important;
    border-color: var(--fo-btn-primary-border, #2563eb) !important;
}

.fo-office-page .btn-outline-secondary,
.fo-office-page .btn-secondary,
.fo-office-panel .btn-outline-secondary {
    color: var(--fo-btn-secondary-text, var(--fo-text-primary)) !important;
    background: var(--fo-btn-secondary-bg, var(--fo-control-bg)) !important;
    border-color: var(--fo-btn-secondary-border, var(--fo-control-border)) !important;
}

.fo-office-page .btn-outline-primary {
    color: var(--fo-brand-700, #1d4ed8) !important;
    background: transparent !important;
    border-color: color-mix(in srgb, var(--fo-brand-600, #2563eb) 45%, transparent) !important;
}

/* Soften legacy text-light / text-white links on tables */
.fo-office-page .text-light,
.fo-office-page a.text-light {
    color: var(--fo-text-primary) !important;
}

/* ── Chip / filter row ───────────────────────────────────────────────── */
.fo-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fo-space-sm, 8px);
    align-items: center;
}

.fo-filter-chips .btn,
.fo-filter-chips .fo-btn {
    min-height: 2.25rem;
}

/* ── Loading / empty alignment ───────────────────────────────────────── */
.fo-office-page .loading-state,
.fo-office-page .empty-state {
    padding: var(--fo-space-2xl, 32px) var(--fo-space-lg, 16px);
    text-align: center;
}

.fo-office-page .empty-state-headline,
.fo-office-page .fo-empty__title {
    color: var(--fo-text-primary) !important;
}

.fo-office-page .empty-state-subtext,
.fo-office-page .fo-empty__text {
    color: var(--fo-text-secondary) !important;
}

/* ── Strengthen shared toolbar / action bar to solid surface ─────────── */
.fo-office-page .fo-action-bar,
.fo-office-page .fo-toolbar {
    background: var(--fo-toolbar-bg, var(--fo-surface, #ffffff)) !important;
    border: 1px solid var(--fo-border, #e2e8f0);
    border-radius: var(--fo-radius-md, 12px);
    border-bottom: 1px solid var(--fo-border, #e2e8f0);
}

/* ── Typography roles (utility helpers) ──────────────────────────────── */
.fo-type-helper {
    font-size: 0.8125rem;
    color: var(--fo-text-tertiary);
    line-height: 1.4;
}

.fo-type-label-strong {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fo-text-secondary);
}

/* ── KPI card nested in office (avoid nested dark) ───────────────────── */
.fo-office-page .kpi-card {
    background: var(--fo-surface-raised, #ffffff) !important;
    border: 1px solid var(--fo-border, #e2e8f0);
    border-radius: var(--fo-radius-md, 12px);
    padding: var(--fo-space-lg, 16px);
    box-shadow: none;
}

.fo-office-page .card.shadow-sm,
.fo-office-page .card {
    background: var(--fo-surface-raised, #ffffff) !important;
    border: 1px solid var(--fo-border, #e2e8f0) !important;
    border-radius: var(--fo-radius-md, 12px) !important;
    box-shadow: none !important;
    color: var(--fo-text-primary) !important;
}

.fo-office-page .card-body {
    color: var(--fo-text-primary);
}

/* ── Assets header → office alignment ─────────────────────────────────── */
.fo-assets-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fo-space-md, 12px);
    margin-bottom: var(--fo-space-lg, 16px);
}

.fo-assets-header .fo-page-title {
    margin: 0;
    font-size: var(--fo-type-page-title, clamp(1.35rem, 2vw, 1.75rem));
    font-weight: var(--fo-font-weight-semibold, 600);
    color: var(--fo-text-primary);
}

.fo-assets-header .fo-page-subtitle {
    margin: 0.35rem 0 0;
    color: var(--fo-text-tertiary);
    font-size: var(--fo-type-compact, 0.875rem);
}

/* ── Dark parity (token-driven; explicit solid bars) ─────────────────── */
html[data-fo-theme="dark"] .fo-list-toolbar,
html[data-fo-theme="dark"] .fo-office-panel,
html[data-fo-theme="dark"] .fo-office-page .kpi-card,
html[data-fo-theme="dark"] .fo-office-page .card {
    background: var(--fo-surface-raised, #1e293b) !important;
    border-color: var(--fo-border, #334155) !important;
}

/* ── Mobile table → stack helpers ────────────────────────────────────── */
@media (max-width: 767.98px) {
    .fo-list-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .fo-list-toolbar__trailing {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .fo-list-toolbar__search {
        max-width: none;
    }

    .fo-office-page .table-responsive {
        border-radius: var(--fo-radius-sm, 8px);
        border: 1px solid var(--fo-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fo-office-page * {
        scroll-behavior: auto;
    }
}