/* Full offline styles are isolated from the released online and legacy-offline surfaces. */
/* A soft pulse plus the licensed spinner shows ongoing activity without flashing or hiding the status text. */
.qs-offline2-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    padding: 1rem;
    border: 2px solid var(--accent, #4f46e5);
    border-radius: 0.75rem;
    background: var(--qs-surface);
    color: var(--qs-text);
}
.qs-offline2-progress > div { flex: 1; min-width: 0; }
.qs-offline2-progress p { margin: 0.35rem 0 0; }
.qs-offline2-progress-title { animation: qs-offline-preparing-pulse 1.6s ease-in-out infinite; }
@keyframes qs-offline-preparing-pulse { 50% { opacity: 0.55; } }
/* Respect reduced-motion settings while preserving a readable stage and Cancel action. */
@media (prefers-reduced-motion: reduce) {
    .qs-offline2-progress, .qs-offline2-progress * { animation: none !important; }
}
@media (max-width: 600px) { .qs-offline2-progress { flex-wrap: wrap; } }

.qs-offline2-page,
.qs-offline2-editor,
.qs-offline2-view {
    display: grid;
    gap: 1rem;
    max-width: 1480px;
    margin: 0 auto;
    padding: 0.85rem;
}

.qs-offline2-header,
.qs-offline2-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Keep the saved-document page within the phone viewport instead of letting a panel's intrinsic width widen every row. */
.qs-offline2-view {
    grid-template-columns: minmax(0, 1fr);
}

.qs-offline2-view > * {
    min-width: 0;
}

.qs-offline2-mark,
.qs-offline2-panel-icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    color: var(--qbm-accent-foreground, #fff);
    background: var(--qbm-accent, #4f46e5);
    font-size: 1.35rem;
}

.qs-offline2-network,
.qs-offline2-editor-state,
.qs-offline2-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* QSales exposes --qs-* theme aliases; the old undefined names always used the light fallback. */
    border: 1px solid var(--qs-border);
    border-radius: 999px;
    padding: 0.4rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Review reason repeated under a document's status in both Grid and Card views; it wraps inside narrow cells. */
.qs-offline2-state-reason {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--qs-amber-text, inherit);
    white-space: normal;
    overflow-wrap: anywhere;
}

.qs-offline2-network.online {
    color: var(--qs-green);
}

.qs-offline2-network.offline,
.qs-offline2-danger,
.qs-offline2-remove {
    /* Keep the same semantic warning token as the Grid actions, including compatible scoped overrides. */
    color: var(--qbm-danger, var(--qs-red));
}

.qs-offline2-alert {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.qs-offline2-alert .qs-button {
    margin-inline-start: auto;
}

.qs-offline2-gate,
.qs-offline2-unlock,
.qs-offline2-editor-gate,
.qs-offline2-view-gate {
    display: grid;
    gap: 0.8rem;
    justify-items: start;
    padding: clamp(1.1rem, 3vw, 2rem);
}

.qs-offline2-pin {
    width: min(100%, 28rem);
}

.qs-offline2-notice,
.qs-offline2-prepared-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border-inline-start: 4px solid var(--qbm-accent, #4f46e5);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: color-mix(in srgb, var(--qbm-accent, #4f46e5) 9%, transparent);
}

.qs-offline2-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
}

.qs-offline2-status-card {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 1rem;
}

.qs-offline2-status-card > span,
.qs-offline2-status-card > small {
    color: var(--qs-muted);
}

.qs-offline2-status-card > strong {
    overflow-wrap: anywhere;
    font-size: 1.45rem;
}

.qs-offline2-actions-panel,
.qs-offline2-work-panel,
.qs-offline2-refresh-panel,
.qs-offline2-danger-zone,
.qs-offline2-conversions,
.qs-offline2-attachments {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.qs-offline2-actions,
.qs-offline2-button-row,
.qs-offline2-row-actions,
.qs-offline2-view-actions,
.qs-offline2-line-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.qs-offline2-danger-zone {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-color: color-mix(in srgb, var(--qbm-danger, var(--qs-red)) 45%, var(--qs-border));
}

.qs-offline2-prepare-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 0.8rem;
    width: 100%;
}

.qs-offline2-check,
.qs-offline2-file {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.5rem;
}

.qs-offline2-section-head,
.qs-offline2-lines-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.qs-offline2-view-toggle {
    display: inline-flex;
    gap: 0.35rem;
}

.qs-offline2-filter {
    max-width: 34rem;
}

/* Shared controls keep filtering and ordering identical before either responsive view is rendered. */
.qs-offline2-collection-tools {
    display: grid;
    grid-template-columns: minmax(14rem, 2fr) minmax(10rem, 1fr) auto;
    align-items: end;
    gap: 0.8rem;
}

.qs-offline2-sort-direction {
    min-height: 2.5rem;
}

/* One bounded pager serves both Grid and Card so switching views cannot change row membership. */
.qs-offline2-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.qs-offline2-pager > span {
    color: var(--qs-muted);
    font-variant-numeric: tabular-nums;
}

.qs-offline2-grid-wrap,
.qs-offline2-lines-grid {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.qs-offline2-grid {
    min-width: 760px;
}

.qs-offline2-cards,
.qs-offline2-line-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 0.8rem;
}

.qs-offline2-document-card,
.qs-offline2-attachment-card,
.qs-offline2-line-card {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    border: 1px solid var(--qs-border);
    border-radius: 0.85rem;
    padding: 0.9rem;
    /* Match online Cards instead of painting white behind the dark appearance's light text. */
    background: var(--qs-surface);
    color: var(--qs-text);
}

.qs-offline2-document-card > header,
.qs-offline2-attachment-card > header,
.qs-offline2-line-card > header,
.qs-offline2-line-card > footer {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.7rem;
}

