/**
 * Trail Page Styles
 *
 * Trail page for testing Trend algorithms
 * Uses workflow-tabler structure with simplified single-column table
 *
 * @since 1.0.0
 * @see DESIGN_43 - Independent Page + Component Reuse
 * @see DESIGN_51 - Responsive Content Max-Width Layout (migrated)
 */

/* DESIGN_51: Migrated to unified layout system */
/* BUILDER LAYOUT CONVENTION: 90% width centered layout
 * See: issues/ISSUE_BUILDER_90_PERCENT_CONTENT_WIDTH_LAYOUT.md */
.trail-container-wrapper {
    position: fixed;
    top: var(--nona-header-height);
    left: calc(var(--nona-nav-width) + var(--content-available-width) * 0.05); /* Center: nav width + 5% margin */
    right: var(--assistant-current-width);
    width: calc(var(--content-available-width) * 0.9); /* 90% of available width */
    height: calc(100vh - var(--nona-header-height) - var(--bottom-toolbar-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0; /* DESIGN_51: Let content wrapper handle padding */
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease, left 0.3s ease; /* DESIGN_51: Smooth transitions */
}

/* DESIGN_51: Migrated to responsive max-width system */
.nona-page-trail {
    width: 100%;
    max-width: var(--content-max-width); /* DESIGN_51: Responsive instead of fixed 1200px */
    margin: 0 auto;
    padding: calc(var(--spacing-unit, 8px) * 3);
    padding-left: var(--content-padding-x); /* DESIGN_51: Responsive horizontal padding */
    padding-right: var(--content-padding-x); /* DESIGN_51: Responsive horizontal padding */
    transition: max-width 0.3s ease, padding 0.3s ease; /* DESIGN_51: Smooth transitions */
}

/* Trail Table Structure */
.trail-tabler-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 calc(var(--spacing-unit, 8px) * 2);
    table-layout: fixed;
    border: none;
    margin-bottom: calc(var(--spacing-unit, 8px) * 3);
}

.trail-tabler-table td {
    padding: var(--spacing-unit, 8px);
    vertical-align: middle;
    border: none;
}

/* Column widths - simplified for single algorithm column */
.trail-tabler-table colgroup col.trail-row-number {
    width: 40px;
}

.trail-tabler-table colgroup col.trail-column-algorithm {
    width: auto;
}

/* Row styles */
.trail-row {
    background: #fff;
    transition: background-color 0.2s ease;
    position: relative;
    border: none;
}

.trail-row td {
    padding: var(--spacing-unit, 8px);
    border-top: 1px solid var(--color-border, #e0e0e0);
}

.trail-row:hover {
    background: var(--color-bg-hover, #f5f5f5);
}

/* Row number column */
.trail-row-number {
    width: 40px;
    text-align: center;
}

.trail-row .row-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-hover, #f5f5f5);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text, #333);
    margin: 0 auto;
}

/* Algorithm selection column */
.trail-column-algorithm {
    position: relative;
}

.trail-algorithm-controls {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit, 8px) * 2);
    width: 100%;
}

/* Execute Section Compatibility */
.trail-execute-section {
    margin-top: calc(var(--spacing-unit, 8px) * 4);
}

/* Result Modal (placeholder for future implementation) */
.trail-result-modal {
    /* Will be implemented in later phase */
}

/* Responsive Design */
@media (max-width: 768px) {
    .trail-container-wrapper {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding: calc(var(--spacing-unit, 8px) * 2);
    }

    .trail-tabler-table,
    .trail-tabler-table tbody,
    .trail-tabler-table tr,
    .trail-tabler-table td {
        display: block;
        width: 100% !important;
    }

    .trail-row-number,
    .trail-column-algorithm {
        width: 100% !important;
        max-width: 100% !important;
    }

    .trail-row .row-number {
        margin: 0;
    }

    .trail-algorithm-controls {
        flex-direction: column;
        align-items: stretch;
    }
}