/* =============================================================
   SalesOrderEdit.razor — scoped styles for the canonical-pattern
   migration (Phase 3 wave A — sales orders).

   - Tokens only — every colour, spacing and font reference points
     at glasstock-design-system.css custom properties.
   - Single source of truth for line items via ResponsiveTable
     (no parallel desktop/mobile markup).
   - Sticky form actions on tablet/mobile (<= 1023.98px) with
     iOS safe-area-inset-bottom padding.
   ============================================================= */

.salesorderedit {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-4);
}

.salesorderedit__alert {
    margin-bottom: var(--gs-space-2);
}

.salesorderedit__fulfillment-error {
    margin-top: var(--gs-space-3);
}

/* ---------- Header actions cluster (in PageShell HeaderActions slot) ---------- */
::deep .salesorderedit__header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gs-space-2);
}

::deep .salesorderedit__status-badge {
    padding: var(--gs-space-1) var(--gs-space-2);
    font-size: var(--gs-text-xs);
    line-height: 1.2;
}

/* ============================================================
   VIEW MODE — summary card and totals
   ============================================================ */
.salesorderedit__view-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gs-space-3) var(--gs-space-4);
}

.salesorderedit__view-row {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-1);
    min-width: 0;
}

.salesorderedit__view-row--wide {
    grid-column: 1 / -1;
}

.salesorderedit__view-label {
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.salesorderedit__view-value {
    font-size: var(--gs-text-base);
    color: var(--gs-text);
    word-break: break-word;
}

@media (max-width: 767.98px) {
    .salesorderedit__view-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FULFILLMENT STEPPER (formerly inline-styled raw divs)
   ============================================================ */
.salesorderedit__stepper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gs-space-1);
}

.salesorderedit__step-wrap {
    display: flex;
    align-items: center;
    gap: var(--gs-space-1);
}

.salesorderedit__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gs-space-1);
    min-width: 96px;
    padding: var(--gs-space-2) var(--gs-space-3);
    background: var(--gs-surface);
    color: var(--gs-text-muted);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius, 0);
    font-family: inherit;
    font-size: inherit;
    transition: all 0.18s ease;
    text-align: center;
}

.salesorderedit__step.is-active {
    background: var(--gs-primary);
    color: var(--gs-text-inverse);
    border-color: var(--gs-primary);
}

.salesorderedit__step.is-current {
    box-shadow: 0 0 0 2px var(--gs-primary-light, rgba(255, 214, 0, 0.25));
}

.salesorderedit__step--clickable {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .salesorderedit__step--clickable:hover {
        background: var(--gs-primary-hover, var(--gs-primary));
        color: var(--gs-text-inverse);
        border-color: var(--gs-primary-hover, var(--gs-primary));
    }
}

.salesorderedit__step--clickable:focus-visible {
    outline: 2px solid var(--gs-primary);
    outline-offset: 2px;
}

.salesorderedit__step-icon {
    font-size: var(--gs-text-xl);
    line-height: 1;
}

.salesorderedit__step-label {
    font-size: var(--gs-text-xs);
    line-height: 1.2;
}

.salesorderedit__connector {
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--gs-border);
}

.salesorderedit__connector.is-active {
    background: var(--gs-primary);
}

.salesorderedit__stepper-cta {
    margin-top: var(--gs-space-3);
}

@media (max-width: 767.98px) {
    .salesorderedit__stepper {
        gap: var(--gs-space-1);
    }

    .salesorderedit__step {
        min-width: 72px;
        padding: var(--gs-space-2);
    }

    .salesorderedit__connector {
        width: 12px;
    }
}

/* ============================================================
   GENERAL INFO grid (CREATE mode)
   ============================================================ */
.salesorderedit__general-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gs-space-4);
}

.salesorderedit__field--wide {
    grid-column: 1 / -1;
}

@media (max-width: 1023.98px) {
    .salesorderedit__general-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639.98px) {
    .salesorderedit__general-grid {
        grid-template-columns: 1fr;
    }
}

/* Fix textarea styling that gets a fixed height fallback in the design system */
.salesorderedit__general-grid textarea.gs-input {
    min-height: 48px;
    resize: vertical;
}

