@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* ------------------------------------------------------------------------
   Design tokens now come from the SHARED QBM design system:
   _content/BAComponents/css/qbm-theme.css (loaded before this file in
   index.html). It defines the canonical QCRM tokens (--surface, --accent,
   --space-*, --radius-*, --shadow-* …) for BOTH themes and bridges every
   --qs-* name QSales uses to those tokens, so the light/dark toggle drives
   the entire QSales UI with zero per-page changes. Do NOT re-declare --qs-*
   here — that would shadow the shared bridge and break theming.
   ------------------------------------------------------------------------ */

html,
body {
    color: var(--qs-text);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    min-height: 100%;
}

/* Border-box sizing prevents shared controls from adding padding beyond phone widths. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background: var(--qs-bg);
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    color: var(--qs-primary);
    text-decoration: none;
}

/* Language selector sizing follows QSalesView so the shared login dialog has the same control rhythm. */
.qsv-language-selector {
    min-width: 160px;
    max-width: 220px;
}

/* Compact language selectors fit beside unauthenticated controls and future signed-in menus. */
.qsv-language-selector.compact {
    min-width: 150px;
}

/* The selector label stays visible for accessibility while preserving a compact control shape. */
.qsv-language-label {
    display: block;
    margin-bottom: 0.2rem;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
}

/* RTL languages need right-aligned operational text and matching document flow. */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Keep icon spacing readable when the document switches to right-to-left flow. */
html[dir="rtl"] .nav-icon {
    margin-right: 0;
    margin-left: 5px;
}

/* Dropdown internals can render separately, so force selected language text to follow RTL flow. */
html[dir="rtl"] .qsv-language-selector,
html[dir="rtl"] .qsv-language-selector .k-picker,
html[dir="rtl"] .qsv-language-selector .k-input-inner,
html[dir="rtl"] .qsv-language-selector .k-input-value-text {
    direction: rtl;
    text-align: right;
}

/* Keep Farsi/Arabic language labels visible instead of letting the dropdown arrow cover the text. */
html[dir="rtl"] .qsv-language-selector .k-input-value-text {
    display: block;
    overflow: hidden;
    padding-inline-end: 0.35rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qs-startup,
.qs-loading {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.qs-startup {
    flex-direction: column;
    gap: 0.75rem;
    color: var(--qs-text);
}

.qs-startup-logo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-card);
}

/* The shell, sidebar, and navigation styles now live in MainLayout.razor.css and NavMenu.razor.css
   (the QSales top navbar was replaced by the shared sibling sidebar + mobile drawer). */

.qs-action-icon {
    align-items: center;
    background: var(--qs-primary);
    border-radius: 50%;
    color: #ffffff;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.qs-page {
    /* Wide cap (QCRM-style) so list grids and card grids use the free horizontal space instead of
       leaving large left/right margins; still centered on very wide monitors. */
    margin: 0 auto;
    max-width: 1600px;
}

.qs-page-header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Header action groups mirror QCRM document pages while staying touch-friendly. */
.qs-header-actions,
.qs-editor-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qs-editor-title {
    flex: 1 1 auto;
}

.qs-kicker {
    color: var(--qs-muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 4px;
    text-transform: uppercase;
}

.qs-page h1 {
    font-size: 1.55rem;
    line-height: 1.15;
    margin: 0;
}

.qs-panel {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 56, 74, 0.04);
    margin-bottom: 14px;
    padding: 14px;
}

.qs-panel h2,
.qs-panel-title h2 {
    font-size: 1rem;
    margin: 0 0 12px;
}

.qs-panel-title {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.qs-action-grid,
.qs-dashboard-grid,
.qs-editor-grid {
    display: grid;
    gap: 12px;
}

.qs-action-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 14px;
}

.qs-dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.qs-editor-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.qs-action-card,
.qs-pick {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    color: var(--qs-text);
    cursor: pointer;
    min-height: 74px;
    padding: 12px;
    text-align: left;
}

.qs-action-card {
    align-items: center;
    display: flex;
    gap: 10px;
    font-weight: 700;
}

.qs-action-card:hover,
.qs-pick:hover {
    border-color: var(--qs-primary);
}

.qs-document-row {
    align-items: flex-start;
    border-top: 1px solid #eef2f4;
    color: inherit;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 10px 0;
}

.qs-document-row:hover {
    color: inherit;
}

.qs-document-row:first-child {
    border-top: 0;
}

.qs-document-row-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qs-document-row-main strong,
.qs-document-row-main span,
.qs-document-row-main small {
    overflow-wrap: anywhere;
}

.qs-document-row-main small,
.qs-document-row span,
.qs-document-row-meta {
    color: var(--qs-muted);
    display: block;
    font-size: .9rem;
}

.qs-document-row-meta {
    align-items: flex-end;
    display: grid;
    gap: 4px;
    text-align: right;
}

.qs-document-status {
    /* Neutral by default: only statuses the app actually recognizes earn a success/open/danger tone. */
    background: color-mix(in srgb, var(--qs-muted) 15%, transparent);
    border-radius: 8px;
    color: var(--qs-muted) !important;
    display: inline-flex !important;
    font-size: .78rem !important;
    font-weight: 700;
    justify-self: end;
    padding: 4px 8px;
}

.qs-empty {
    color: var(--qs-muted);
    margin: 4px 0;
}

.qs-status,
.qs-alert,
.qs-success {
    border-radius: 8px;
    display: inline-flex;
    font-size: .9rem;
    padding: 8px 10px;
}

.qs-status-ok,
.qs-success {
    background: var(--qs-green-soft);
    color: var(--qs-green-text);
}

.qs-status-warn,
.qs-alert {
    background: var(--qs-amber-soft);
    color: var(--qs-amber-text);
}

.qs-alert,
.qs-success {
    display: block;
    margin-bottom: 14px;
}

.qs-filter-bar,
.qs-line-inputs,
.qs-two-col,
.qs-scan-row {
    display: grid;
    gap: 10px;
}

.qs-filter-bar {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
    padding: 12px;
}

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

.qs-scan-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

/* Keeps inline customer creation compact and consistent with the existing QSales panels. */
.qs-inline-actions {
    display: flex;
    justify-content: flex-end;
    margin: 2px 0 10px;
}

/* Separates the temporary entry fields without creating a nested card inside the customer panel. */
.qs-create-box {
    border-top: 1px solid var(--qs-border);
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 12px;
}

.qs-field,
.qs-filter-bar label,
.qs-line-inputs label {
    display: grid;
    gap: 5px;
}

