.fo-fleet-page {
    min-height: calc(100vh - 56px);
    background: var(--bs-body-bg, #0f1419);
    padding: 1rem 1.25rem 5rem;
}

.fo-fleet-card {
    background: var(--fo-surface-elevated, #1a1f26);
    border: 1px solid var(--fo-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--fo-radius-md, 8px);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.fo-fleet-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}

.fo-fleet-header-photo {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--fo-surface, #141820);
    border: 1px solid var(--fo-border, rgba(255, 255, 255, 0.12));
}

.fo-fleet-header-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 2.5rem;
}

.fo-fleet-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem 1.25rem;
}

.fo-fleet-meta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.15rem;
}

.fo-fleet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

.fo-fleet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--fo-border, rgba(255, 255, 255, 0.1));
    margin-bottom: 1.25rem;
}

.fo-fleet-tab {
    padding: 0.6rem 1rem;
    border: none;
    background: transparent;
    color: var(--bs-secondary-color);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.fo-fleet-tab--active {
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-primary);
    font-weight: 600;
}

.fo-fleet-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.fo-fleet-summary-card {
    background: var(--fo-surface, #141820);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    border: 1px solid var(--fo-border, rgba(255, 255, 255, 0.08));
}

.fo-fleet-summary-card h6 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    margin: 0 0 0.35rem;
}

.fo-fleet-form-page .form-label {
    font-weight: 500;
    margin-bottom: 0.35rem;
}

.fo-fleet-sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--fo-surface-elevated, #1a1f26);
    border-top: 1px solid var(--fo-border, rgba(255, 255, 255, 0.12));
    padding: 0.85rem 1.25rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
}

.fo-fleet-health--good { color: #198754; }
.fo-fleet-health--warn { color: #ffc107; }
.fo-fleet-health--bad { color: #dc3545; }

.fo-fleet-placeholder {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--bs-secondary-color);
}

@media (max-width: 768px) {
    .fo-fleet-page {
        padding-bottom: 6rem;
    }

    .fo-fleet-actions .fo-btn {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .fo-fleet-table-wrap {
        margin: 0 -0.5rem;
    }

    .fo-fleet-data-table {
        font-size: 0.85rem;
    }

    .fo-fleet-data-table th,
    .fo-fleet-data-table td {
        white-space: nowrap;
    }
}

.fo-fleet-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fo-fleet-checklist-item {
    background: var(--fo-surface, #141820);
    border: 1px solid var(--fo-border, rgba(255, 255, 255, 0.08));
    border-radius: 8px;
    padding: 0.85rem 1rem;
}

.fo-fleet-checklist-item .form-check {
    margin-bottom: 0.35rem;
}

.fo-fleet-doc-preview {
    margin-top: 1rem;
    border: 1px solid var(--fo-border, rgba(255, 255, 255, 0.12));
    border-radius: 8px;
    overflow: hidden;
    background: var(--fo-surface, #141820);
}

.fo-fleet-doc-preview iframe,
.fo-fleet-doc-preview img {
    display: block;
    width: 100%;
    max-height: 70vh;
    border: 0;
}