/* =============================================================================
   Dashboard Order Tab Styles
   ============================================================================= */

.inline-group-status-badge {
    margin-left: 0;
}

.order-info {
    white-space: nowrap;
}

.dashboard-container .dashboard-value {
    font-family: var(--font-primary);
}

/* =============================================================================
   ORDER GROUPING SYSTEM
   ============================================================================= */

.orders-group-container {
    position: relative;
    margin: calc(0.75 * var(--space)) 0;
    padding-left: calc(1.25 * var(--space));
}

.orders-group-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 999px;
    background: var(--color-accent);
}

/* Group header for badge */
.multi-item-group-header {
    margin-bottom: var(--space);
}

.multi-item-group-header .inline-group-status-badge {
    display: inline-block;
}

/* All items now use identical styling with CSS grid */
.multi-item-row-wrapper {
    display: grid;
    grid-template-columns: 120px 1fr; /* Fixed badge col, flexible content */
    column-gap: var(--space);
    row-gap: 0;
    margin-bottom: var(--space);
}

.multi-item-row-wrapper:last-child {
    margin-bottom: 0;
}

.multi-item-row-wrapper .grouped-item-row {
    /* Content in column 2 for all items */
}

.multi-item-row-wrapper.first-item .inline-group-status-badge {
    /* Badge in column 1 - inline size */
    justify-self: start;
    align-self: start;
}

.multi-item-row-wrapper.indented-item .grouped-item-row {
    grid-column: 2; /* Explicitly place in column 2, leaving column 1 empty */
}

.multi-item-row-wrapper .item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space);
}

.lc-shared-item-row--order-item {
    grid-template-columns: auto minmax(0, 1fr);
}

.lc-shared-item-row--order-item .lc-shared-item-row__metrics {
    display: none;
}

.order-item-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space);
}

.order-item-line__primary {
    flex: 1 1 auto;
    min-width: 0;
}

.order-item-line__bids {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
}

.order-item-line__bids .auction-price-display {
    margin-top: 0;
}

.auction-max-bid .bid-change-before,
.auction-max-bid .bid-change-after {
    display: block;
    line-height: 1.4;
}

.auction-max-bid .bid-change-after {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Unified font styling for all comment blocks */
.item-extras-block {
    margin-top: var(--space);
    padding-left: 0;
    font-size: var(--font-size-sm);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    line-height: 1.6;
}



/* =============================================================================
   ORDER-SPECIFIC TYPOGRAPHY EXTENSIONS
   ============================================================================= */

.dashboard-wrapper .order-details-line {
    margin-bottom: calc(0.375 * var(--space));
    line-height: 1.5;
}

.dashboard-wrapper .order-meta-line {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: calc(0.375 * var(--space));
    line-height: 1.4;
}

.dashboard-wrapper .order-financial-line {
    font-size: 13px;
    color: var(--color-text-primary);
    margin-bottom: calc(0.375 * var(--space));
    line-height: 1.4;
    font-weight: 500;
}

/* =============================================================================
   ORDER-SPECIFIC STYLING EXTENSIONS
   ============================================================================= */

.order-details-content {
    padding-left: calc(3.5 * var(--space)); /* Align with "Order #" text: toggle (2.5rem) + gap (1rem) */
}

/* =============================================================================
   RESPONSIVE DESIGN FOR ORDER ROWS
   ============================================================================= */
@media (max-width: 768px) {
    .order-item-line {
        flex-direction: column;
        align-items: flex-start;
    }

    .order-item-line__bids {
        text-align: left;
        width: 100%;
    }

    .dashboard-main-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: var(--space);
        row-gap: calc(0.5 * var(--space));
    }

    .dashboard-title {
        flex: initial;
        max-width: none;
        min-width: 0;
    }

    .dashboard-meta-row {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: var(--space);
        row-gap: calc(0.5 * var(--space));
        align-items: center;
    }

    .dashboard-meta-row > .dashboard-meta,
    .dashboard-meta-row > .dashboard-separator {
        display: inline-flex;
        align-items: baseline;
    }

    .dashboard-meta-row > .dashboard-separator {
        font-size: var(--font-size-sm);
        line-height: 1;
        padding: 0 calc(0.25 * var(--space));
    }

    .order-items-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space);
    }

    .item-names-container {
        min-width: unset;
        width: 100%;
    }

    .inline-status-container {
        width: 100%;
    }

    .inline-status-container .order-status-window {
        min-width: unset;
        width: 100%;
    }

    .order-summary-row,
    .order-totals-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space);
    }

    .order-separator {
        display: none;
    }

    .order-info {
        display: block;
        margin-bottom: calc(0.125 * var(--space));
        white-space: normal;
    }

    .inline-group-status-badge {
        font-size: 0.75rem;
    }

    .multi-item-row-wrapper.indented-item {
        padding-left: 0;
    }

    .order-details-content {
        padding-left: 0;
    }
}


/* =============================================================================
   ORDER NOTES SECTION
   ============================================================================= */
.order-notes-section {
    margin-top: calc(2 * var(--space));
    border-left: 4px solid var(--accent-color);
    padding-left: calc(2 * var(--space));
}

.notes-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.order-notes-content {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: var(--line-height-base);
}

/* =============================================================================
   ORDER INVOICE SECTION
   ============================================================================= */
.order-invoice-section {
    margin-top: calc(2 * var(--space));
    padding-top: var(--space);
    border-top: 1px solid var(--color-border);
    text-align: right;
}