.qs-field span,
.qs-filter-bar span,
.qs-line-inputs span {
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-input {
    background: var(--qs-surface);
    border: 1px solid #c9d4dc;
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 44px;
    padding: 9px 10px;
    width: 100%;
}

.qs-input:focus {
    border-color: var(--qs-primary);
    box-shadow: 0 0 0 3px rgba(23, 72, 94, .14);
    outline: none;
}

.qs-textarea {
    min-height: 92px;
    resize: vertical;
}

.qs-check {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.qs-button,
.qs-icon-button {
    align-items: center;
    background: var(--qs-surface);
    border: 1px solid #b8c6cf;
    border-radius: 8px;
    color: var(--qs-text);
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    min-height: 44px;
    padding: 9px 14px;
}

.qs-button:hover:not(:disabled),
.qs-icon-button:hover {
    border-color: var(--qs-primary);
}

.qs-button-primary {
    background: var(--qs-primary);
    border-color: var(--qs-primary);
    color: #ffffff;
}

.qs-button:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.qs-icon-button {
    height: 42px;
    min-height: 42px;
    padding: 0;
    width: 42px;
}

.qs-back-button {
    flex: 0 0 auto;
}

.qs-item-picks {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.qs-pick {
    display: grid;
    gap: 3px;
    min-height: 64px;
}

.qs-pick span {
    color: #667783;
}

.qs-pick em {
    color: var(--qs-primary);
    font-style: normal;
    font-weight: 700;
}

.qs-line-list {
    display: grid;
    gap: 12px;
}

.qs-line-card {
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    padding: 12px;
}

.qs-line-head,
.qs-line-total,
.qs-totals {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.qs-line-head {
    margin-bottom: 10px;
}

.qs-line-total {
    border-top: 1px solid #edf1f4;
    margin-top: 10px;
    padding-top: 10px;
}

.qs-totals {
    flex-wrap: wrap;
}

/* View summaries use dense field/value tiles rather than decorative cards, matching the list-first workflow. */
.qs-view-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.qs-view-summary div {
    background: var(--qs-surface-soft);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    min-height: 74px;
    padding: 10px;
}

.qs-view-summary span {
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-view-summary strong {
    overflow-wrap: anywhere;
}

.qs-totals span {
    background: var(--qs-primary-soft);
    border-radius: 8px;
    display: inline-flex;
    justify-content: space-between;
    min-width: 150px;
    padding: 8px 10px;
}

.qs-bottom-bar {
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--qs-border);
    bottom: 0;
    display: flex;
    gap: 8px;
    left: 0;
    overflow-x: auto;
    padding: 10px 14px;
    position: fixed;
    right: 0;
    z-index: 15;
}

.qs-bottom-bar .qs-button {
    flex: 0 0 auto;
}

/* On desktop the fixed document action bar starts after the sticky sidebar; on phones it spans full width. */
@media (min-width: 641px) {
    .qs-bottom-bar {
        left: 200px;
    }

    .page:has(.sidebar.collapsed) .qs-bottom-bar {
        left: 53px;
    }

    html[dir="rtl"] .qs-bottom-bar {
        left: 0;
        right: 200px;
    }

    html[dir="rtl"] .page:has(.sidebar.collapsed) .qs-bottom-bar {
        right: 53px;
    }
}

.qs-error {
    background: var(--qs-amber-soft);
    border: 1px solid #e8c47e;
    border-radius: 8px;
    display: grid;
    gap: 8px;
    padding: 12px;
}

/* Reports reuse compact bands instead of large decorative cards so phone users can scan quickly. */
.qs-report-filter-bar {
    align-items: end;
    grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(140px, 1fr)) auto;
}

.qs-segmented {
    background: var(--qs-surface-soft);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 44px;
    padding: 4px;
}

.qs-segmented-button {
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--qs-muted);
    cursor: pointer;
    font-weight: 700;
    min-height: 34px;
    padding: 6px 8px;
}

.qs-segmented-button.active {
    background: var(--qs-primary);
    color: #ffffff;
}

.qs-report-metrics {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.qs-report-metric {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    display: grid;
    gap: 6px;
    min-height: 84px;
    padding: 12px;
}

.qs-report-metric span {
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-report-metric strong {
    color: var(--qs-text);
    font-size: 1.35rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.qs-report-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qs-breakdown-list {
    display: grid;
    gap: 10px;
}

.qs-breakdown-row {
    display: grid;
    gap: 5px;
}

.qs-breakdown-row-top {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.qs-breakdown-row-top strong,
.qs-breakdown-row-top span {
    overflow-wrap: anywhere;
}

.qs-breakdown-row small {
    color: var(--qs-muted);
}

.qs-breakdown-bar {
    background: #edf1f4;
    border-radius: 8px;
    height: 9px;
    overflow: hidden;
}

.qs-breakdown-bar span {
    background: #2f7f62;
    border-radius: inherit;
    display: block;
    height: 100%;
    width: var(--bar-width, 0%);
}

#blazor-error-ui {
    background: var(--qs-amber-soft);
    bottom: 0;
    display: none;
    left: 0;
    padding: 10px 14px;
    position: fixed;
    right: 0;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    position: absolute;
    right: 12px;
}

@media (max-width: 820px) {
    .qs-main {
        padding-left: 10px;
        padding-right: 10px;
    }

    .qs-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    .qs-action-grid,
    .qs-dashboard-grid,
    .qs-editor-grid,
    .qs-filter-bar,
    .qs-report-filter-bar,
    .qs-report-grid,
    .qs-report-metrics,
    .qs-view-summary {
        grid-template-columns: 1fr;
    }

    .qs-action-card {
        min-height: 58px;
    }

    .qs-header-actions .qs-button,
    .qs-page-header .qs-status {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .qsv-language-popup {
        /* The login selector popup must stay within the phone viewport. */
        max-height: min(220px, 45vh);
    }
}

@media (max-width: 520px) {
    .qs-page h1 {
        font-size: 1.35rem;
    }

    .qs-main--login {
        /* The shared login component has fixed desktop-friendly widths, so clamp it inside the phone viewport. */
        overflow-x: clip;
        padding: .75rem;
    }

    .qbm-login-page,
    .qbm-login-shell,
    .qbm-login-intro,
    .qbm-login-cues,
    .qbm-login-card {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .qbm-login-page {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }

    .qbm-login-cues {
        flex-wrap: wrap;
    }

    .qbm-input {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .qs-line-inputs,
    .qs-two-col,
    .qs-scan-row {
        grid-template-columns: 1fr;
    }

    .qs-document-row {
        display: grid;
    }

    .qs-document-row-meta {
        align-items: start;
        text-align: left;
    }

    .qs-document-status {
        justify-self: start;
    }

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

    .qs-bottom-bar {
        padding-bottom: 12px;
    }
}

/* ==========================================================================
   QCRM POLISH LAYER
   Mirrors QCRM's visual language (cards, gradients, document-builder, sticky
   totals, line table <-> mobile cards) on QSales's stack. Authored phone-first.
   Appended last so it refines the existing .qs-* classes via the cascade.
   ========================================================================== */

/* Subtle QCRM-style page background + modern type. Theme-aware: derives the
   gradient from canonical surface tokens so it reads correctly in dark AND light. */
body {
    font-family: var(--qs-font);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--surface-alt) 55%, var(--surface)) 0%,
            var(--surface) 48%,
            color-mix(in srgb, var(--accent) 6%, var(--surface)) 100%);
    background-attachment: fixed;
}

/* Cards gain QCRM elevation + radius. */
.qs-panel {
    border-radius: var(--qs-radius-md);
    box-shadow: var(--qs-shadow-card);
}

.qs-panel h2,
.qs-panel-title h2 {
    color: var(--qs-heading);
}

/* Inputs: consistent rounded fields with an accent focus ring (native + bound). */
.qs-input {
    border: 1px solid var(--qs-border-strong);
    border-radius: var(--qs-field-radius);
    background: var(--qs-surface);
    color: var(--qs-text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.qs-input:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--qs-primary) 34%, var(--qs-border-strong));
}

.qs-input:focus {
    border-color: var(--qs-primary);
    box-shadow: 0 0 0 4px var(--qs-ring);
    outline: none;
}

.qs-input:disabled {
    background: var(--qs-surface-muted);
    color: var(--qs-muted);
}

/* Buttons: QCRM rounded language; primary is an accent gradient. */
.qs-button {
    border: 1px solid var(--qs-border-strong);
    border-radius: var(--qs-radius-sm);
    background: var(--qs-surface);
    color: var(--qs-heading);
    transition: transform .06s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

.qs-button:hover:not(:disabled) {
    border-color: var(--qs-primary);
    color: var(--qs-primary);
    background: var(--qs-primary-soft);
}

.qs-button-primary {
    background: linear-gradient(180deg, var(--qs-primary), var(--qs-primary-strong));
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 8px 20px var(--qs-ring);
}

.qs-button-primary:hover:not(:disabled) {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(180deg, var(--qs-primary), var(--qs-primary-strong));
    filter: brightness(1.05);
    transform: translateY(-1px);
}

/* ---- Document header (QCRM form-header-modern) ---- */
.form-header-modern {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 18px 20px;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--qs-primary) 10%, transparent), transparent 62%),
        var(--qs-surface);
    box-shadow: var(--qs-shadow-card);
}

.form-header-modern .header-content {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.back-button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--qs-border-strong);
    border-radius: 12px;
    background: var(--qs-surface);
    color: var(--qs-muted);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}

.back-button:hover {
    border-color: var(--qs-primary);
    color: var(--qs-primary);
    background: var(--qs-primary-soft);
    transform: translateX(-1px);
}

.title-section {
    min-width: 0;
}

.title-section h1 {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    line-height: 1.15;
    color: var(--qs-heading);
}

.title-section .title-sub {
    margin: 4px 0 0;
    color: var(--qs-muted);
    font-size: .9rem;
}

/* Header metadata chips (status / total / number). */
.document-builder-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.document-builder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    max-width: 240px;
    padding: .3rem .7rem;
    border: 1px solid var(--qs-border);
    border-radius: 999px;
    background: var(--qs-surface-muted);
    color: var(--qs-heading);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-builder-chip.status {
    background: linear-gradient(180deg, var(--qs-primary), var(--qs-primary-strong));
    border-color: transparent;
    color: #ffffff;
}

.document-builder-chip.total {
    background: var(--qs-primary-soft);
    border-color: color-mix(in srgb, var(--qs-primary) 26%, var(--qs-border));
    color: var(--qs-primary-strong);
}

/* ---- Modern alerts ---- */
.alert-modern {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-sm);
    background: var(--qs-surface);
    color: var(--qs-text);
    font-size: .92rem;
    line-height: 1.45;
    box-shadow: var(--qs-shadow-sm);
}

.alert-modern .alert-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.alert-modern.error-modern {
    border-color: color-mix(in srgb, var(--qs-red) 45%, var(--qs-border));
    background: var(--qs-red-soft);
    color: var(--qs-red-text);
}

.alert-modern.success-modern {
    border-color: color-mix(in srgb, var(--qs-green) 45%, var(--qs-border));
    background: var(--qs-green-soft);
    color: var(--qs-green-text);
}

.alert-modern.warning-modern {
    border-color: color-mix(in srgb, var(--qs-amber) 45%, var(--qs-border));
    background: var(--qs-amber-soft);
    color: var(--qs-amber-text);
}

/* ---- Toast notifications (BAAlert / TelerikNotification) ----
   Telerik's default toast text is small, and the Telerik theme loads AFTER app.css, so these
   overrides are scoped through BAAlert's container classes (.notification.k-notification-container)
   to out-specify the stock rule regardless of stylesheet order. */
.notification.k-notification-container .k-notification {
    padding: 12px 16px;
    border-radius: var(--qs-radius-sm);
}

.notification.k-notification-container .k-notification-content {
    font-size: 1rem;
    line-height: 1.5;
    white-space: normal;
    max-width: 46ch;
}

.notification.k-notification-container .k-notification-actions .k-icon {
    font-size: 1.05rem;
}

/* ---- Document builder layout (top panels / lines / bottom) ---- */
.document-builder-top {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

/* The immediate route shell uses only native disabled fields and never initializes incomplete selector data. */
.qs-editor-first-paint {
    pointer-events: none;
}

/* The native modal enters the browser top layer so navigation and document controls stay unavailable during loading. */
.qs-editor-loading-overlay[open] {
    background: color-mix(in srgb, var(--qs-surface) 88%, transparent);
    border: 0;
    box-sizing: border-box;
    color: var(--qs-text);
    cursor: wait;
    display: grid;
    height: 100dvh;
    inset: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: hidden;
    padding: 24px;
    place-items: center;
    position: fixed;
    touch-action: none;
    user-select: none;
    width: 100vw;
    z-index: 1200;
}

/* The backdrop supplies a safe fallback tint around any viewport edge reserved by the browser. */
.qs-editor-loading-overlay::backdrop {
    background: color-mix(in srgb, var(--qs-surface) 88%, transparent);
}

/* The loading banner keeps the disabled state explicit while reference data is still in flight. */
.qs-editor-loading-banner {
    align-items: center;
    background: color-mix(in srgb, var(--qs-primary) 10%, var(--qs-surface));
    border: 1px solid color-mix(in srgb, var(--qs-primary) 28%, var(--qs-border));
    border-radius: 10px;
    color: var(--qs-heading);
    display: flex;
    font-weight: 700;
    gap: 10px;
    margin: 0;
    max-width: min(520px, calc(100vw - 32px));
    padding: 12px 14px;
}

/* The compact transform-only spinner is continuously visible without animating the whole form. */
.qs-editor-loading-banner .qs-editor-loading-spinner {
    border-width: 2px;
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
}

.qs-editor-first-paint-fields,
.qs-editor-first-paint-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.qs-editor-first-paint-line {
    grid-template-columns: minmax(0, 2fr) minmax(110px, .5fr) minmax(140px, .75fr);
}

.qs-editor-first-paint .qs-input:disabled {
    cursor: default;
    opacity: 1;
    background: var(--qs-surface-soft);
    color: var(--qs-muted);
}

@media (max-width: 720px) {
    .qs-editor-first-paint-fields,
    .qs-editor-first-paint-line {
        grid-template-columns: 1fr;
    }
}

.document-builder-panel {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-md);
    box-shadow: var(--qs-shadow-card);
    padding: 16px;
    margin-bottom: 14px;
}

