/* NEU Phase 4: Angebote – Editor, Dokument, Kundenansicht, Preisliste, Auswahldialog, Druck */

/* ------------------------------------------------------------ Allgemeine Ergänzungen */
.toggle-switch {
    position: relative; width: 44px; height: 24px; flex-shrink: 0;
    border-radius: var(--radius-full); background: var(--gray-300); transition: var(--transition-fast);
}
.toggle-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-sm); transition: var(--transition-spring);
}
.toggle-switch.active { background: var(--success); }
.toggle-switch.active::after { left: 23px; }

.data-table tr.row-inactive td { opacity: 0.55; }
.row-actions { display: flex; gap: 0.35rem; justify-content: flex-end; flex-wrap: wrap; }
.data-table .col-actions { white-space: nowrap; }
.tab-toolbar { display: flex; justify-content: flex-end; gap: 0.5rem; }
.error-list { margin: 0; padding-left: 1rem; list-style: disc; }
.modal-actions-single { grid-template-columns: 1fr; }

/* ------------------------------------------------------------ Auswahldialog */
.picker-dialog { max-width: 560px; }
.picker-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: min(420px, 55vh); overflow-y: auto; margin-top: 0.5rem; }
.picker-item {
    display: flex; align-items: center; gap: 0.75rem; width: 100%;
    padding: 0.6rem 0.75rem; border-radius: var(--radius-md); text-align: left; transition: var(--transition-fast);
}
.picker-item:hover, .picker-item:focus-visible { background: var(--bg-hover); }
.picker-item-icon { color: var(--text-secondary); }
.picker-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.picker-item-title { font-weight: 600; }
.picker-item-meta { font-size: 0.78rem; color: var(--text-muted); }
.picker-item-value { font-size: 0.82rem; white-space: nowrap; }
.picker-empty { padding: 1rem 0; text-align: center; }

/* ------------------------------------------------------------ Editor */
.quote-editor-header { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; }
.quote-editor-title-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.quote-editor-title-row .page-title { font-size: 1.35rem; }
.quote-title-field input { font-size: 1rem; font-weight: 600; }
.quote-editor-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
.quote-editor-meta .filter-field input, .quote-editor-meta .filter-field select { padding: 0.5rem 0.7rem; }

.save-state { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }
.save-state-saved i { color: var(--success); }
.save-state-dirty { color: var(--text-secondary); }
.save-state-error { color: var(--danger-dark); }

.quote-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.quote-editor-main { min-width: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.quote-editor-aside { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 0; }
.quote-editor-actions { display: flex; flex-direction: column; gap: 0.5rem; }

.quote-suggestions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.quote-suggestions:empty { display: none; }
.quote-suggestions-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--warning-dark); }

.quote-edit-list { display: flex; flex-direction: column; }
.quote-edit-empty { padding: 1.5rem 0; text-align: center; }
/* Zweizeilige Position: oben Art/Beschreibung/Summe, darunter die Zahlenfelder */
.quote-edit-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 110px 108px;
    grid-template-areas: "pos main sum actions" ". fields fields fields";
    gap: 0.5rem 0.6rem; align-items: center;
    padding: 0.75rem 0; border-bottom: 1px solid var(--border-light);
}
.quote-edit-row input, .quote-edit-row select { padding: 0.45rem 0.55rem; font-size: 0.85rem; }
.quote-edit-position { grid-area: pos; display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; }
.quote-edit-main { grid-area: main; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.quote-edit-sum { grid-area: sum; text-align: right; }
.quote-edit-actions { grid-area: actions; }
.quote-edit-fields {
    grid-area: fields; display: grid; gap: 0.5rem; align-items: end;
    grid-template-columns: minmax(110px, 1.2fr) minmax(56px, 0.6fr) minmax(104px, 1.1fr) minmax(96px, 1.1fr) minmax(56px, 0.6fr) minmax(72px, 0.8fr) auto;
}
.quote-edit-internal { font-size: 0.72rem; color: var(--warning-dark); }
.quote-edit-field { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.data-table .mono { white-space: nowrap; }
.quote-edit-field > span, .quote-edit-optional span { font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.quote-edit-number { text-align: right; font-family: var(--font-mono); }
.quote-edit-optional { display: flex; align-items: center; gap: 0.4rem; padding-bottom: 0.55rem; cursor: pointer; }
.quote-edit-total { font-weight: 600; }
.quote-edit-total.is-optional { color: var(--text-muted); text-decoration: line-through; }
.quote-edit-actions { display: flex; justify-content: flex-end; }
.quote-edit-actions .btn-icon { width: 32px; height: 32px; }
.quote-add-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.5rem; }

.quote-texts { display: flex; flex-direction: column; gap: 0.75rem; }
.internal-calc { margin-top: 1rem; padding: 0.75rem 0.875rem; border-radius: var(--radius-md); background: var(--warning-light); }
.internal-calc-title { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--warning-dark); }

/* ------------------------------------------------------------ Summen */
.quote-totals { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; font-variant-numeric: tabular-nums; }
.quote-totals dt { color: var(--text-secondary); }
.quote-totals dd { text-align: right; font-family: var(--font-mono); }
.quote-totals .quote-total-gross { padding-top: 0.5rem; border-top: 1.5px solid var(--border); font-weight: 700; font-size: 1.05rem; color: var(--text-primary); }

/* ------------------------------------------------------------ Angebotsdokument */
.quote-document {
    display: flex; flex-direction: column; gap: 1.1rem;
    padding: 2rem; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm);
    line-height: 1.5;
}
.quote-doc-header { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 2px solid var(--primary); }
:root.dark-mode .quote-doc-header { border-bottom-color: var(--info); }
.quote-doc-sender { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--text-secondary); }
.quote-doc-sender strong { font-size: 1.05rem; color: var(--text-primary); }
.quote-doc-meta { display: grid; grid-template-columns: auto auto; gap: 0.15rem 1rem; font-size: 0.85rem; }
.quote-doc-meta dt { color: var(--text-secondary); }
.quote-doc-meta dd { text-align: right; font-weight: 600; }
.quote-doc-recipient { display: flex; flex-direction: column; font-size: 0.92rem; }
.quote-doc-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); }
.quote-doc-site { margin-top: 0.3rem; color: var(--text-secondary); font-size: 0.85rem; }
.quote-doc-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.3px; }
.quote-doc-text { white-space: pre-line; }
.quote-doc-note { padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--info-light); font-size: 0.88rem; }
.quote-doc-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.quote-doc-table th { padding: 0.5rem; border-bottom: 1.5px solid var(--border); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); text-align: left; }
.quote-doc-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.quote-doc-table .quote-col-position { width: 44px; color: var(--text-muted); }
.quote-doc-table .quote-col-quantity, .quote-doc-table .quote-col-price, .quote-doc-table .quote-col-total { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quote-doc-table .quote-col-total { font-weight: 600; }
.quote-col-description > span { display: block; }
.quote-item-note { font-size: 0.78rem; color: var(--text-muted); }
.quote-row-optional td { color: var(--text-secondary); }
.quote-row-optional .quote-col-total { text-decoration: line-through; }
.quote-row-text td { font-weight: 600; background: var(--bg-page); }
.quote-row-group td { padding-top: 1rem; font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }
.quote-document .quote-totals { align-self: flex-end; min-width: min(320px, 100%); }
.quote-doc-footer { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light); font-size: 0.75rem; color: var(--text-muted); }

