/*
 * NhPanel – Produktdetail <-> Vertrag (Konto-Shell). Wird auf allen Kontoseiten geladen,
 * greift aber nur unter .nh-shell-page (ohne Shell keine Wirkung). Nutzt die Tokens aus panel.css.
 */

/* ---------- Produktdetail: Seitenkopf ---------- */

/* "Umbenennen" im Untertitel: Textknopf, Trefferfläche 44 px ohne die Zeilenhöhe zu ändern */
.nh-shell-page .nh-pd-rename {
    display: inline-block;
    margin: -11px 0 -11px 6px;
    padding: 11px 4px;
    border: 0;
    background: none;
    color: var(--nh-primary-ink);
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
}

.nh-shell-page .nh-pd-rename:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Titel + Status stehen im Seitenkopf; die leere Wiederholung in der Produktleiste (Theme-h4) entfällt */
.nh-shell-page .nh-shell-content h4:has(> .nh-pd-dup) { display: none !important; }
.nh-shell-page .nh-shell-content h4:has(> .nh-pd-dup) + .btn { margin-top: 0 !important; }

/* ---------- Produktdetail: Hinweise ---------- */

.nh-shell-page .nh-pd-notices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
}

.nh-shell-page .nh-pd-notices .alert { margin: 0; }
.nh-shell-page .nh-pd-notice .alert-text { min-width: 0; }
.nh-shell-page .nh-pd-notice-title { display: block; font-weight: 700; }
.nh-shell-page .nh-pd-notice-text { display: block; margin-top: 2px; overflow-wrap: anywhere; }
.nh-shell-page .nh-pd-notice > .btn,
.nh-shell-page .nh-pd-notice > .nh-status { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 575.98px) {
    .nh-shell-page .nh-pd-notice { flex-wrap: wrap; align-items: flex-start; }
    .nh-shell-page .nh-pd-notice .alert-text { flex: 1 1 calc(100% - 3rem); }
    .nh-shell-page .nh-pd-notice > .btn { width: 100%; }
}

/* ---------- Produktdetail: Karte "Vertrag & Abrechnung" ---------- */

.nh-shell-page .nh-pd-contract .card-header { flex-wrap: wrap; gap: 6px 16px; }

.nh-shell-page .nh-pd-contract-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--nh-ink);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.35;
}