/* Inline secondary action ("Add as new customer" / "Cancel new customer") */
.salesorderedit__inline-action {
    display: inline-flex;
    align-items: center;
    gap: var(--gs-space-1);
    margin-top: var(--gs-space-2);
    padding: var(--gs-space-2) var(--gs-space-3);
    font-family: var(--gs-font-sans);
    font-size: var(--gs-text-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--gs-primary);
    background: color-mix(in srgb, var(--gs-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--gs-primary) 40%, var(--gs-border));
    border-radius: var(--gs-radius-sm);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition:
        background-color var(--gs-transition-fast),
        border-color var(--gs-transition-fast),
        color var(--gs-transition-fast);
}

.salesorderedit__inline-action:focus-visible {
    color: var(--gs-primary-hover, var(--gs-primary));
    outline: none;
}

@media (hover: hover) and (pointer: fine) {
    .salesorderedit__inline-action:hover {
        color: var(--gs-primary-hover, var(--gs-primary));
        outline: none;
    }
}

.salesorderedit__inline-action--muted {
    color: var(--gs-text-muted);
}

.salesorderedit__field-help {
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
    margin-top: var(--gs-space-1);
}

/* ============================================================
   ITEMS — line item editor inside ResponsiveTable
   ============================================================ */
.salesorderedit__product-option {
    display: flex;
    align-items: center;
    gap: var(--gs-space-2);
    width: 100%;
}

.salesorderedit__product-option-code {
    font-weight: 600;
    color: var(--gs-text);
    flex-shrink: 0;
}

.salesorderedit__product-option-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.salesorderedit__product-option-stock {
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
    min-width: 96px;
    text-align: right;
    flex-shrink: 0;
}

.salesorderedit__product-option-price {
    font-weight: 600;
    color: var(--gs-primary);
    min-width: 80px;
    text-align: right;
    flex-shrink: 0;
}

.salesorderedit__qty-input {
    width: 100%;
}

.salesorderedit__qty-input--invalid {
    border-color: var(--gs-danger) !important;
    box-shadow: 0 0 0 1px var(--gs-danger);
}

.salesorderedit__inline-error {
    margin-top: var(--gs-space-1);
    color: var(--gs-danger);
    font-size: var(--gs-text-xs);
    line-height: 1.3;
}

.salesorderedit__stock-meta {
    margin-top: var(--gs-space-1);
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
}

.salesorderedit__cell-numeric {
    font-variant-numeric: tabular-nums;
}

.salesorderedit__cell-numeric--strong {
    font-weight: 600;
}

.salesorderedit__cell-numeric--danger {
    color: var(--gs-danger);
}

.salesorderedit__cell-name {
    display: block;
    font-weight: 500;
}

.salesorderedit__cell-code {
    display: inline-block;
    margin-left: var(--gs-space-1);
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
}

.salesorderedit__cell-index {
    color: var(--gs-text-muted);
    font-variant-numeric: tabular-nums;
}

.salesorderedit__items-footer {
    display: flex;
    justify-content: flex-start;
    padding: var(--gs-space-3) var(--gs-space-4);
    border-top: 1px solid var(--gs-border);
    background: var(--gs-surface);
}

.salesorderedit__add-item-btn {
    /* Variant=ghost already styles, just ensure full width on mobile via media query below */
}

@media (max-width: 1023.98px) {
    .salesorderedit__add-item-btn {
        width: 100%;
    }

    .salesorderedit__items-footer {
        justify-content: stretch;
    }
}

/* Mobile cards for line items */
.salesorderedit__create-mc {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
    width: 100%;
}

.salesorderedit__create-mc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gs-space-2);
    padding-bottom: var(--gs-space-2);
    border-bottom: 1px solid var(--gs-border);
}

.salesorderedit__create-mc-body {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
}

.salesorderedit__mc-field-label {
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: calc(var(--gs-space-1) * -1);
}

.salesorderedit__mc {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-2);
    width: 100%;
}

.salesorderedit__mc-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gs-space-2);
    padding-bottom: var(--gs-space-2);
    border-bottom: 1px solid var(--gs-border);
}

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

.salesorderedit__mc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gs-space-2);
    padding: var(--gs-space-1) 0;
}

.salesorderedit__mc-row--total {
    border-top: 1px solid var(--gs-border);
    padding-top: var(--gs-space-2);
    margin-top: var(--gs-space-1);
}

.salesorderedit__mc-label {
    font-size: var(--gs-text-xs);
    color: var(--gs-text-muted);
}

/* ============================================================
   TOTALS card
   ============================================================ */
.salesorderedit__totals {
    display: flex;
    justify-content: flex-end;
}

.salesorderedit__totals-box {
    display: flex;
    flex-direction: column;
    gap: var(--gs-space-1);
    min-width: 240px;
}