/* Vorschau im Betrieb */
.quote-preview { max-width: 960px; }
.quote-preview-toolbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.quote-preview-actions { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ------------------------------------------------------------ Kundenansicht */
.customer-quote.has-action-bar { padding-bottom: calc(96px + var(--safe-bottom)); }
.quote-summary-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
    padding: 1.25rem; border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); border-left: 3px solid var(--success);
}
.quote-summary-total { font-size: 2rem; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
.quote-variants { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

.quote-card {
    display: flex; align-items: center; gap: 0.875rem; padding: 1rem;
    border-radius: var(--radius-lg); background: var(--bg-card); box-shadow: var(--shadow-sm); color: var(--text-primary);
    border: 1.5px solid transparent; transition: var(--transition-fast);
}
.quote-card:hover { box-shadow: var(--shadow-md); }
.quote-card-open { border-color: var(--success); }
.quote-card-icon { width: 44px; height: 44px; font-size: 1.1rem; }
.quote-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
.quote-card-title { font-weight: 600; }
.quote-card-total { font-size: 1.15rem; font-weight: 700; }
.quote-card-cta { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--primary); font-weight: 600; font-size: 0.9rem; }
:root.dark-mode .quote-card-cta { color: var(--info-dark); }

/* ------------------------------------------------------------ Preisliste: Pauschalen */
.package-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.package-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card); }
.package-card.is-inactive { opacity: 0.6; }
.package-card-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.package-items { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.package-items li { display: flex; justify-content: space-between; gap: 0.75rem; }
.package-total { display: flex; justify-content: space-between; padding-top: 0.5rem; border-top: 1px solid var(--border-light); }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 1200px) {
    .quote-editor-layout { grid-template-columns: minmax(0, 1fr); }
    .quote-editor-aside { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 768px) {
    .quote-editor-meta { grid-template-columns: 1fr 1fr; }
    .quote-edit-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        grid-template-areas: "pos sum actions" "main main main" "fields fields fields";
        padding: 0.875rem; margin-bottom: 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-md);
    }
    .quote-edit-fields { grid-template-columns: 1fr 1fr; }
    .quote-edit-sum { text-align: left; font-size: 1rem; }
    .quote-document { padding: 1.1rem; }
    .quote-doc-table thead { display: none; }
    .quote-doc-table tr { display: grid; grid-template-columns: 32px 1fr auto; gap: 0.1rem 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border-light); }
    .quote-doc-table td { padding: 0; border: none; }
    .quote-doc-table .quote-col-position { grid-row: span 2; }
    .quote-doc-table .quote-col-description { grid-column: 2 / 4; }
    .quote-doc-table .quote-col-quantity { text-align: left; font-size: 0.82rem; color: var(--text-secondary); }
    .quote-doc-table .quote-col-quantity::after { content: ' ×'; }
    .quote-doc-table .quote-col-price { display: none; }
    .quote-doc-table .quote-row-text td, .quote-doc-table .quote-row-group td { grid-column: 1 / -1; }
    .quote-preview-actions { margin-left: 0; width: 100%; }
}

/* ------------------------------------------------------------ Druck / PDF */
@media print {
    body, .app-main, .customer-main { background: #ffffff !important; }
    .sidebar, .app-header, .mobile-header, .bottom-nav, .sticky-action-bar, #toast-container, .no-print,
    .back-link, .offline-banner, .quote-summary-card, .alert { display: none !important; }
    .app-shell { display: block; height: auto; }
    .app-main { overflow: visible; padding: 0; }
    .customer-main { max-width: none; padding: 0; }
    .quote-document { box-shadow: none; padding: 0; color: #000000; }
}