.document-builder-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.document-builder-panel-heading h2,
.document-builder-panel-heading h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--qs-heading);
}

.document-builder-grid {
    display: grid;
    gap: 12px;
}

.document-builder-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.document-builder-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.document-builder-field.full {
    grid-column: 1 / -1;
}

.document-builder-field > label,
.qs-flabel {
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 700;
}

.required-label::after {
    content: " *";
    color: var(--qs-red-strong);
    font-weight: 700;
}

/* ---- Lines panel: container-query swap table <-> cards ---- */
.document-builder-lines {
    container-type: inline-size;
    container-name: lines-panel;
}

.lines-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--qs-border);
}

.lines-heading-group {
    display: grid;
    gap: 2px;
}

.lines-heading-group h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--qs-heading);
}

.lines-count {
    color: var(--qs-muted);
    font-size: .85rem;
    font-weight: 600;
}

.qs-additem {
    display: grid;
    gap: 8px;
    min-width: min(320px, 100%);
    flex: 1 1 280px;
}

.qs-additem-search {
    display: grid;
    gap: 10px;
    margin: 4px 0 14px;
}

.lines-table-container {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.lines-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
}

.lines-table thead th {
    background: var(--qs-table-header-bg);
    padding: .6rem .55rem;
    text-align: left;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--qs-muted);
    border-bottom: 1px solid var(--qs-border);
    white-space: nowrap;
}

.lines-table tbody td {
    padding: .45rem .5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--qs-border);
}

.lines-table .line-row:hover {
    background: var(--qs-table-row-hover);
}

.lines-table .line-description-row td {
    background: var(--qs-surface-soft);
    padding: .55rem .7rem .8rem;
}

.line-description-editor {
    display: grid;
    gap: .35rem;
}

.line-description-editor label {
    color: var(--qs-muted);
    font-size: .78rem;
    font-weight: 700;
}

.lines-table .qs-input {
    min-height: 38px;
    padding: 6px 8px;
}

.lines-table .col-item strong {
    color: var(--qs-heading);
}

.lines-table .col-total {
    text-align: right;
}

.line-total-value {
    display: inline-block;
    font-weight: 700;
    color: var(--qs-heading);
    white-space: nowrap;
}

.col-item { min-width: 170px; }
.col-location,
.col-job { min-width: 150px; }
.col-qty,
.col-price,
.col-discount { width: 92px; }
.col-uom,
.col-tax { width: 132px; }
.col-total { width: 116px; }
.col-actions { width: 52px; text-align: center; }

.lines-table .empty-row td {
    text-align: center;
    padding: 1.6rem;
    color: var(--qs-muted);
    font-style: italic;
}

.line-remove-button,
.line-card-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--qs-border-strong);
    border-radius: 10px;
    background: var(--qs-surface);
    color: var(--qs-muted);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.line-card-remove {
    width: 44px;
    height: 44px;
    min-height: 44px;
    color: var(--qs-red-strong);
}

.line-remove-button:hover,
.line-card-remove:hover {
    color: var(--qs-red-strong);
    border-color: var(--qs-red-strong);
    background: var(--qs-red-soft);
}

/* Mobile line cards (shown when the panel is narrow). */
.line-cards-mobile {
    display: none;
}

/* Razor creates this mobile-first fallback before panel measurement, so it must remain usable if JS is unavailable. */
.line-cards-mobile.active-line-layout {
    display: grid;
    gap: .9rem;
}

.line-item-card,
.line-card-empty {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-sm);
    background: var(--qs-surface-soft);
    padding: .85rem;
    box-shadow: var(--qs-shadow-sm);
}

.line-card-empty {
    text-align: center;
    color: var(--qs-muted);
}

.line-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: .6rem;
    align-items: start;
    margin-bottom: .6rem;
}

.line-card-item {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.line-card-item strong {
    color: var(--qs-heading);
    overflow-wrap: anywhere;
}

.line-card-item small {
    color: var(--qs-muted);
    font-size: .78rem;
}

.line-card-field {
    display: grid;
    gap: .3rem;
    min-width: 0;
}

.line-card-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-top: .6rem;
}

.line-card-fields.secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: .6rem;
}

.line-card-description {
    display: grid;
    gap: .3rem;
    margin-top: .65rem;
}

.qs-document-settings {
    display: grid;
    gap: 1rem;
    padding: .25rem;
}

.qs-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

/* ============================================================
   Item search results dialog — a professional, filterable Telerik
   grid for disambiguating a broad "search anything" match.
   ============================================================ */

/* ---- Window chrome ---- */
.qs-item-search-window.k-window {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-lg);
    overflow: hidden;
    background: var(--qs-surface);
}

.qs-item-search-window .k-window-titlebar {
    padding: 16px 18px;
    background: var(--qs-surface);
    border-bottom: 1px solid var(--qs-border);
    margin: 0;
}

.qs-item-search-window .k-window-title {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--qs-heading);
}

.qs-item-search-title-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--qs-primary-soft);
    color: var(--qs-primary);
    font-size: 1rem;
}

.qs-item-search-title-main {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}

.qs-item-search-title-sub {
    font-size: .74rem;
    font-weight: 600;
    color: var(--qs-muted);
}

.qs-item-search-count {
    margin-inline-start: 4px;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--qs-primary-soft);
    color: var(--qs-primary-strong);
    font-size: .74rem;
    font-weight: 700;
}

.qs-item-search-window .k-window-content {
    padding: 0;
    background: var(--qs-surface);
}

/* ---- Dialog body layout ---- */
.qs-item-search-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 14px;
}

/* ---- Toolbar ---- */
.qs-item-search-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.qs-item-search-hint {
    margin: 0;
    color: var(--qs-muted);
    font-size: .85rem;
    max-width: 62ch;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.qs-item-search-hint .oi {
    color: var(--qs-primary);
    font-size: .8rem;
}

.qs-item-search-columns-toggle {
    white-space: nowrap;
    min-height: 38px;
    padding: 7px 12px;
}

.qs-item-search-columns-toggle .caret {
    font-size: .6rem;
    opacity: .7;
}

/* ---- Column chooser (toggle chips) ---- */
.qs-item-search-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
    background: var(--qs-surface-soft);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-md);
}

.qs-item-search-columns-label {
    width: 100%;
    margin: 0 0 2px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qs-muted);
}

.qs-col-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--qs-border-strong);
    background: var(--qs-surface);
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.qs-col-chip-mark {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1.5px solid var(--qs-border-strong);
    font-size: .55rem;
    color: transparent;
    transition: inherit;
}

.qs-col-chip:hover {
    border-color: var(--qs-primary);
    color: var(--qs-heading);
}

.qs-col-chip.on {
    background: var(--qs-primary-soft);
    border-color: var(--qs-primary);
    color: var(--qs-primary-strong);
}

.qs-col-chip.on .qs-col-chip-mark {
    background: var(--qs-primary);
    border-color: var(--qs-primary);
    color: #fff;
}

.qs-col-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--qs-ring);
}

/* ---- Grid shell + Telerik overrides ---- */
.qs-item-search-grid {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-md);
    overflow: hidden;
    box-shadow: var(--qs-shadow-sm);
}

.qs-item-search-window .k-grid {
    border: 0;
    font-family: var(--qs-font);
    background: var(--qs-surface);
}

.qs-item-search-window .k-grid .k-grid-header,
.qs-item-search-window .k-grid .k-grid-header-wrap {
    border-color: var(--qs-border);
}

.qs-item-search-window .k-grid .k-grid-header {
    background: var(--qs-table-header-bg);
}

.qs-item-search-window .k-grid .k-header,
.qs-item-search-window .k-grid .k-table-th {
    background: transparent;
    border-color: var(--qs-border);
}

.qs-item-search-window .k-grid .k-column-title,
.qs-item-search-window .k-grid .k-header .k-link {
    color: var(--qs-heading);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .01em;
}

.qs-item-search-window .k-grid .k-filter-row .k-table-th {
    padding-top: 6px;
    padding-bottom: 8px;
    background: var(--qs-surface);
}

.qs-item-search-window .k-grid .k-filter-row .k-input,
.qs-item-search-window .k-grid .k-filter-row .k-picker {
    border-radius: var(--qs-field-radius);
    border-color: var(--qs-border-strong);
    min-height: 34px;
}

.qs-item-search-window .k-grid .k-table-td {
    border-color: var(--qs-border);
    color: var(--qs-text);
    font-size: .86rem;
    padding-top: 9px;
    padding-bottom: 9px;
}

.qs-item-search-window .k-grid .k-master-row {
    cursor: pointer;
    transition: background .12s ease;
}

.qs-item-search-window .k-grid .k-master-row:hover > .k-table-td {
    background: var(--qs-table-row-hover);
}

.qs-item-search-window .k-grid .k-master-row > .k-table-td:first-child {
    font-weight: 600;
    color: var(--qs-heading);
}