.qs-offline2-document-card > header > div {
    display: grid;
    gap: 0.2rem;
}

.qs-offline2-document-card dl,
.qs-offline2-line-card dl,
.qs-offline2-document-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0;
}

.qs-offline2-document-card dl > div,
.qs-offline2-line-card dl > div,
.qs-offline2-document-facts > div {
    min-width: 0;
}

.qs-offline2-document-card dt,
.qs-offline2-line-card dt,
.qs-offline2-document-facts dt {
    color: var(--qs-muted);
    font-size: 0.78rem;
}

.qs-offline2-document-card dd,
.qs-offline2-line-card dd,
.qs-offline2-document-facts dd {
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
}

.qs-offline2-document-builder {
    display: grid;
    gap: 1rem;
}

.qs-offline2-document-builder .document-builder-top {
    display: grid;
    grid-template-columns: minmax(17rem, 0.8fr) minmax(24rem, 1.4fr);
    gap: 1rem;
}

.qs-offline2-document-builder .document-builder-panel {
    padding: 1rem;
}

.qs-offline2-customer-form,
.qs-offline2-line-fields,
.qs-offline2-charge-fields,
.qs-offline2-upload-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.qs-offline2-customer-form .full,
.qs-offline2-line-fields .full,
.qs-offline2-upload-form .full {
    grid-column: 1 / -1;
}

.qs-offline2-field-help {
    color: var(--qs-muted);
    font-size: 0.84rem;
}

.qs-offline2-totals-panel,
.qs-offline2-document-footer {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.65fr);
    gap: 1rem;
    align-items: start;
}

.qs-offline2-notes,
.qs-offline2-charge-fields {
    grid-column: 1;
}

.qs-offline2-totals {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.qs-offline2-totals > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.qs-offline2-totals dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.qs-offline2-totals .total {
    border-top: 1px solid var(--qs-border);
    padding-top: 0.55rem;
    font-size: 1.1rem;
    font-weight: 800;
}

.qs-offline2-editor-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    border: 1px solid var(--qs-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
    /* The sticky editor action surface follows the Cards beneath it in either appearance. */
    background: color-mix(in srgb, var(--qs-surface) 94%, transparent);
    backdrop-filter: blur(8px);
}

.qs-offline2-document-sheet {
    display: grid;
    gap: 1.2rem;
    padding: clamp(1rem, 3vw, 2rem);
}

.qs-offline2-document-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 2px solid var(--qs-border);
    padding-bottom: 1rem;
}

.qs-offline2-document-title > div {
    display: grid;
    gap: 0.25rem;
}

.qs-offline2-document-title strong {
    font-size: 1.35rem;
}

.qs-offline2-document-total {
    text-align: end;
}

.qs-offline2-read-lines {
    display: grid;
    gap: 0.8rem;
}

.qs-offline2-document-notes {
    min-height: 5rem;
}

.qs-offline2-upload-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: end;
}

[dir="rtl"] .qs-offline2-document-total {
    text-align: start;
}

@media (max-width: 980px) {
    .qs-offline2-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qs-offline2-prepare-form,
    .qs-offline2-document-builder .document-builder-top,
    .qs-offline2-totals-panel,
    .qs-offline2-document-footer {
        grid-template-columns: 1fr;
    }

    .qs-offline2-notes,
    .qs-offline2-charge-fields {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .qs-offline2-page,
    .qs-offline2-editor,
    .qs-offline2-view {
        padding: 0.45rem;
    }

    .qs-offline2-header,
    .qs-offline2-view-header,
    .qs-offline2-section-head,
    .qs-offline2-lines-head,
    .qs-offline2-danger-zone,
    .qs-offline2-document-title {
        align-items: stretch;
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    .qs-offline2-status-grid,
    .qs-offline2-customer-form,
    .qs-offline2-line-fields,
    .qs-offline2-charge-fields,
    .qs-offline2-upload-form,
    .qs-offline2-collection-tools,
    .qs-offline2-document-facts {
        grid-template-columns: 1fr;
    }

    .qs-offline2-filter {
        max-width: none;
    }

    .qs-offline2-customer-form .full,
    .qs-offline2-line-fields .full,
    .qs-offline2-upload-form .full {
        grid-column: auto;
    }

    .qs-offline2-actions .qs-button,
    .qs-offline2-view-actions .qs-button,
    .qs-offline2-button-row .qs-button {
        flex: 1 1 10rem;
    }

    .qs-offline2-editor-actions {
        position: static;
    }
}

@media print {
    /* Customer-document paper colors are independent of the operator's dark/light screen appearance. */
    .qs-offline2-document-card,
    .qs-offline2-attachment-card,
    .qs-offline2-line-card {
        background: #fff;
        color: #000;
        border-color: #d6d9e0;
    }

    .qs-offline2-document-card dt,
    .qs-offline2-line-card dt {
        color: #667085;
    }

    .sidebar,
    .qbm-topbar,
    .qs-no-print,
    .qs-offline2-prepared-banner,
    #blazor-error-ui {
        display: none !important;
    }

    .content,
    .qs-offline2-view,
    .qs-offline2-document-sheet {
        width: 100%;
        max-width: none;
        margin: 0;
        border: 0;
        box-shadow: none;
        padding: 0;
        background: #fff;
        color: #000;
    }

    .qs-offline2-line-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* OE5: an unvalidated local copy carries a visible provisional marker on screen and on paper. */
.qs-offline2-provisional {
    margin: 0 0 0.75rem;
    border: 1px dashed currentColor;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}

/* OE5: the document-language selector sits with the view actions and wraps on phones without overflow. */
.qs-offline2-view-actions .qs-print-language-field {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 100%;
}