.nh-shell-page .nh-pd-contract-link {
    display: inline-flex;
    align-items: center;
    margin: -10px 0;
    padding: 10px 0;
    color: var(--nh-primary-ink);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.nh-shell-page .nh-pd-contract-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Kennzahlen: .nh-glance aus panel.css, hier ohne eigenen Rahmen (liegt in der Karte) */
.nh-shell-page .nh-pd-facts {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.nh-shell-page .nh-pd-facts dd {
    font-size: 1.125rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Trennlinien nur zwischen den Kennzahlen, egal wie viele Spalten gerade passen:
   jede Kachel zeichnet links/oben eine Linie, der Rand (overflow: hidden der .nh-glance) schneidet die äußeren ab.
   (Die Rahmen aus panel.css setzen feste 2er-/1er-Zeilen voraus; bei 3+1 Kacheln stand sonst eine Linie am Rand.) */
.nh-shell-page .nh-pd-facts .nh-glance-item,
.nh-shell-page .nh-sv-facts .nh-glance-item {
    border: 0;
    box-shadow: -1px 0 0 var(--nh-line), 0 -1px 0 var(--nh-line);
}

.nh-shell-page .nh-pd-fact-meta {
    display: block;
    margin-top: 3px;
    color: var(--nh-muted);
    font-size: .84rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Produktkarte und Vertragsseite (.nh-sv-facts): Link in der Zusatzzeile als Link erkennbar
   (panel.css färbt Links in .nh-glance dd wie Text) */
.nh-shell-page .nh-glance dd .nh-pd-fact-meta a {
    display: inline-block;
    margin: -8px 0;
    padding: 8px 0;
    color: var(--nh-primary-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nh-shell-page .nh-pd-fact-meta--warning { color: var(--nh-warning-ink); font-weight: 650; }
.nh-shell-page .nh-pd-fact-meta--danger,
.nh-shell-page .nh-pd-fact-value--danger { color: var(--nh-danger-ink); }
.nh-shell-page .nh-pd-fact-meta--danger { font-weight: 650; }

.nh-shell-page .nh-shell-content .nh-pd-contract-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--nh-line);
    background: var(--nh-surface);
}

/* Kündigen bewusst zurückhaltend, rechts */
.nh-shell-page .nh-shell-content .nh-pd-contract-actions .nh-pd-cancel {
    margin-left: auto;
    padding-inline: 4px;
    color: var(--nh-muted);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nh-shell-page .nh-shell-content .nh-pd-contract-actions .nh-pd-cancel:hover { color: var(--nh-danger-ink); }

/* Touch: Schaltflächen mindestens 44 px hoch */
@media (pointer: coarse) {
    .nh-shell-page .nh-pd-notice > .btn,
    .nh-shell-page .nh-pd-contract-actions .btn,
    .nh-shell-page .nh-pd-report,
    .nh-shell-page .nh-sv-products .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }
}

/* ---------- Vertragsseite ---------- */

/* Kopf: Produktverweis unter dem Titel */
.nh-shell-page .nh-sv-for a { color: var(--nh-primary-ink); font-weight: 600; text-decoration: none; }
.nh-shell-page .nh-sv-for a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nh-shell-page .nh-sv-for-meta { color: var(--nh-muted); font-size: .88rem; font-variant-numeric: tabular-nums; }

/* Kennzahlen (.nh-glance aus panel.css) */
.nh-shell-page .nh-sv-facts { margin-bottom: 20px; }
.nh-shell-page .nh-sv-facts dd { font-size: 1.125rem; line-height: 1.3; overflow-wrap: anywhere; }

/* Produkte: Gesamtbetrag und Hinweis unter der Tabelle */
.nh-shell-page .nh-sv-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--nh-line);
    background: var(--nh-surface-2);
}

.nh-shell-page .nh-sv-total-label { color: var(--nh-muted); font-size: .9rem; font-weight: 600; }
.nh-shell-page .nh-sv-total-value { color: var(--nh-muted); font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; }
.nh-shell-page .nh-sv-total-value strong { margin-right: 4px; color: var(--nh-ink); font-size: 1.05rem; }

.nh-shell-page .nh-sv-note {
    margin: 0;
    padding: 10px 16px 12px;
    border-top: 1px solid var(--nh-line);
    color: var(--nh-muted);
    font-size: .86rem;
}

.nh-shell-page .nh-sv-products-table td .nh-status { margin-top: 4px; }

/* Gestapelt (panel.css: Zelle = Flex-Zeile) stünden Name, Art/Nummer und Status nebeneinander gequetscht:
   die Produktzelle ist die Kartenüberschrift, ihre Zeilen stehen untereinander. */
@container nhtable (max-width: 680px) {
    .nh-shell-page .nh-sv-products-table tbody td.nh-sv-product-cell { display: block; text-align: left; }
}

/* Detailkarte (Hostware): Beschriftung über dem Wert, sobald die Karte schmal wird.
   Container nur um die Artikelliste – ein Container (Layout-Containment) um die ganze Karte würde die
   Änderungsdialoge daneben (position: fixed) an den Container statt an das Fenster binden. */
.nh-shell-page .nh-sv-details .hw-summary-wrapper { container-type: inline-size; container-name: nhsvsummary; }

@container nhsvsummary (max-width: 520px) {
    .nh-shell-page .nh-sv-details .hw-summary-wrapper article {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding: 12px 0;
    }

    .nh-shell-page .nh-sv-details .hw-summary-wrapper article label {
        color: var(--nh-muted);
        font-size: .82rem;
        font-weight: 600;
    }
}

.nh-shell-page .nh-sv-details .hw-summary-wrapper article > div { min-width: 0; overflow-wrap: anywhere; }