/* src/styles/MissionLayout.css */
@import './DesignTokens.css';

.mission-layout {
    margin-bottom: var(--spacing-lg);
}

/* Expert UI/UX Single-Line Action Bar */
.mission-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-base) var(--spacing-lg);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    min-height: 60px;
}

/* Export Actions Group (Left) */
.export-actions-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Origin Controls Group (Right) */
.origin-controls-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-base);
    flex-shrink: 0;
}

/* Button Styling - Consistent with Expert Design */
.export-kml-btn,
.print-mission-btn,
.set-origin-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-base);
    border: 1px solid transparent;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    transition: var(--transition-all);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-primary);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    min-height: var(--button-height-base);
}

/* Export KML Button */
.export-kml-btn {
    background: linear-gradient(135deg, var(--color-success), #2e7d32);
    color: var(--color-text-primary);
}

.export-kml-btn:hover {
    background: linear-gradient(135deg, #2e7d32, var(--color-success));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Print Mission Button */
.print-mission-btn {
    background: linear-gradient(135deg, var(--color-warning), #f57c00);
    color: var(--color-text-inverse);
}

.print-mission-btn:hover {
    background: linear-gradient(135deg, #f57c00, var(--color-warning));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Set Origin Button */
.set-origin-btn {
    background: linear-gradient(135deg, var(--color-info), #1976d2);
    color: var(--color-text-primary);
}

.set-origin-btn:hover {
    background: linear-gradient(135deg, #1976d2, var(--color-info));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Button Focus States */
.export-kml-btn:focus,
.print-mission-btn:focus,
.set-origin-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Icon Sizing */
.export-kml-btn svg,
.print-mission-btn svg,
.set-origin-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Origin Status Display */
.current-origin {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-border);
    border-left: 4px solid var(--color-success);
    padding: var(--spacing-sm) var(--spacing-base);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    max-width: 300px;
}

.current-origin p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.current-origin strong {
    color: var(--color-success);
    font-family: var(--font-family-primary);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .mission-action-bar {
        flex-direction: column;
        gap: var(--spacing-base);
        align-items: stretch;
    }

    .export-actions-group,
    .origin-controls-group {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .mission-action-bar {
        padding: var(--spacing-base);
    }

    .export-actions-group,
    .origin-controls-group {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .export-kml-btn,
    .print-mission-btn,
    .set-origin-btn {
        width: 100%;
        justify-content: center;
    }

    .current-origin {
        max-width: none;
        text-align: center;
    }
}