/* Selected row: brand fill + a left accent bar instead of the stock Kendo blue. */
.qs-item-search-window .k-grid tr.k-selected > .k-table-td,
.qs-item-search-window .k-grid .k-master-row.k-selected > .k-table-td,
.qs-item-search-window .k-grid td.k-selected {
    background: var(--qs-primary-soft);
    color: var(--qs-heading);
}

.qs-item-search-window .k-grid .k-master-row.k-selected > .k-table-td:first-child {
    box-shadow: inset 3px 0 0 0 var(--qs-primary);
}

.qs-item-search-window .k-grid td.k-text-right,
.qs-item-search-window .k-grid .k-table-td.qs-price {
    font-variant-numeric: tabular-nums;
}

.qs-item-search-window .k-grid .k-pager {
    border-top: 1px solid var(--qs-border);
    background: var(--qs-surface-soft);
    color: var(--qs-muted);
}

/* ---- Footer ---- */
.qs-item-search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--qs-border);
}

.qs-item-search-selection {
    display: inline-flex;
    align-items: center;
    font-size: .88rem;
    color: var(--qs-text);
}

.qs-item-search-selection-hint {
    color: var(--qs-muted);
}

.qs-item-search-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--qs-primary-soft);
    color: var(--qs-primary-strong);
    font-weight: 600;
}

.qs-item-search-selected-chip .oi {
    font-size: .72rem;
}

.qs-item-search-actions {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

.qs-item-search-actions .qs-button {
    min-width: 104px;
}

/* Scoped so the primary action stays brand-filled no matter where Telerik's reset lands in the cascade. */
.qs-item-search-window .qs-item-search-actions .qs-button-primary {
    background: var(--qs-primary);
    border-color: var(--qs-primary);
    color: #fff;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .28);
}

.qs-item-search-window .qs-item-search-actions .qs-button-primary:hover:not(:disabled) {
    background: var(--qs-primary-strong);
    border-color: var(--qs-primary-strong);
    color: #fff;
}

.line-card-field label,
.line-card-description label,
.line-card-extra summary {
    color: var(--qs-muted);
    font-size: .78rem;
    font-weight: 700;
}

.line-card-extra {
    margin-top: .7rem;
    border-top: 1px solid var(--qs-border);
    padding-top: .6rem;
}

.line-card-extra summary {
    cursor: pointer;
}

.line-card-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .7rem;
    padding-top: .6rem;
    border-top: 1px solid var(--qs-border);
}

.line-card-total span {
    color: var(--qs-muted);
}

.line-card-total strong {
    color: var(--qs-heading);
    font-size: 1.05rem;
}

/* Swap the desktop table for stacked cards when the panel itself is narrow. */
@container lines-panel (max-width: 720px) {
    .document-builder-lines .lines-table-container {
        display: none !important;
    }

    .document-builder-lines .line-cards-mobile {
        display: grid !important;
        gap: .9rem;
    }
}

@container lines-panel (max-width: 420px) {
    .document-builder-lines .line-card-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-builder-lines .line-card-fields > :nth-child(3) {
        grid-column: 1 / -1;
    }
}

/* Viewport fallback for browsers without container queries. */
@media (max-width: 820px) {
    .document-builder-lines .lines-table-container {
        display: none !important;
    }

    .document-builder-lines .line-cards-mobile {
        display: grid !important;
        gap: .9rem;
    }
}

/* Razor renders one selected layout, so later viewport changes must never hide that active control tree. */
.document-builder-lines .lines-table-container.active-line-layout {
    display: block !important;
}

/* ---- Bottom: more options + sticky totals ---- */
.document-builder-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    align-items: start;
}

.document-builder-more {
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-md);
    background: var(--qs-surface);
    box-shadow: var(--qs-shadow-card);
}

.document-builder-more > summary {
    cursor: pointer;
    padding: .85rem 1rem;
    color: var(--qs-heading);
    font-weight: 700;
}

.document-builder-more[open] > summary {
    border-bottom: 1px solid var(--qs-border);
}

.document-builder-more .document-builder-grid {
    padding: 1rem;
}

.document-builder-totals {
    position: sticky;
    top: 12px;
    align-self: start;
}

.totals-box {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-md);
    box-shadow: var(--qs-shadow-card);
    padding: 1rem 1.15rem;
}

.total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    font-size: .95rem;
}

.total-row span {
    color: var(--qs-muted);
}

.total-row strong {
    color: var(--qs-heading);
}

.total-row.grand-total {
    margin-top: .4rem;
    padding-top: .7rem;
    border-top: 2px solid var(--qs-border);
    font-size: 1.1rem;
}

.total-row.grand-total span {
    color: var(--qs-heading);
    font-weight: 700;
}

.total-row.grand-total strong {
    color: var(--qs-primary-strong);
    font-size: 1.25rem;
}

/* Bottom action bar adopts the accent + blur of QCRM sticky form actions. */
.qs-bottom-bar {
    background: color-mix(in srgb, var(--qs-surface) 92%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--qs-border);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

/* ---- Status badges (lists / view) ---- */
.qs-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.qs-badge.draft {
    background: var(--qs-surface-muted);
    color: var(--qs-muted);
    border: 1px solid var(--qs-border);
}

.qs-badge.open {
    background: var(--qs-primary-soft);
    color: var(--qs-primary-strong);
}

.qs-badge.success {
    background: var(--qs-green-soft);
    color: var(--qs-green-text);
}

/* ---- Responsive: collapse builder to one column on tablet/phone ---- */
@media (max-width: 900px) {
    .document-builder-top,
    .document-builder-bottom {
        grid-template-columns: minmax(0, 1fr);
    }

    .document-builder-totals {
        position: static;
    }
}

@media (max-width: 560px) {
    .document-builder-grid.two {
        grid-template-columns: minmax(0, 1fr);
    }

    .form-header-modern {
        padding: 14px;
    }

    .document-builder-chips {
        width: 100%;
    }
}

/* RTL: mirror the back-button nudge. */
html[dir="rtl"] .back-button:hover {
    transform: translateX(1px);
}

/* ============================================================
   Telerik controls inside the QCRM-style document editor.
   The editor uses TelerikComboBox / NumericTextBox / DatePicker;
   these rules align them to the --qs-* tokens and the dense
   lines table, and keep them phone-first.
   ============================================================ */

/* Line Items header: heading on the left, scan + Add Line on the right. */
.lines-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lines-header-actions .qs-scan-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: min(240px, 100%);
}

.qs-add-line {
    white-space: nowrap;
}

/* Header + builder fields: full width, QSales radius, comfortable touch height. */
.document-builder .k-input,
.document-builder .k-picker,
.document-builder-field .k-input,
.document-builder-field .k-picker,
.document-builder .k-numerictextbox,
.document-builder .k-datepicker {
    width: 100%;
    border-radius: var(--qs-field-radius);
}

.document-builder-field .k-input,
.document-builder-field .k-picker {
    min-height: 44px;
}

/* Keep Telerik editor text at the mobile-safe baseline so iOS does not zoom on focus. */
.document-builder .k-input-inner,
.document-builder .k-input-value-text {
    font-size: 16px;
}

/* Accent the focus ring to the QSales primary instead of the stock Kendo blue. */
.document-builder .k-input:focus-within,
.document-builder .k-picker:focus-within {
    border-color: var(--qs-primary);
    box-shadow: 0 0 0 3px var(--qs-ring);
}

/* Dense desktop lines table uses compact editors. */
.lines-table .k-input,
.lines-table .k-picker,
.lines-table .k-numerictextbox {
    width: 100%;
    min-height: 38px;
    height: 38px;
    border-radius: var(--qs-field-radius);
}

.lines-table .k-input-inner {
    padding-block: 4px;
}

/* Mobile line cards keep full-width touch-friendly editors. */
.line-cards-mobile .k-input,
.line-cards-mobile .k-picker,
.line-cards-mobile .k-numerictextbox {
    width: 100%;
    border-radius: var(--qs-field-radius);
}