.salesorderedit__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gs-space-3);
    padding: var(--gs-space-1) 0;
}

.salesorderedit__total-row--discount {
    color: var(--gs-danger);
}

.salesorderedit__total-row--grand {
    margin-top: var(--gs-space-2);
    padding-top: var(--gs-space-2);
    border-top: 1px solid var(--gs-border);
    font-size: var(--gs-text-lg);
    font-weight: 700;
}

@media (max-width: 1023.98px) {
    .salesorderedit__totals {
        justify-content: stretch;
    }

    .salesorderedit__totals-box {
        width: 100%;
    }
}

/* ============================================================
   FORM ACTIONS — sticky on tablet/mobile (≤ 1023.98px)
   ============================================================ */
.salesorderedit__form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--gs-space-2);
    padding: var(--gs-space-3) 0;
}

@media (max-width: 1023.98px) {
    .salesorderedit__form-actions {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
        flex-direction: column-reverse;
        background: var(--gs-surface);
        padding: var(--gs-space-3);
        padding-bottom: max(var(--gs-space-3), env(safe-area-inset-bottom));
        border-top: 1px solid var(--gs-border);
        margin: 0 calc(var(--gs-space-4) * -1) calc(var(--gs-space-4) * -1);
    }

    .salesorderedit__form-actions-cancel,
    .salesorderedit__form-actions-submit {
        width: 100%;
    }
}

/* ============================================================
   CONFIRM DIALOG details rows (new-customer + dirty)
   ============================================================ */
::deep .salesorderedit__confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--gs-space-3);
    padding: var(--gs-space-1) 0;
}

::deep .salesorderedit__confirm-row--total {
    margin-top: var(--gs-space-2);
    padding-top: var(--gs-space-2);
    border-top: 1px solid var(--gs-border);
    color: var(--gs-primary);
    font-weight: 700;
}


/* =============================================================
   PRINT — wave 6
   Scoped overrides for sales-order print output. The global
   @media print block in glasstock-design-system.css already
   handles color reset, chrome hiding and A4 page geometry; this
   adds the order-specific touches (signature block, kept-together
   summary, hidden fulfillment buttons).
   ============================================================= */
.salesorderedit__print-header,
.salesorderedit__print-footer {
    display: none;
}

@media print {
    /* Hide every interactive bit not needed on paper */
    ::deep .salesorderedit__header-actions,
    ::deep .gs-page-shell__actions,
    .salesorderedit__form-actions,
    .salesorderedit__alert {
        display: none !important;
    }

    /* Disable stepper interactivity hints — render as labels only */
    .salesorderedit__step--clickable {
        cursor: default !important;
        background: transparent !important;
        border: 1pt solid #CCCCCC !important;
    }

    /* Print-only header / footer */
    .salesorderedit__print-header {
        display: flex !important;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--gs-space-3);
        padding-bottom: 8pt;
        margin-bottom: 12pt;
        border-bottom: 2pt solid #000000;
        page-break-after: avoid;
    }

    .salesorderedit__print-footer {
        display: block !important;
        margin-top: 18pt;
        padding-top: 10pt;
        border-top: 1pt solid #CCCCCC;
        font-size: 9pt;
        color: #555555;
    }

    .salesorderedit__print-brand {
        font-family: "Space Grotesk", sans-serif;
        font-size: 16pt;
        font-weight: 800;
        letter-spacing: 1pt;
        color: #000000;
    }

    .salesorderedit__print-brand small {
        display: block;
        font-family: "IBM Plex Mono", monospace;
        font-size: 8pt;
        font-weight: 600;
        letter-spacing: 1.5pt;
        color: #555555;
        margin-top: 2pt;
    }

    .salesorderedit__print-doc {
        font-family: "IBM Plex Mono", monospace;
        font-size: 11pt;
        font-weight: 700;
        color: #000000;
        text-align: right;
    }

    .salesorderedit__print-signature-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24pt;
        margin-top: 14pt;
    }

    .salesorderedit__print-signature-cell {
        border-top: 1pt solid #555555;
        padding-top: 4pt;
        text-align: center;
        font-family: "IBM Plex Mono", monospace;
        font-size: 9pt;
        color: #555555;
    }

    /* Keep summary card together; rest of page can flow */
    .salesorderedit__view-grid {
        page-break-inside: avoid;
    }

    .salesorderedit__view-label {
        color: #555555 !important;
    }
}