/* =============================================================
   SalesOrders.razor — scoped styles for the canonical-pattern
   migration (Phase 3-A). Tokens only — no raw colours/sizes.
   ============================================================= */

/* Filter bar — labelled status select + clear action */
.salesorders-filters {
    display: flex;
    gap: var(--gs-space-3);
    align-items: flex-end;
    margin-bottom: var(--gs-space-4);
    flex-wrap: wrap;
}

.salesorders-filters__group {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-1);
    min-width: 200px;
}

.salesorders-filters__label {
    font-size: var(--gs-text-sm);
    color: var(--gs-text-secondary);
    font-weight: 500;
}

.salesorders-filters__select {
    width: auto;
    min-width: 180px;
}

/* Desktop row actions: tight icon-button cluster */
.salesorders-actions {
    display: inline-flex;
    gap: var(--gs-space-1);
    justify-content: flex-end;
    align-items: center;
}

/* Satır aksiyonlarında tooltip (placement bottom) tablo overflow ile kesilmesin */
:deep(.gs-responsive-table .gs-table) {
    overflow: visible;
}

:deep(.gs-responsive-table .gs-table__body .gs-table__td:last-child),
:deep(.gs-responsive-table tbody td:last-child) {
    overflow: visible;
}

/* Mobile card — stacked layout, primary -> meta -> footer */
.salesorders-mc {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-3);
    padding: var(--gs-space-2) 0;
}

.salesorders-mc__main {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-1);
}

.salesorders-mc__customer {
    color: var(--gs-text-secondary);
    font-size: var(--gs-text-sm);
}

.salesorders-mc__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gs-space-3);
    flex-wrap: wrap;
    color: var(--gs-text-secondary);
    font-size: var(--gs-text-sm);
}

.salesorders-mc__meta strong {
    margin-left: auto;
}

.salesorders-mc__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gs-space-3);
    padding-top: var(--gs-space-2);
    border-top: 1px solid var(--gs-border);
    flex-wrap: wrap;
}

.salesorders-mc__actions {
    display: inline-flex;
    gap: var(--gs-space-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* On very small screens stack the filter actions full-width */
@media (max-width: 480px) {
    .salesorders-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .salesorders-filters__group {
        width: 100%;
    }

    .salesorders-filters__select {
        width: 100%;
    }
}