/* Sales presentation standard, based on the approved Purchase forms.
   Opt in with .sales-standard on a Sales screen. Do not apply to the ERP shell,
   Purchase/Production pages, customer-facing quotation previews or print routes.
   Screen-only rules preserve the existing print styles. */
@media screen {
    .sales-standard {
        --sales-title-size: 1.4rem;
        --sales-label-size: 12px;
        --sales-control-size: 13.5px;
        --sales-control-height: 40px;
        --sales-line-size: 13px;
        --sales-line-height: 34px;
        --sales-row-gap: 12px;
        --sales-column-gap: 14px;
        --sales-border: #e2e8f0;
        --sales-muted: #64748b;
        color: #1e293b;
        font-size: 13.5px;
        max-width: 1400px;
    }

    .sales-standard .ui-title,
    .sales-standard .page-title,
    .sales-standard .sales-page-title {
        margin: 0;
        font-size: var(--sales-title-size);
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -.02em;
        color: #1e293b;
    }

    .sales-standard .ui-subtitle,
    .sales-standard .page-sub,
    .sales-standard .sales-page-subtitle {
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.45;
        color: var(--sales-muted);
    }

    .sales-standard .ui-header,
    .sales-standard.ui-header,
    .sales-standard .page-head,
    .sales-standard .sales-document-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 16px;
    }

    .sales-standard .ui-header > div:first-child,
    .sales-standard .sales-document-header > div:first-child {
        min-width: 0;
        flex: 1 1 360px;
    }

    .sales-standard .ui-actions,
    .sales-standard .sales-document-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .sales-standard.sales-invoice .sales-document-header {
        background: #fff;
        border: 1px solid var(--sales-border);
        border-radius: 12px;
        padding: 16px 18px;
        margin-bottom: 14px;
    }

    .sales-standard .sales-document-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 14px;
        margin-top: 6px;
        color: var(--sales-muted);
        font-size: 13px;
        line-height: 1.45;
    }
    .sales-standard .sales-document-meta strong { color: #334155; font-weight: 650; }
    .sales-standard .sales-document-meta > span { overflow-wrap: anywhere; }
    .sales-standard .sales-guidance summary { cursor: pointer; color: #475569; }
    .sales-standard .sales-guidance p { max-width: 75ch; margin: 6px 0 0; }

    .sales-standard .form-label {
        display: block;
        font-size: var(--sales-label-size);
        font-weight: 650;
        color: #334155;
        margin-bottom: 4px;
    }
    .sales-standard .form-control,
    .sales-standard .form-select {
        min-height: var(--sales-control-height);
        font-size: var(--sales-control-size);
        border-radius: 10px;
        border-color: #cbd5e1;
    }
    .sales-standard .form-control-sm,
    .sales-standard .form-select-sm {
        min-height: var(--sales-line-height);
        font-size: var(--sales-line-size);
    }
    .sales-standard .form-control:focus,
    .sales-standard .form-select:focus,
    .sales-standard .btn:focus-visible {
        outline: 2px solid #2563eb;
        outline-offset: 2px;
        box-shadow: none;
    }
    .sales-standard .form-control[readonly] { background: #f8fafc; }
    .sales-standard .row.g-3 {
        --bs-gutter-x: var(--sales-column-gap);
        --bs-gutter-y: var(--sales-row-gap);
    }
    .sales-standard .btn {
        font-size: 13px;
        font-weight: 650;
        min-height: 38px;
        border-radius: 10px;
    }
    .sales-standard .btn-sm { font-size: 12.5px; min-height: 32px; }
    .sales-standard .btn-primary { background: #2563eb; border-color: #2563eb; }
    .sales-standard .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .sales-standard .btn-success { background: #047857; border-color: #047857; }
    .sales-standard .btn-success:hover { background: #065f46; border-color: #065f46; }

    .sales-standard .ui-card,
    .sales-standard.sales-master .panel,
    .sales-standard.sales-document .card,
    .sales-standard.sales-invoice .card {
        border: 1px solid var(--sales-border);
        border-radius: 11px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        margin-bottom: 14px;
        background: #fff;
    }
    .sales-standard.sales-invoice .card.border-0 { border: 1px solid var(--sales-border) !important; }
    .sales-standard.sales-invoice .card.shadow-sm,
    .sales-standard.sales-document .card.shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; }
    .sales-standard .ui-card-head,
    .sales-standard.sales-invoice .card-header {
        padding: 12px 16px;
        border-bottom: 1px solid #eef2f7;
    }
    .sales-standard .ui-card-title,
    .sales-standard.sales-invoice .card-header {
        font-size: 12px;
        font-weight: 750;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #475569;
    }
    .sales-standard .ui-card-title { margin: 0; }
    .sales-standard .ui-card-body,
    .sales-standard.sales-invoice .card-body,
    .sales-standard.sales-master .panel-body { padding: 16px 18px; }
    .sales-standard .ui-card-body.tight { padding: 0; }
    .sales-standard .ui-card-sub,
    .sales-standard .small,
    .sales-standard .form-text { font-size: 12.5px; }
    .sales-standard .ui-card-sub { margin-top: 4px; color: var(--sales-muted); }
    .sales-standard .ui-empty { padding: 36px 20px; }
    .sales-standard .ui-item-name,
    .sales-standard .ui-meta-value { font-weight: 650; }
    .sales-standard .ui-doc-no { font-size: 15px; font-weight: 750; }
    .sales-standard .ui-muted-line { font-size: 13px; }
    .sales-standard .sales-grand-total { font-size: 15px; font-weight: 750; }

    .sales-standard .ui-table:not(.nested),
    .sales-standard .table { font-size: 13px; }
    .sales-standard .ui-table:not(.nested) > :is(thead, tbody, tfoot) > tr > :is(th, td),
    .sales-standard .table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
        padding: 9px 12px;
        vertical-align: middle;
    }
    .sales-standard .ui-table:not(.nested) > tbody > tr > td { font-size: 13px; }
    .sales-standard .ui-table:not(.nested) > thead > tr > th,
    .sales-standard .table > thead > tr > th {
        font-size: 11px;
        font-weight: 750;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--sales-muted);
        background: #f8fafc;
    }
    .sales-standard .text-end { font-variant-numeric: tabular-nums; }
    /* Nested BOM text and indentation keep their existing readable scale. */
    .sales-standard .ui-tabs { margin-bottom: 14px; border-radius: 10px; }
    .sales-standard .ui-tab { font-size: 13px; padding: 7px 12px; min-height: 34px; border-radius: 8px; font-weight: 650; }
    .sales-standard .pill { font-size: 11.5px; font-weight: 750; padding: 3px 9px; }
    .sales-standard .alert { font-size: 13px; border-radius: 10px; padding: 10px 14px; }

    @media (max-width: 600px) {
        .sales-standard .ui-title,
        .sales-standard .page-title,
        .sales-standard .sales-page-title { font-size: 1.2rem; }
        .sales-standard .ui-actions,
        .sales-standard .sales-document-actions { width: 100%; }
    }
}