/* ═══════════════════════════════════════════════════════════════════════════
   TENDER84 — Quote & Invoice Tool Styles
   Design: Bootstrap 5.3 + T84 conventions
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
    --qi-primary: #1a56db;
    --qi-primary-light: #eff6ff;
    --qi-border: #e2e8f0;
    --qi-radius: 10px;
    --qi-muted: #64748b;
    --qi-bg: #f8fafc;
    --qi-danger: #dc2626;
    --qi-success: #16a34a;
}

/* ── App Layout ── */
.qi-app {
    display: flex;
    gap: 20px;
    min-height: 70vh;
}
.qi-sidebar {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qi-main {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 20px;
}
/* Split-screen: form left, preview right (builder tab only) */
.qi-form-col {
    flex: 1 1 55%;
    min-width: 0;
    max-width: 58%;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    padding-right: 4px;
}
.qi-preview-col {
    flex: 0 0 42%;
    min-width: 340px;
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    position: sticky;
    top: 80px;
}
/* Preview scaling for mobile: fit-A4 toggle */
.qi-preview-col.fit-screen .qi-doc {
    transform: scale(0.55);
    transform-origin: top left;
    width: 182%;
    margin-bottom: -45%;
}
.qi-preview-col.fit-screen .qi-preview-wrap {
    overflow: visible;
}
/* Full-width for non-builder tabs */
.qi-main.qi-full .qi-form-col { max-width: 100%; }
.qi-main.qi-full .qi-preview-col { display: none; }
/* Freeform mode: all steps visible, no step tabs */
.qi-main.qi-freeform .qi-steps,
.qi-main.qi-freeform #step-nav-btns { display: none !important; }
.qi-main.qi-freeform .qi-card[id^="step-"] { display: block !important; }

/* ── Sidebar Nav ── */
.qi-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #fff;
    color: #475569;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
}
.qi-nav-btn:hover { background: var(--qi-primary-light); color: var(--qi-primary); }
.qi-nav-btn.active { background: var(--qi-primary); color: #fff; border-color: var(--qi-primary); }
.qi-nav-btn .badge { margin-left: auto; }

/* ── Cards ── */
.qi-card {
    background: #fff;
    border: 1px solid var(--qi-border);
    border-radius: var(--qi-radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.qi-card-header {
    padding: 12px 16px;
    background: var(--qi-bg);
    border-bottom: 1px solid var(--qi-border);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.qi-card-body { padding: 16px; }
.qi-card-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--qi-border);
    background: var(--qi-bg);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Form Rows ── */
.qi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.qi-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.qi-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.qi-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.qi-field { display: flex; flex-direction: column; gap: 4px; }
.qi-field label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--qi-muted);
}
.qi-field input, .qi-field select, .qi-field textarea {
    padding: 8px 12px;
    border: 1px solid var(--qi-border);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s;
    background: #fff;
    width: 100%;
}
.qi-field input:focus, .qi-field select:focus, .qi-field textarea:focus {
    outline: none;
    border-color: var(--qi-primary);
    box-shadow: 0 0 0 3px rgba(26,86,219,0.1);
}
.qi-field textarea { resize: vertical; min-height: 60px; }

/* ── Buttons ── */
.qi-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}
.qi-btn-primary { background: var(--qi-primary); color: #fff; }
.qi-btn-primary:hover { background: #1550c0; }
.qi-btn-outline { background: #fff; color: var(--qi-primary); border-color: var(--qi-primary); }
.qi-btn-outline:hover { background: var(--qi-primary-light); }
.qi-btn-danger { background: #fff; color: var(--qi-danger); border-color: var(--qi-danger); }
.qi-btn-danger:hover { background: #fef2f2; }
.qi-btn-success { background: var(--qi-success); color: #fff; }
.qi-btn-success:hover { background: #15803d; }
.qi-btn-sm { padding: 5px 10px; font-size: 0.78rem; }
.qi-btn-lg { padding: 10px 24px; font-size: 0.95rem; }
.qi-btn-icon { padding: 6px 8px; min-width: 32px; justify-content: center; }

/* ── Tag / Chip ── */
.qi-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--qi-primary-light);
    color: var(--qi-primary);
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.qi-tag:hover { border-color: var(--qi-primary); }
.qi-tag.active { background: var(--qi-primary); color: #fff; }

/* ── List Items ── */
.qi-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--qi-border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: #fff;
    gap: 8px;
    transition: box-shadow 0.15s;
}
.qi-list-item:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.qi-list-item .qi-list-info { flex: 1; min-width: 0; }
.qi-list-item .qi-list-name { font-weight: 600; font-size: 0.9rem; }
.qi-list-item .qi-list-sub { font-size: 0.78rem; color: var(--qi-muted); }
.qi-list-item.qi-list-default { border-color: var(--qi-primary); background: #eff6ff; }
.qi-list-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ── Step Tabs ── */
.qi-steps {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.qi-step {
    flex: 1;
    min-width: 90px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--qi-border);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
    white-space: nowrap;
    color: #475569;
}
.qi-step:hover { background: var(--qi-primary-light); color: var(--qi-primary); }
.qi-step.active { background: var(--qi-primary); color: #fff; border-color: var(--qi-primary); }
.qi-step .step-num {
    display: inline-block;
    width: 22px; height: 22px;
    line-height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 4px;
    transition: all 0.15s;
}
.qi-step.active .step-num { background: rgba(255,255,255,0.25); color: #fff; }
.qi-step.completed { border-color: var(--qi-success); background: #f0fdf4; }
.qi-step.completed .step-num { background: var(--qi-success); color: #fff; }

/* ── Document Preview (the "paper") ── */
.qi-preview-wrap {
    overflow: hidden;
    margin-bottom: 12px;
}
.qi-preview-wrap .qi-doc {
    transform-origin: top left;
}
.qi-doc {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    min-height: 300px;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
    padding: 24px 28px;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #1e293b;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Editable preview dates */
.qi-pv-date {
    font-size: 0.78rem;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    padding: 0 2px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 2px;
}
.qi-pv-date:hover, .qi-pv-date:focus {
    border-color: #1a56db;
    background: #eff6ff;
    outline: none;
}
.qi-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #1e293b;
}
.qi-doc-logo { max-width: 140px; max-height: 70px; object-fit: contain; }
.qi-doc-type {
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #1e293b;
}
.qi-doc-number { font-size: 0.85rem; color: var(--qi-muted); margin-top: 4px; }

.qi-doc-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 24px;
}
.qi-doc-party h4 {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--qi-muted);
    margin-bottom: 6px;
}
.qi-doc-party .name { font-weight: 700; font-size: 1rem; }
.qi-doc-party .detail { font-size: 0.82rem; color: #475569; margin-top: 2px; }

.qi-doc-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}
.qi-doc-table th {
    background: #f1f5f9;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #cbd5e1;
    font-weight: 600;
}
.qi-doc-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.88rem;
}
.qi-doc-table .col-qty { width: 8%; text-align: center; }
.qi-doc-table .col-rate { width: 15%; text-align: right; }
.qi-doc-table .col-amt { width: 15%; text-align: right; }
.qi-doc-table td.col-rate, .qi-doc-table td.col-amt { font-variant-numeric: tabular-nums; }

.qi-doc-totals {
    margin-left: auto;
    width: 280px;
    margin-bottom: 24px;
}
.qi-doc-totals .tot-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.88rem;
    border-bottom: 1px solid #f1f5f9;
}
.qi-doc-totals .tot-row.grand {
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 3px double #1e293b;
    padding-top: 10px;
    margin-top: 4px;
}

.qi-doc-notes { font-size: 0.82rem; color: #475569; margin-bottom: 16px; }
.qi-doc-terms { font-size: 0.78rem; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 12px; white-space: pre-line; }

.qi-doc-upi {
    margin-top: 20px;
    padding: 16px;
    border: 1px dashed #e2e8f0;
    border-radius: 8px;
    text-align: center;
}
.qi-doc-upi img { max-width: 180px; max-height: 180px; }
.qi-doc-upi .upi-note { font-size: 0.78rem; color: #475569; margin-top: 6px; }

.qi-doc-footer {
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: center;
}

/* ── Layout Templates ── */
.qi-doc.layout-classic { /* default — traditional B&W */ }
.qi-doc.layout-modern .qi-doc-header { border-bottom: 3px solid var(--qi-primary); background: #f8faff; padding:16px 20px; border-radius:8px 8px 0 0; }
.qi-doc.layout-modern .qi-doc-type { color: var(--qi-primary); font-size: 1.8rem; }
.qi-doc.layout-modern .qi-doc-table th { background: var(--qi-primary); color: #fff; }
.qi-doc.layout-minimal { font-size: 0.82rem; }
.qi-doc.layout-minimal .qi-doc-header { border-bottom-width: 1px; padding-bottom:8px; margin-bottom:16px; }
.qi-doc.layout-minimal .qi-doc-type { font-size: 1.3rem; font-weight: 600; letter-spacing:0.02em; }
.qi-doc.layout-minimal .qi-doc-table th { background:#fafafa; font-weight:500; }
.qi-doc.layout-compact { font-size: 0.78rem; padding: 24px 32px; }
.qi-doc.layout-compact .qi-doc-type { font-size: 1.2rem; }
.qi-doc.layout-compact .qi-doc-header { margin-bottom:12px; padding-bottom:8px; }
.qi-doc.layout-compact .qi-doc-table th, .qi-doc.layout-compact .qi-doc-table td { padding: 4px 8px; }

/* ── Sticky Totals Bar ── */
.qi-totals-bar {
    background: #fff;
    border: 1px solid var(--qi-border);
    border-radius: var(--qi-radius);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.qi-totals-bar .qi-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.82rem;
}
.qi-totals-bar .qi-total-row.grand {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--qi-primary);
    border-top: 1px solid var(--qi-border);
    margin-top: 6px;
    padding-top: 8px;
}
.qi-totals-bar .qi-total-row.discount { color: var(--qi-danger); }
.qi-totals-bar .qi-total-label { color: var(--qi-muted); }
.qi-totals-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.qi-totals-actions .qi-btn { flex: 1; justify-content: center; }

/* ── Onboarding / First-Time ── */
.qi-onboard {
    text-align: center;
    padding: 40px 20px;
    max-width: 520px;
    margin: 0 auto;
}
.qi-onboard h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }
.qi-onboard p { color: var(--qi-muted); margin-bottom: 20px; font-size: 0.9rem; }
.qi-onboard .qi-steps-list {
    text-align: left;
    display: inline-block;
    margin-bottom: 24px;
}
.qi-onboard .qi-steps-list li {
    padding: 6px 0;
    font-size: 0.88rem;
    color: #475569;
}
.qi-onboard .qi-steps-list li i { color: var(--qi-success); margin-right: 8px; }

/* ── Inline Create Popup ── */
.qi-inline-popup {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qi-inline-popup .qi-popup-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 440px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}
.qi-inline-popup .qi-popup-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.qi-inline-popup .qi-popup-card .qi-field { margin-bottom: 10px; }
.qi-inline-popup .qi-popup-card .qi-field label { font-size: 0.72rem; }
.qi-inline-popup .qi-popup-card .qi-field input,
.qi-inline-popup .qi-popup-card .qi-field select { font-size: 0.85rem; padding: 6px 10px; }

/* ── Smart Empty State ── */
.qi-empty-smart {
    text-align: center;
    padding: 24px;
    color: var(--qi-muted);
}
.qi-empty-smart .qi-empty-options {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
}
.qi-empty-option {
    background: #fff;
    border: 1px solid var(--qi-border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    min-width: 120px;
}
.qi-empty-option:hover { border-color: var(--qi-primary); background: var(--qi-primary-light); }
.qi-empty-option i { font-size: 1.2rem; display: block; margin-bottom: 4px; color: var(--qi-primary); }
.qi-empty-option .qi-opt-label { font-weight: 600; color: #374151; }

/* ── Mobile Responsive ── */
@media (max-width: 992px) {
    .qi-main { flex-direction: column; }
    .qi-form-col { max-width: 100%; }
    .qi-preview-col { width: 100%; position: static; max-height: none; }
    .qi-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .qi-nav-btn { flex: 1; min-width: 100px; font-size: 0.78rem; padding: 8px 10px; }
    .qi-steps { flex-wrap: wrap; }
    .qi-step { font-size: 0.72rem; padding: 6px 10px; }
}
@media (max-width: 768px) {
    .qi-row, .qi-row.cols-2, .qi-row.cols-3, .qi-row.cols-4 {
        grid-template-columns: 1fr;
    }
    .qi-steps { gap: 3px; }
    .qi-step { padding: 8px 10px; font-size: 0.75rem; min-width: 70px; }
    .qi-card-body { padding: 12px; }
    .qi-doc { font-size: 0.78rem; }
    .qi-doc-parties { grid-template-columns: 1fr; gap: 16px; }
    .qi-doc-totals { width: 100%; }
    .qi-list-item { flex-wrap: wrap; }
    .qi-list-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
    .qi-preview-col { position: static; max-height: none; flex: 0 0 auto; width: 100%; min-width: 0; }
    .qi-form-col { max-width: 100%; max-height: none; flex: 0 0 auto; }
    
    /* Auto-fit preview on mobile (scale to screen) */
    .qi-preview-col:not(.full-size) .qi-doc {
        transform: scale(0.48);
        transform-origin: top left;
        width: 208%;
        margin-bottom: -52%;
    }
    .qi-preview-col.full-size .qi-doc {
        transform: none;
        width: 100%;
        margin-bottom: 0;
        overflow-x: auto;
    }
    /* Preview size toggle button */
    .qi-preview-size-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        padding: 4px 10px;
        border-radius: 99px;
        font-size: 0.7rem;
        font-weight: 600;
        background: var(--qi-primary-light);
        color: var(--qi-primary);
        border: 1px solid var(--qi-primary);
        cursor: pointer;
        margin-bottom: 8px;
    }
    
    /* ── Floating Step Navigation on Mobile ── */
    .qi-steps.floating {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff;
        padding: 8px 12px;
        margin: 0;
        border-top: 2px solid var(--qi-border);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
        gap: 4px;
    }
    .qi-steps.floating .qi-step {
        flex: 1;
        min-width: 0;
        padding: 8px 4px;
        font-size: 0.68rem;
        border-radius: 6px;
    }
    .qi-steps.floating .qi-step .step-num {
        width: 18px; height: 18px;
        line-height: 18px;
        font-size: 0.65rem;
        margin-right: 2px;
    }
    /* Push content up so floating steps don't cover anything */
    body.has-floating-steps .qi-form-col {
        padding-bottom: 70px;
    }
}

/* ── Draft Recovery Notice ── */
.qi-draft-notice {
    background: #fef9c3;
    border: 1px solid #facc15;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    color: #854d0e;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.qi-draft-notice i { color: #ca8a04; }

/* ── Image Preview Thumbnails ── */
.qi-img-preview {
    width: 80px; height: 80px;
    object-fit: contain;
    border: 1px solid var(--qi-border);
    border-radius: 6px;
    margin-top: 6px;
    background: #fafafa;
}

/* ── Serial Numbers ── */
.qi-sn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--qi-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.qi-sn-cell { text-align: center; vertical-align: middle; }
.qi-sn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}
.qi-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--qi-muted);
}
.qi-empty i { font-size: 2.5rem; color: #cbd5e1; margin-bottom: 8px; }
.qi-empty p { font-size: 0.88rem; }

/* ── Layout Tiles ── */
.qi-layout-tile {
    cursor: pointer;
    border: 2px solid var(--qi-border);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    transition: all 0.15s;
    background: #fff;
    width: 135px;
    flex-shrink: 0;
}
.qi-layout-tile:hover { border-color: var(--qi-primary); background: var(--qi-primary-light); }
.qi-layout-tile.active { border-color: var(--qi-primary); background: #eff6ff; box-shadow: 0 0 0 2px rgba(26,86,219,0.15); }
.qi-layout-preview {
    font-size: 0.72rem;
    line-height: 1.35;
    color: #64748b;
    background: #f8fafc;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    font-family: monospace;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qi-layout-name { font-weight: 700; font-size: 0.82rem; color: #1e293b; }
.qi-layout-desc { font-size: 0.7rem; color: var(--qi-muted); margin-top: 2px; }

/* ── Custom Buttons on Document ── */
.qi-doc-custom-btns {
    text-align: center;
    margin: 16px 0;
    padding: 12px 0;
    border-top: 1px dashed var(--qi-border);
    border-bottom: 1px dashed var(--qi-border);
}
.qi-custom-btn {
    display: inline-block;
    padding: 8px 22px;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
    margin: 3px;
    transition: opacity 0.15s;
}
.qi-custom-btn:hover { opacity: 0.9; }

/* ── Bank Details on Document ── */
.qi-doc-bank {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 6px;
    border-left: 3px solid var(--qi-primary);
}

/* ── Inline Hint ── */
.qi-hint {
    font-size: 0.75rem;
    color: var(--qi-muted);
    margin-top: 4px;
}

/* ── Checkbox Row ── */
.qi-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 0.88rem;
}
.qi-check-row label { cursor: pointer; margin-bottom: 0; }

/* ── Inline Preview Item Editing ── */
.qi-pv-inline-qty {
    width: 48px !important;
    padding: 2px 4px !important;
    font-size: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    text-align: center;
    font-family: inherit;
}
.qi-pv-inline-rate {
    width: 75px !important;
    padding: 2px 4px !important;
    font-size: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    text-align: right;
    font-family: inherit;
}
.qi-pv-inline-qty:focus, .qi-pv-inline-rate:focus {
    outline: none;
    border-color: #1a56db !important;
    box-shadow: 0 0 0 2px rgba(26,86,219,0.15);
}

/* Preview product tags */
.qi-pv-tag {
    margin: 2px;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 3px 8px;
}
.qi-pv-tag:hover { border-color: #1a56db; background: #dbeafe; }

/* Preview products mini-panel */
.pv-products-mini {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    text-align: left;
}
.pv-products-mini #pv-prod-search {
    width: 130px;
    font-size: 0.7rem;
    padding: 2px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT STYLES — Browser-native PDF (selectable text, Unicode-safe)
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
    body { background: #fff !important; }
    .no-print { display: none !important; }
    .qi-sidebar, .qi-steps, .qi-card-header, .qi-card-footer,
    .qi-nav-btn, .qi-btn, .qi-draft-notice, .qi-toolbar,
    .navbar, .site-footer, footer, .breadcrumb, .qi-preview-wrap,
    #add-item-row, tfoot { display: none !important; }
    .qi-app { display: block !important; }
    .qi-main { max-width: 100% !important; }
    .qi-doc {
        box-shadow: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .qi-doc-table th { background: #f1f5f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4; margin: 15mm 18mm; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile < 800px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
    .qi-app { flex-direction: column; gap: 12px; }
    .qi-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
    }
    .qi-nav-btn {
        flex-shrink: 0;
        width: auto;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    .qi-row, .qi-row.cols-2, .qi-row.cols-3, .qi-row.cols-4 {
        grid-template-columns: 1fr;
    }
    .qi-steps { gap: 3px; }
    .qi-step { padding: 8px 10px; font-size: 0.75rem; min-width: 70px; }
    .qi-card-body { padding: 12px; }
    .qi-doc { width: 720px; padding: 20px 24px; font-size: 0.78rem; }
    .qi-doc-parties { grid-template-columns: 1fr; gap: 16px; }
    .qi-doc-totals { width: 100%; }
    .qi-list-item { flex-wrap: wrap; }
    .qi-list-actions { width: 100%; justify-content: flex-end; margin-top: 6px; }
}

/* ── Toast (from tool-registry.md §3) ── */
.t84-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    padding: 10px 24px; border-radius: 99px; font-size: 0.88rem; font-weight: 600;
    z-index: 99999; white-space: nowrap;
    animation: t84-toast-in 0.25s ease;
}
.t84-toast-success { background: #22c55e; color: #fff; box-shadow: 0 4px 20px rgba(34,197,94,0.4); }
.t84-toast-error   { background: #ef4444; color: #fff; box-shadow: 0 4px 20px rgba(239,68,68,0.4); }
.t84-toast-info    { background: #3b82f6; color: #fff; box-shadow: 0 4px 20px rgba(59,130,246,0.4); }
.t84-toast.fade-out { opacity: 0; transition: opacity 0.3s; }
@keyframes t84-toast-in { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* ── Share Modal (from tool-registry.md §2) ── */
.export-modal { position:fixed; inset:0; background:rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:9999; }
.export-modal.active { display:flex; }
.export-dialog { background:#fff; border-radius:16px; padding:24px; max-width:420px; width:90%; }
.export-title { font-weight:700; font-size:1.1rem; margin-bottom:16px; }
.export-option-cell {
    cursor:pointer; padding:14px 10px 12px; border-radius:14px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    border:1.5px solid #e2e8f0; background:#fff; transition:all 0.15s;
}
.export-option-cell:hover { border-color:var(--qi-primary); background:#eff6ff; transform:scale(0.97); }
.export-options-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
.cell-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.25rem; }
.cell-label { font-size:0.78rem; font-weight:600; color:#1e293b; }