@media (max-width: 560px) {
    /* On phones the scan row and Add Line stack full width for easy thumb reach. */
    .lines-header-actions {
        width: 100%;
    }

    .lines-header-actions .qs-scan-row {
        min-width: 100%;
        flex: 1 1 100%;
    }

    .qs-add-line {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================================
   QSales operational polish: dashboard, lists, view state, and
   mobile action placement adapted from the QCRM workbench style.
   ============================================================ */

/* Page subtitles keep headers useful without turning screens into marketing pages. */
.qs-page-subtitle,
.qs-work-header p,
.qs-panel-title p {
    color: var(--qs-muted);
    font-size: .92rem;
    line-height: 1.4;
    margin: 4px 0 0;
}

/* Dashboard header follows QCRM's work-header pattern: title/status first, actions directly below. */
.qs-work-header {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Quick actions are compact links so the dashboard stays an operational workspace. */
.qs-quick-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.qs-quick-add a {
    align-items: center;
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    color: var(--qs-heading);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 700;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
}

/* Home reports background editor preparation without blocking dashboard charts, lists, or navigation. */
.qs-home-warmup {
    align-items: center;
    background: color-mix(in srgb, var(--qs-primary) 8%, var(--qs-surface));
    border: 1px solid color-mix(in srgb, var(--qs-primary) 24%, var(--qs-border));
    border-radius: 8px;
    color: var(--qs-heading);
    display: inline-flex;
    font-size: .9rem;
    font-weight: 700;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 10px;
}

/* The compact spinner shows background activity without competing with dashboard content. */
.qs-home-warmup .qs-spinner {
    border-width: 2px;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.qs-quick-add a:hover {
    background: var(--qs-primary-soft);
    border-color: var(--qs-primary);
    color: var(--qs-primary-strong);
}

/* Dashboard summaries use varied tones for fast scanning across document kinds. */
.qs-summary-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 14px;
}

.qs-summary-card {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    box-shadow: var(--qs-shadow-sm);
    color: var(--qs-heading);
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 14px;
}

.qs-summary-card:hover {
    border-color: var(--qs-primary);
    color: var(--qs-heading);
}

.qs-summary-card span,
.qs-summary-card small {
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-summary-card strong {
    font-size: 1.55rem;
    line-height: 1.1;
}

.qs-summary-card.info {
    border-top: 4px solid var(--qs-info);
}

.qs-summary-card.accent {
    border-top: 4px solid var(--qs-primary);
}

.qs-summary-card.success {
    border-top: 4px solid var(--qs-green);
}

.qs-summary-card.warning {
    border-top: 4px solid var(--qs-amber);
}

.qs-summary-card.cash {
    border-top: 4px solid var(--qs-green);
}

/* Seller dashboard keeps home focused on current-user performance instead of generic navigation. */
.qs-sales-command-center {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}

.qs-sales-hero-panel {
    align-items: stretch;
    /* Theme-aware: light keeps the airy white→cyan wash; dark becomes a proper
       dark surface so the (light) heading and subtitle stay readable. */
    background: linear-gradient(135deg,
        var(--qs-surface) 0%,
        color-mix(in srgb, var(--qs-surface) 72%, var(--qs-bg)) 58%,
        color-mix(in srgb, var(--qs-info) 12%, var(--qs-surface)) 100%);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    box-shadow: var(--qs-shadow-card);
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
    padding: 18px;
}

.qs-sales-hero-panel h2 {
    color: var(--qs-heading);
    font-size: 1.7rem;
    line-height: 1.12;
    margin: 0;
}

.qs-sales-hero-panel p {
    color: var(--qs-muted);
    line-height: 1.45;
    margin: 6px 0 0;
    max-width: 680px;
}

.qs-sales-hero-total {
    align-items: flex-start;
    background: #0f172a;
    border-radius: 8px;
    color: #ffffff;
    display: grid;
    gap: 8px;
    min-height: 120px;
    padding: 16px;
}

.qs-sales-hero-total span,
.qs-sales-kpi-strip span {
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.qs-sales-hero-total strong {
    align-self: end;
    font-size: 1.8rem;
    line-height: 1;
}

.qs-sales-kpi-strip {
    display: grid;
    gap: 10px;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qs-sales-kpi-strip article {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    min-height: 82px;
    padding: 13px;
}

.qs-sales-kpi-strip span {
    color: var(--qs-muted);
}

.qs-sales-kpi-strip strong {
    color: var(--qs-heading);
    font-size: 1.35rem;
}

.qs-sales-dashboard-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qs-chart-panel {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    box-shadow: var(--qs-shadow-sm);
    display: grid;
    gap: 14px;
    min-height: 260px;
    padding: 16px;
}

.qs-chart-panel-wide {
    grid-column: 1 / -1;
}

.qs-chart-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.qs-chart-heading h2 {
    color: var(--qs-heading);
    font-size: 1rem;
    margin: 0;
}

.qs-chart-heading p {
    color: var(--qs-muted);
    font-size: .86rem;
    margin: 4px 0 0;
}

.qs-chart-heading a {
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}

.qs-dashboard-bar-chart {
    display: grid;
    gap: 12px;
}

.qs-dashboard-bar-row {
    display: grid;
    gap: 7px;
}

.qs-dashboard-bar-label {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.qs-dashboard-bar-label strong {
    color: var(--qs-heading);
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qs-dashboard-bar-label span {
    color: var(--qs-muted);
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}

.qs-dashboard-bar-track {
    background: var(--qs-surface-muted);
    border-radius: 999px;
    height: 9px;
    overflow: hidden;
}

.qs-dashboard-bar-track span {
    background: linear-gradient(90deg, var(--qs-primary), var(--qs-info));
    border-radius: inherit;
    display: block;
    height: 100%;
    width: var(--bar-width, 0%);
}

.qs-dashboard-column-chart {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    min-height: 230px;
}

.qs-dashboard-column {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-template-rows: auto minmax(120px, 1fr) auto;
    justify-items: center;
    min-width: 0;
}

.qs-dashboard-column-value {
    color: var(--qs-heading);
    font-size: .82rem;
    font-weight: 800;
}

.qs-dashboard-column span {
    align-self: end;
    background: linear-gradient(180deg, var(--qs-green), var(--qs-primary));
    border-radius: 7px 7px 3px 3px;
    display: block;
    min-height: 8px;
    width: 42px;
    height: var(--bar-height, 0%);
}

.qs-dashboard-column small {
    color: var(--qs-muted);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    min-height: 2.4em;
    text-align: center;
}

.qs-chart-empty {
    min-height: 190px;
}

/* Workbench split mirrors QCRM's queue plus right-rail dashboard layout. */
.qs-workbench-grid {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
}

.qs-work-queues {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.qs-right-rail {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.qs-work-panel {
    margin-bottom: 0;
}

/* Session values render as dense facts rather than a decorative card. */
.qs-session-list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
}

.qs-session-list div {
    align-items: center;
    border-bottom: 1px solid var(--qs-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 0;
}

.qs-session-list div:last-child {
    border-bottom: 0;
}

.qs-session-list dt {
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-session-list dd {
    color: var(--qs-heading);
    font-weight: 800;
    margin: 0;
}

/* Loading states keep QSales pages from flashing empty panels while data is in flight. */
.qs-loading-state {
    align-items: center;
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 160px;
    text-align: center;
}

.qs-loading-state p {
    color: var(--qs-muted);
    font-weight: 700;
    margin: 0;
}

.qs-spinner {
    animation: qs-spin .8s linear infinite;
    border: 3px solid color-mix(in srgb, var(--qs-primary) 18%, var(--qs-border));
    border-radius: 50%;
    border-top-color: var(--qs-primary);
    display: inline-block;
    height: 34px;
    width: 34px;
}

@keyframes qs-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Alert actions stay inline on desktop and stack on narrow screens. */
.qs-alert-with-action {
    align-items: center;
    justify-content: space-between;
}

.qs-alert-with-action > span:not(.alert-icon) {
    flex: 1 1 auto;
}

/* Empty states are compact and action-oriented for list and detail pages. */
.qs-empty-state {
    align-items: center;
    border: 1px dashed var(--qs-border-strong);
    border-radius: 8px;
    color: var(--qs-muted);
    display: grid;
    gap: 10px;
    justify-items: center;
    min-height: 150px;
    padding: 22px;
    text-align: center;
}

.qs-empty-state strong {
    color: var(--qs-heading);
}

.qs-empty-state-icon {
    color: var(--qs-primary);
    font-size: 1.7rem;
}

/* Document rows are denser and expose status, date, total, and line count in one scan. */
.qs-document-list {
    display: grid;
}

.qs-document-row {
    border-color: var(--qs-border);
    border-radius: 8px;
    padding: 11px 8px;
}

.qs-document-row:hover {
    background: var(--qs-surface-soft);
}

.qs-document-row-title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.qs-document-row-meta small {
    color: var(--qs-muted);
    font-size: .78rem;
}

.qs-document-status.open {
    background: var(--qs-primary-soft);
    color: var(--qs-primary-strong) !important;
}

.qs-document-status.success {
    background: var(--qs-green-soft);
    color: var(--qs-green-text) !important;
}

.qs-document-status.danger {
    background: var(--qs-red-soft);
    color: var(--qs-red-text) !important;
}

/* Sort toggles sit in the results bar; the active field carries an accent and a direction arrow. */
.qs-sort-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.qs-sort-toggles .qs-button {
    font-size: .82rem;
    padding: 4px 10px;
}

.qs-button.qs-sort-active {
    background: var(--qs-primary-soft);
    border-color: var(--qs-primary-strong);
    color: var(--qs-primary-strong);
}

/* Local pager for long document result sets; mirrors the phone card pager rhythm. */
.qs-list-pager {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 12px;
}

.qs-list-pager-status {
    color: var(--qs-muted);
    font-size: .9rem;
}

/* List pages use a fixed filter rhythm and a result summary band above rows. */
.qs-list-filter-bar {
    align-items: end;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
}

.qs-list-results-bar {
    align-items: center;
    border-bottom: 1px solid var(--qs-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: -2px 0 8px;
    padding-bottom: 10px;
}

.qs-list-results-bar div {
    display: grid;
    gap: 2px;
}

.qs-list-results-bar strong {
    color: var(--qs-heading);
}

.qs-list-results-bar span {
    color: var(--qs-muted);
    font-size: .86rem;
    font-weight: 700;
}

/* Right-aligned cluster in the results bar: the card/grid toggle plus any summary value. */
.qs-list-results-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Card/grid view switch, styled as a segmented control like the QCRM list pages. */
.qs-view-toggle {
    background: var(--qs-surface-soft);
    border: 1px solid var(--qs-border);
    border-radius: var(--qs-radius-sm, 8px);
    display: inline-flex;
    gap: 4px;
    padding: 3px;
}

.qs-view-btn {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--qs-radius-sm, 6px);
    color: var(--qs-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    gap: 6px;
    min-height: 36px;
    padding: 6px 12px;
}

.qs-view-btn:not(.active):hover {
    color: var(--qs-heading);
}

.qs-view-btn.active {
    background: var(--qs-surface);
    border-color: var(--qs-border);
    box-shadow: var(--qs-shadow-sm);
    color: var(--qs-primary-strong);
}

/* Master-data list filters allow search-only item pages and date-bounded customer totals to share one shell. */
.qs-master-filter-bar {
    align-items: end;
    grid-template-columns: minmax(220px, 1fr) auto auto;
}

.qs-customer-filter-bar {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto auto;
}

/* Master tables use QSales colors without introducing a separate grid dependency. */
.qs-master-table-wrap {
    overflow-x: auto;
    width: 100%;
}

.qs-master-table {
    border-collapse: collapse;
    min-width: 760px;
    width: 100%;
}

.qs-master-table th,
.qs-master-table td {
    border-bottom: 1px solid var(--qs-border);
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}

.qs-master-table th {
    background: var(--qs-table-header-bg);
    color: var(--qs-muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.qs-master-table td strong,
.qs-master-card strong {
    color: var(--qs-heading);
}

/* Keep long item and customer names inside each card instead of stretching the card row. */
.qs-master-card strong {
    display: block;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
}

.qs-master-table td small,
.qs-master-card span {
    color: var(--qs-muted);
    display: block;
    font-size: .84rem;
    margin-top: 3px;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.qs-master-table tbody tr:hover {
    background: var(--qs-table-row-hover);
}

.qs-master-actions {
    text-align: right;
    white-space: nowrap;
}

/* Card view: a responsive grid of cards that fills the available width (multiple columns on wide screens,
   a single column on phones). Visibility is owned by the page's card/grid toggle, not by media queries. */
.qs-master-card-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.qs-master-card {
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
}

/* Allow nested card content to shrink before its text wraps. */
.qs-master-card > div {
    min-width: 0;
}

.qs-master-card-fields {
    display: grid;
    gap: 4px;
}

/* Master paging mirrors the QSalesView list behavior while preserving QSales cached row sources. */
.qs-master-pager {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    margin-top: 14px;
}

.qs-master-page-button {
    align-items: center;
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    color: var(--qs-heading);
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
}

.qs-master-page-button:not(:disabled):hover {
    background: var(--qs-table-row-hover);
}

.qs-master-page-button:disabled {
    color: var(--qs-muted);
    cursor: not-allowed;
    opacity: .62;
}

.qs-master-page-status {
    color: var(--qs-muted);
    display: grid;
    font-size: .84rem;
    gap: 2px;
    justify-items: center;
    line-height: 1.25;
    min-width: 150px;
    text-align: center;
    white-space: nowrap;
}

.qs-master-page-status strong {
    color: var(--qs-heading);
    font-size: .9rem;
}

/* Stock panels sit below the item list so they can be dismissed without resetting search state. */
.qs-stock-panel {
    margin-top: 14px;
}

.qs-stock-table {
    min-width: 520px;
}

.qs-inline-loading {
    align-items: center;
    color: var(--qs-muted);
    display: flex;
    gap: 10px;
    min-height: 56px;
}

/* Saved-document view uses a single hero row plus compact fact tiles. */
.qs-view-header {
    margin-bottom: 14px;
}

.qs-view-hero {
    align-items: center;
    border-bottom: 1px solid var(--qs-border);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.qs-view-hero h2 {
    color: var(--qs-heading);
    font-size: 1.35rem;
    margin: 7px 0 2px;
    overflow-wrap: anywhere;
}

.qs-view-hero p {
    color: var(--qs-muted);
    margin: 0;
}

.qs-view-hero > strong {
    color: var(--qs-primary-strong);
    font-size: 1.35rem;
    white-space: nowrap;
}

/* Workflow strip shows the current document point without creating unsupported actions. */
.qs-workflow-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -4px 0 14px;
}

.qs-workflow-step {
    align-items: center;
    /* Plain text + dot: the strip is a progress indicator, and must not read as clickable pills. */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--qs-muted);
    cursor: default;
    user-select: none;
    display: inline-flex;
    font-size: .82rem;
    font-weight: 800;
    gap: 7px;
    min-height: 32px;
    padding: 6px 11px;
}

.qs-workflow-step.active {
    background: var(--qs-primary-soft);
    border-color: color-mix(in srgb, var(--qs-primary) 34%, var(--qs-border));
    color: var(--qs-primary-strong);
    /* Weight plus a larger dot keep the current step recognizable without relying on color alone. */
    font-weight: 700;
}

.qs-workflow-step.active .qs-workflow-dot {
    height: 10px;
    width: 10px;
}

.qs-workflow-dot {
    background: currentColor;
    border-radius: 999px;
    height: 8px;
    width: 8px;
}

/* Fixed editor actions now separate save/back from conversion choices for cleaner thumb reach. */
.qs-bottom-primary,
.qs-conversion-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

/* Document save continuations mirror QCRM's visible split action; this late rule wins over base buttons. */
.qs-save-actions {
    align-items: stretch;
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}

.qs-save-actions-primary,
.qs-save-actions-secondary {
    line-height: 1.2;
    min-width: 120px;
    text-align: center;
    white-space: normal;
}

.qs-save-actions-secondary {
    background: color-mix(in srgb, var(--qs-surface) 90%, var(--qs-primary) 10%);
    border-color: color-mix(in srgb, var(--qs-primary) 42%, var(--qs-border-strong));
    color: var(--qs-primary-strong);
    box-shadow: var(--qs-shadow-sm);
}

.qs-save-actions-secondary:hover:not(:disabled),
.qs-save-actions-secondary:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--qs-surface) 82%, var(--qs-primary) 18%);
    border-color: var(--qs-primary);
    color: var(--qs-primary-strong);
}

.qs-conversion-actions {
    margin-left: auto;
}

html[dir="rtl"] .qs-conversion-actions {
    margin-left: 0;
    margin-right: auto;
}

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

    .qs-sales-hero-panel,
    .qs-sales-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .qs-workbench-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .qs-work-header,
    .qs-view-hero,
    .qs-list-results-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .qs-list-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .qs-master-filter-bar,
    .qs-customer-filter-bar {
        grid-template-columns: minmax(0, 1fr);
    }

    .qs-master-pager {
        /* Mobile paging keeps the same previous/status/next order as QSalesView phone lists. */
        gap: 8px;
        grid-template-columns: minmax(0, 1fr);
    }

    .qs-master-page-button {
        width: 100%;
    }

    .qs-alert-with-action {
        align-items: stretch;
    }

    .qs-alert-with-action .qs-button {
        width: 100%;
    }

    .qs-bottom-bar {
        flex-wrap: wrap;
    }

    .qs-bottom-primary,
    .qs-conversion-actions {
        flex: 1 1 100%;
        overflow-x: auto;
    }

    .qs-save-actions {
        flex: 1 1 100%;
    }

    .qs-save-actions-primary,
    .qs-save-actions-secondary {
        flex: 1 1 120px;
    }

    .qs-conversion-actions {
        margin-left: 0;
    }
}

@media (max-width: 520px) {
    .qs-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .qs-sales-hero-panel {
        padding: 14px;
    }

    .qs-sales-kpi-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .qs-dashboard-column-chart {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .qs-dashboard-column span {
        width: 34px;
    }

    .qs-quick-add a {
        flex: 1 1 100%;
        justify-content: center;
    }

    .qs-document-row-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .qs-view-hero > strong {
        white-space: normal;
    }
}

/* ============================================================
   Page-polish shared components (appended).
   New, self-contained classes the list/dashboard/view polish
   pass applies directly in markup. They reuse the existing
   --qs-* tokens, are authored phone-first, and stay RTL-safe.
   Existing classes above are NOT modified; the tonal summary
   variants below are hyphenated, standalone aliases that carry
   the full card base so a page can drop them on any surface.
   ============================================================ */

/* Standalone tonal summary cards (hyphenated block form).
   Mirror the .qs-summary-card base so the accent variants can be
   used without the base class, while matching its tokens exactly. */
.qs-summary-card-info,
.qs-summary-card-success,
.qs-summary-card-warning {
    background: var(--qs-surface);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    box-shadow: var(--qs-shadow-sm);
    color: var(--qs-heading);
    display: grid;
    gap: 5px;
    min-height: 104px;
    padding: 14px;
}

.qs-summary-card-info span,
.qs-summary-card-info small,
.qs-summary-card-success span,
.qs-summary-card-success small,
.qs-summary-card-warning span,
.qs-summary-card-warning small {
    color: var(--qs-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-summary-card-info strong,
.qs-summary-card-success strong,
.qs-summary-card-warning strong {
    font-size: 1.55rem;
    line-height: 1.1;
}

.qs-summary-card-info:hover,
.qs-summary-card-success:hover,
.qs-summary-card-warning:hover {
    border-color: var(--qs-primary);
    color: var(--qs-heading);
}

/* Border-top accents distinguish the document tone at a glance. */
.qs-summary-card-info {
    border-top: 4px solid var(--qs-info);
}

.qs-summary-card-success {
    border-top: 4px solid var(--qs-green);
}

.qs-summary-card-warning {
    border-top: 4px solid var(--qs-amber);
}

/* Priority emphasis for a document row: a 4px accent rail on the
   leading edge. Layers on .qs-document-row without changing layout. */
.qs-document-row-priority-accent {
    border-inline-start: 4px solid var(--qs-primary);
    padding-inline-start: 10px;
}

/* Getting-started panel: a first-run / empty-workspace call to
   action that keeps new users moving without a marketing block. */
.qs-getting-started-panel {
    display: grid;
    gap: 10px;
    border: 1px dashed var(--qs-border-strong);
    border-radius: var(--qs-radius-md);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--qs-primary) 7%, transparent), transparent 70%),
        var(--qs-surface);
    box-shadow: var(--qs-shadow-sm);
    padding: 18px;
    text-align: center;
    justify-items: center;
}

.qs-getting-started-panel strong {
    color: var(--qs-heading);
    font-size: 1.05rem;
}

.qs-getting-started-panel p {
    color: var(--qs-muted);
    line-height: 1.45;
    margin: 0;
    max-width: 52ch;
}

/* Action row inside the getting-started panel: wraps and centers
   so the primary next steps stay reachable on a phone. */
.qs-getting-started-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

@media (max-width: 520px) {
    .qs-getting-started-actions {
        width: 100%;
    }

    .qs-getting-started-actions .qs-button {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* RTL: mirror the results bar stacking and the row-meta alignment
   so right-to-left lists read naturally. */
html[dir="rtl"] .qs-list-results-bar {
    flex-direction: column-reverse;
}

html[dir="rtl"] .qs-document-row-meta {
    text-align: left;
}

/* Saved-document print preview: mirrors QCRM's preview-first flow while staying inside the QSales shell. */
.qs-print-page {
    /* Screen preview colors follow the active theme; print media replaces these with a white-paper palette. */
    --qs-print-surface: var(--qs-surface);
    --qs-print-surface-soft: var(--qs-surface-soft);
    --qs-print-text: var(--qs-text);
    --qs-print-heading: var(--qs-heading);
    --qs-print-muted: var(--qs-muted);
    --qs-print-border: var(--qs-border);
    --qs-print-accent: var(--qs-primary);
    --qs-print-filled-accent: #1d4ed8;
    --qs-print-filled-accent-hover: #1e40af;
    color: var(--qs-print-text);
    margin: 0 auto;
    max-width: 1120px;
    padding: 24px;
}

.qs-print-toolbar {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.qs-print-toolbar h1,
.qs-print-header h2,
.qs-print-party-grid h3 {
    color: var(--qs-print-heading);
    margin: 0;
}

.qs-print-toolbar p,
.qs-print-header p,
.qs-print-party-grid p,
.qs-print-notes p {
    color: var(--qs-print-muted);
    margin: 0;
}

.qs-print-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    /* Allow the action group to shrink inside the toolbar so its controls wrap instead of
       overflowing (and visually colliding) when the screen gets narrow. */
    min-width: 0;
}

.qs-print-template-picker {
    /* Template selection is screen-only and mirrors QCRM's print-preview picker behavior. */
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.qs-print-template-picker span {
    color: var(--qs-print-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-print-template-picker select {
    /* Pair themed control surfaces with themed text so the selected template stays visible in both themes. */
    background: var(--qs-print-surface);
    border: 1px solid var(--qs-border-strong);
    border-radius: 8px;
    color: var(--qs-print-heading);
    min-height: 38px;
    padding: 6px 10px;
}

.qs-print-template-picker select option {
    /* Native option menus need an explicit foreground/background pair on Windows browsers. */
    background: var(--qs-print-surface);
    color: var(--qs-print-heading);
}

.qs-print-language-field {
    /* Document/output language sits next to the template picker and is screen-only (hidden when printing). */
    align-items: center;
    display: inline-flex;
    gap: 8px;
}

.qs-print-language-label {
    color: var(--qs-print-muted);
    font-size: .82rem;
    font-weight: 700;
}

.qs-print-language-selector {
    min-width: 150px;
}

.qs-print-language-selector .k-picker {
    /* The component theme loads later, so important keeps the print language control theme-aware. */
    background: var(--qs-print-surface) !important;
    border-color: var(--qs-border-strong) !important;
    color: var(--qs-print-heading) !important;
}

.qs-print-language-selector .k-input-inner,
.qs-print-language-selector .k-input-value-text,
.qs-print-language-selector .k-button,
.qs-print-language-selector .k-svg-icon {
    /* Selected language text, dropdown button, and icon all inherit the same readable theme color. */
    color: inherit !important;
}

.qs-print-language-selector .k-input-inner,
.qs-print-language-selector .k-button {
    /* Keep the component's inner field and arrow button transparent over the themed picker surface. */
    background: transparent !important;
    border-color: transparent !important;
}

.qs-print-bilingual-toggle {
    /* English-copy placement is a screen-only print preference, matching the document language selector. */
    align-items: center;
    color: var(--qs-print-muted);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 700;
    gap: 6px;
}

.qs-print-bilingual-toggle input {
    height: 16px;
    width: 16px;
}

.qs-print-actions .qs-button {
    /* Print-toolbar actions use explicit theme pairs so their labels and icons remain visible. */
    background: var(--qs-surface);
    border-color: var(--qs-border-strong);
    color: var(--qs-heading);
}

.qs-print-actions .qs-button:hover:not(:disabled) {
    /* Secondary hover keeps strong contrast while still signaling the active accent. */
    background: var(--qs-primary-soft);
    border-color: var(--qs-primary);
    color: var(--qs-primary);
}

.qs-print-actions .qs-button-primary {
    /* QCRM's darker print-action blue keeps white button text accessible in both QSales themes. */
    background: var(--qs-print-filled-accent);
    border-color: var(--qs-print-filled-accent);
    color: #ffffff;
}

.qs-print-actions .qs-button-primary:hover:not(:disabled) {
    /* The hover fill remains dark enough for the white action label and icon. */
    background: var(--qs-print-filled-accent-hover);
    border-color: var(--qs-print-filled-accent-hover);
    color: #ffffff;
}

.qs-print-actions .qs-button .oi {
    /* Toolbar icons follow their button label instead of retaining a theme-specific inherited color. */
    color: currentColor;
}

.qs-print-template-picker select:focus-visible,
.qs-print-actions .qs-button:focus-visible {
    /* Keyboard focus stays visible on light and dark preview surfaces. */
    outline: 2px solid var(--qs-primary);
    outline-offset: 2px;
}

.qs-print-language-selector .k-picker:focus-within {
    /* Match the native picker and buttons with the shared QSales focus treatment. */
    border-color: var(--qs-primary) !important;
    box-shadow: 0 0 0 3px var(--qs-ring) !important;
}

/* The printed sheet carries its own dir attribute so a right-to-left document renders independently of the
   surrounding shell direction. The sheet already uses logical text-align, so only the document-level
   direction needs to be pinned for predictable output (e.g. an English document printed inside an RTL UI). */
.qs-print-sheet[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

.qs-print-sheet[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

.qs-print-sheet {
    /* The screen sheet follows the active theme; relative positioning also anchors the Trial watermark. */
    position: relative;
    background: var(--qs-print-surface);
    border: 1px solid var(--qs-print-border);
    border-radius: var(--qs-radius-md);
    box-shadow: var(--qs-shadow-card);
    color: var(--qs-print-text);
    padding: 32px;
}

.qs-trial-watermark {
    /* The watermark remains visible without preventing selection or print controls around the sheet. */
    position: absolute;
    inset: 50% auto auto 50%;
    color: rgba(172, 33, 33, 0.18);
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    pointer-events: none;
    text-transform: uppercase;
    transform: translate(-50%, -50%) rotate(-28deg);
    white-space: nowrap;
    z-index: 10;
}

.qs-print-sheet.template-ruled .qs-print-lines td {
    /* Ruled prints make long item lists easier to follow on paper. */
    border-bottom-color: #b7c4d6;
}

.qs-print-sheet.template-accent .qs-print-header {
    /* Accent prints give customer-facing copies a stronger document header. */
    background: #164b65;
    border-radius: 8px;
    color: #fff;
    margin: -10px -10px 22px;
    padding: 22px;
}

.qs-print-sheet.template-accent .qs-print-header h2,
.qs-print-sheet.template-accent .qs-print-header p,
.qs-print-sheet.template-accent .qs-print-summary dt,
.qs-print-sheet.template-accent .qs-print-summary dd {
    color: #fff;
}

.qs-print-sheet.template-accent .qs-print-lines th {
    background: #e8f5f4;
    color: #164b65;
}

.qs-print-sheet.template-compact {
    /* Compact prints reduce whitespace for saved documents with many lines. */
    padding: 22px;
}

.qs-print-sheet.template-compact .qs-print-header,
.qs-print-sheet.template-compact .qs-print-party-grid,
.qs-print-sheet.template-compact .qs-print-bottom {
    gap: 12px;
}

.qs-print-sheet.template-compact .qs-print-lines th,
.qs-print-sheet.template-compact .qs-print-lines td {
    padding: 6px;
}

.qs-print-sheet.template-ledger .qs-print-lines {
    /* Ledger prints emphasize row structure for internal review and reconciliations. */
    border: 1px solid #8da0b8;
}

.qs-print-sheet.template-ledger .qs-print-lines th,
.qs-print-sheet.template-ledger .qs-print-lines td {
    border-left: 1px solid #d3dce8;
    border-right: 1px solid #d3dce8;
}

.qs-print-sheet.template-formal {
    /* Formal prints keep a cleaner customer-facing copy with a strong top rule. */
    border-top: 6px solid #263238;
    box-shadow: none;
}

.qs-print-sheet.template-formal .qs-print-header {
    border-bottom-color: #263238;
}

.qs-print-sheet.template-formal .qs-print-lines th {
    background: #263238;
    color: #fff;
}

.qs-print-sheet.template-delivery .qs-print-summary,
.qs-print-sheet.template-delivery .qs-print-party-grid {
    /* Delivery prints reduce header density so item and address information stays prominent. */
    grid-template-columns: minmax(0, 1fr);
}

.qs-print-sheet.template-delivery .qs-print-lines th:nth-child(5),
.qs-print-sheet.template-delivery .qs-print-lines td:nth-child(5),
.qs-print-sheet.template-delivery .qs-print-lines th:nth-child(6),
.qs-print-sheet.template-delivery .qs-print-lines td:nth-child(6) {
    display: none;
}

.qs-print-header {
    align-items: start;
    border-bottom: 1px solid var(--qs-print-border);
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 0.9fr);
    padding-bottom: 22px;
}

.qs-print-summary,
.qs-print-line-cards dl,
.qs-print-totals {
    margin: 0;
}

.qs-print-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.qs-print-summary div,
.qs-print-totals div {
    border-bottom: 1px solid var(--qs-print-border);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 8px 0;
}

.qs-print-summary dt,
.qs-print-totals dt,
.qs-print-line-cards dt,
.qs-print-label {
    color: var(--qs-print-muted);
    font-size: 0.78rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
}

.qs-print-summary dd,
.qs-print-totals dd,
.qs-print-line-cards dd {
    color: var(--qs-print-heading);
    font-weight: 700;
    margin: 0;
    text-align: end;
}

.qs-print-party-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 22px 0;
}

.qs-print-party-grid > div,
.qs-print-line-cards section,
.qs-print-notes {
    background: var(--qs-print-surface-soft);
    border: 1px solid var(--qs-print-border);
    border-radius: var(--qs-radius-sm);
    padding: 14px;
}

.qs-print-lines {
    border-collapse: collapse;
    margin-top: 18px;
    width: 100%;
}

.qs-print-lines th,
.qs-print-lines td {
    border-bottom: 1px solid var(--qs-print-border);
    padding: 10px 8px;
    text-align: start;
    vertical-align: top;
}

.qs-print-lines th {
    background: var(--qs-print-surface-soft);
    color: var(--qs-print-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.qs-print-lines .numeric {
    text-align: end;
    white-space: nowrap;
}

.qs-print-line-cards {
    display: none;
    gap: 10px;
    margin-top: 16px;
}

.qs-print-line-cards section > div:first-child {
    align-items: center;
    display: flex;
    gap: 10px;
}

.qs-print-line-cards section > div:first-child span {
    align-items: center;
    /* White sequence numbers use the same accessible filled accent as the print action. */
    background: var(--qs-print-filled-accent);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    min-width: 28px;
}

.qs-print-line-cards p {
    color: var(--qs-print-muted);
    margin: 8px 0;
}

.qs-print-sheet .qs-empty-state {
    /* Empty saved documents use the same preview palette as populated sheets and printed output. */
    border-color: var(--qs-print-border);
    color: var(--qs-print-muted);
}

.qs-print-sheet .qs-empty-state strong {
    /* Empty-state headings remain distinct without returning to screen-theme colors during printing. */
    color: var(--qs-print-heading);
}

.qs-print-sheet .qs-empty-state .oi {
    /* The empty-state icon follows the document accent in both screen themes and on paper. */
    color: var(--qs-print-accent);
}

.qs-print-line-cards dl {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.qs-print-bottom {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    margin-top: 24px;
}

/* The totals box always occupies the trailing grid track so the grand total stays under the line "Total"
   column. Notes are optional, so without this the totals box would be the grid's only child and auto-place
   into the leading (1fr) track — landing on the wrong side (e.g. the left of an English document). Negative
   line numbers track the explicit grid's last column, so this is correct in both LTR and RTL and collapses
   to the single full-width column on the mobile breakpoint. */
.qs-print-bottom > .qs-print-totals {
    grid-column: -2 / -1;
}

.qs-print-totals {
    background: var(--qs-print-surface);
    border: 1px solid var(--qs-print-border);
    border-radius: var(--qs-radius-sm);
    padding: 6px 14px;
}

.qs-print-totals .grand-total {
    border-bottom: 0;
    color: var(--qs-print-accent);
    font-size: 1.08rem;
}

.qs-print-totals .grand-total dt,
.qs-print-totals .grand-total dd {
    color: var(--qs-print-accent);
}

.qs-print-sheet.bilingual-labels .eyebrow,
.qs-print-sheet.bilingual-labels .qs-print-summary dt,
.qs-print-sheet.bilingual-labels .qs-print-party-grid .qs-print-label,
.qs-print-sheet.bilingual-labels .qs-print-lines th,
.qs-print-sheet.bilingual-labels .qs-print-line-cards dt,
.qs-print-sheet.bilingual-labels .qs-print-totals dt,
.qs-print-sheet.bilingual-labels .qs-print-notes .qs-print-label {
    /* QSalesOutputText joins translated and English labels with a newline; only labels should stack. */
    white-space: pre-line;
}

@media (max-width: 760px) {
    .qs-print-page {
        padding: 14px;
    }

    .qs-print-toolbar,
    .qs-print-header,
    .qs-print-party-grid,
    .qs-print-bottom {
        grid-template-columns: 1fr;
    }

    .qs-print-toolbar {
        display: grid;
    }

    /* Stack every toolbar control in one full-width column so the template picker, language
       selector and action buttons can never overlap on narrow phone screens. */
    .qs-print-actions {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
    }

    .qs-print-template-picker,
    .qs-print-language-field,
    .qs-print-bilingual-toggle,
    .qs-print-actions .qs-button {
        width: 100%;
    }

    /* Put each picker's label above its control; side-by-side labels collide with long
       localized text (e.g. "Template language") once the row is full width. */
    .qs-print-template-picker,
    .qs-print-language-field {
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
    }

    .qs-print-template-picker select,
    .qs-print-language-selector {
        max-width: none;
        width: 100%;
    }

    .qs-print-sheet {
        padding: 18px;
    }

    .qs-print-summary,
    .qs-print-line-cards dl {
        grid-template-columns: 1fr;
    }

    .qs-print-lines {
        display: none;
    }

    .qs-print-line-cards {
        display: grid;
    }
}

/* Document attachment panels mirror QBM's saved-document workflow while staying compact on phone screens. */
.qs-attachments-panel {
    display: grid;
    gap: 14px;
}

.qs-attachments-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.qs-attachments-heading p {
    color: var(--qs-muted);
    font-size: .88rem;
    margin: 4px 0 0;
}

.qs-attachment-upload {
    border: 1px dashed var(--qs-border);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.qs-attachment-fields {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.qs-file-picker {
    align-items: center;
    background: var(--qs-surface-soft);
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    min-height: 42px;
    padding: 10px 14px;
    position: relative;
}

.qs-file-picker input[type="file"] {
    cursor: pointer;
    inset: 0;
    opacity: 0;
    position: absolute;
}

.qs-file-browse-button {
    /* The transparent file input covers the label, so the visible button must not intercept the picker click. */
    pointer-events: none;
}

/* Dropping a file on the picker highlights the target; the invisible input handles the drop natively. */
.qs-file-picker.dragover {
    background: var(--qs-primary-soft);
    border-color: var(--qs-primary);
}

/* Read-progress bar under the picker while an attachment is prepared and sent. */
.qs-upload-progress {
    background: color-mix(in srgb, var(--qs-muted) 20%, transparent);
    border-radius: 999px;
    height: 6px;
    margin-top: 8px;
    overflow: hidden;
    width: 100%;
}

.qs-upload-progress-bar {
    background: var(--qs-primary);
    border-radius: 999px;
    height: 100%;
    transition: width 0.15s ease;
}

.qs-attachment-list {
    display: grid;
    gap: 10px;
}

.qs-attachment-row {
    align-items: center;
    border: 1px solid var(--qs-border);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px;
}

.qs-row-actions {
    /* Row actions stay compact so master lists keep their QSalesView-style density. */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.qs-customer-detail-panel {
    margin-top: 16px;
}

.qs-customer-detail-grid {
    display: grid;
    gap: 10px 16px;
    grid-template-columns: max-content minmax(0, 1fr);
}

.qs-customer-detail-grid span {
    color: var(--qs-muted);
}

.qs-attachment-main {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.qs-attachment-main div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.qs-attachment-main strong,
.qs-attachment-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qs-attachment-main small {
    color: var(--qs-muted);
}

.qs-attachment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.qs-button.danger {
    color: var(--qs-red);
}

.qs-empty-state.compact,
.qs-loading-state.inline {
    min-height: 110px;
    padding: 18px;
}

@media (max-width: 720px) {
    .qs-attachments-heading,
    .qs-attachment-row {
        align-items: stretch;
        flex-direction: column;
    }

    .qs-attachment-fields {
        grid-template-columns: 1fr;
    }

    .qs-attachment-actions {
        justify-content: stretch;
    }

    .qs-attachment-actions .qs-button {
        flex: 1 1 140px;
    }
}

@media print {
    @page {
        margin: 12mm;
    }

    body {
        background: #fff !important;
    }

    .print-hidden,
    .sidebar,
    .mobile-nav-backdrop,
    .sidebar-flash-toggle,
    #blazor-error-ui {
        display: none !important;
    }

    .page,
    main,
    .content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .qs-print-page {
        margin: 0;
        max-width: none;
        padding: 0;
    }

    .qs-print-sheet {
        /* Actual paper/PDF output remains white with fixed dark text regardless of the active screen theme. */
        --qs-print-surface: #ffffff;
        --qs-print-surface-soft: #f8fafc;
        --qs-print-text: #111827;
        --qs-print-heading: #111827;
        --qs-print-muted: #475569;
        --qs-print-border: #d9e1ec;
        --qs-print-accent: #1d4ed8;
        background: var(--qs-print-surface);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        color: var(--qs-print-text);
        padding: 0;
    }

    .qs-print-sheet.template-accent .qs-print-header,
    .qs-print-sheet.template-formal .qs-print-lines th {
        /* Preserve colored print regions whose white text depends on the background for contrast. */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .qs-print-line-cards {
        display: none !important;
    }

    .qs-print-lines {
        display: table;
    }

    .qs-print-lines tr,
    .qs-print-party-grid > div,
    .qs-print-totals {
        break-inside: avoid;
    }
}

/* ==========================================================================
   THEME-SAFE PATCHES
   A handful of early rules used hardcoded light-only hex values for dividers
   and bars. Retargeting them to canonical tokens keeps the exact light look
   while making them correct in dark mode too. Print previews now follow the
   screen theme and reset to a white-paper palette only inside @media print.
   ========================================================================== */
.qs-document-row { border-top-color: var(--qs-border); }
.qs-line-total { border-top-color: var(--qs-border); }
.qs-pick span { color: var(--qs-muted); }
.qs-breakdown-bar { background: color-mix(in srgb, var(--qs-muted) 22%, transparent); }
.qs-breakdown-bar span { background: var(--qs-green); }

/* The hero "total" tile is a deliberately dark navy chip in light mode; in dark
   mode that navy equals the page surface, so lift it to a distinct elevated tile. */
[data-theme="dark"] .qs-sales-hero-total {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-alt));
    border: 1px solid var(--border);
    color: var(--text-primary);
}

/* ==========================================================================
   INLINE SAVE VALIDATION
   Field-level messages persist beside their inputs so a missed toast cannot
   leave the user guessing which field blocked the save. Tokens keep both
   themes correct without per-theme overrides.
   ========================================================================== */
.qs-field-error {
    color: var(--qs-red-strong);
    font-size: 0.85rem;
    line-height: 1.35;
    margin-top: 4px;
}

.qs-field-invalid .k-input,
.qs-field-invalid .k-picker,
.qs-field-invalid .qs-input {
    border-color: var(--qs-red-strong) !important;
}