:root {
    --color-primary: #1F4E78;
    --color-primary-light: #2E6DA4;
    --color-success: #2E7D32;
    --color-danger: #C62828;
    --color-bg: #F5F7FA;
    --color-text: #1A1A1A;
    font-size: 18px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.app-shell {
    /* 100vh bezieht auf vielen mobilen Browsern die (ein-/ausblendbare)
       Adressleiste mit ein - die Seite ist dann hoeher als der tatsaechlich
       sichtbare Bereich, der Footer landet unterhalb der Faltkante, obwohl
       eigentlich noch Platz waere. 100dvh (dynamic viewport height) passt
       sich dagegen dem wirklich sichtbaren Bereich an; svh als Fallback fuer
       etwas aeltere Browser ohne dvh-Unterstuetzung. */
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Header-Optik angelehnt an unser WPF-Tool VerAProOnlineTool (dunkelblauer
   Diagonal-Verlauf, Titel + kurzer Untertitel), fuer einen einheitlichen
   HKSoftware-Look ueber die Anwendungen hinweg. */
.app-header {
    background: linear-gradient(135deg, #081C33 0%, #1A4D7A 55%, #2C6FA8 100%);
    color: #fff;
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.app-title {
    font-size: 1.15rem;
    font-weight: 600;
}

.app-subtitle {
    font-size: 0.8rem;
    color: #E8EEF5;
}

.app-content {
    flex: 1;
    padding: 1rem;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

.app-loading {
    padding: 2rem;
    text-align: center;
    color: #666;
}

/* Zwei Zeilen statt einer durchlaufenden Zeile - verhindert auf schmalen
   Handy-Bildschirmen den haesslichen Umbruch mitten in "© Jahr HKSoftware · vX.X.X". */
.app-footer {
    text-align: center;
    padding: 0.9rem 1rem 1.4rem;
    font-size: 0.8rem;
    color: #888;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

    .app-footer a {
        color: #888;
        text-decoration: underline;
    }

.app-footer-links,
.app-footer-meta {
    white-space: nowrap;
}

.app-footer-sep {
    margin: 0 0.4rem;
}

/* Impressum/Datenschutz: normaler Fliesstext statt der kompakten
   App-Optik, damit laengere Absaetze lesbar bleiben. */
.legal-page {
    background: #fff;
    border-radius: 0.8rem;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    line-height: 1.5;
    /* Fliesstext, kein Bedien-/Ablese-Kontext im Laden wie beim Warenkorb -
       eine Stufe kleiner als der App-Standard reicht hier. */
    font-size: 0.9rem;
}

    .legal-page h2 {
        margin-top: 0;
    }

    .legal-page h3 {
        margin-bottom: 0.3rem;
    }

    .legal-page p {
        margin-top: 0;
    }

/* Grosse, gut treffbare Buttons fuer Einhandbedienung im Laden */
button {
    font-size: 1.1rem;
    padding: 0.9rem 1.2rem;
    border-radius: 0.6rem;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: #fff;
    width: 100%;
}

    .btn-primary:active {
        background: var(--color-primary-light);
    }

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}

#blazor-error-ui {
    display: none;
    background: #C62828;
    color: #fff;
    padding: 0.9rem 1.2rem;
    position: fixed;
    bottom: 0;
    width: 100%;
}

    #blazor-error-ui .reload {
        color: #fff;
        text-decoration: underline;
    }

/* Scanner-Komponente: kompakter Streifen statt Vollbild, wie bei uebliche Scan-Apps */
.scanner {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: 0.8rem;
    overflow: hidden;
    background: #000;
    margin-bottom: 1rem;
}

.scanner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rahmen, der anzeigt, wo der Barcode hingehalten werden soll */
.scanner-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: 55%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Grosse, quadratische Variante fuer QR-Codes (z.B. Geschaefts-Zuordnung am Eingang) -
   etwas kompakter gehalten, damit auf der Startseite auch der Erlaeuterungstext
   ohne Scrollen sichtbar bleibt. */
.scanner.scanner-large {
    height: min(58vw, 260px);
}

.scanner-frame.scanner-frame-large {
    width: 72%;
    height: 72%;
}

.scanner-error {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(198, 40, 40, 0.92);
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    text-align: center;
}

.scanner-feedback {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(46, 125, 50, 0.92);
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 2rem;
    font-weight: 600;
}

/* Scan-Bereich (Geschaefts-Badge, Kamera, Meldungen, Bestaetigungs-Box)
   bleibt beim Scrollen des Warenkorbs sichtbar oben stehen - macht das
   Scannen weiterer Artikel bequemer, ohne jedes Mal nach oben scrollen
   zu muessen. */
.scan-panel {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-bg);
    padding-bottom: 0.5rem;
}

/* Warenkorb */
.cart {
    background: #fff;
    border-radius: 0.8rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.cart-heading {
    margin: 0 0 0.75rem 0;
    font-size: 1.15rem;
}

.cart-empty {
    color: #777;
    margin: 0;
}

.cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cart-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eee;
}

.cart-row-name {
    font-weight: 600;
    /* Darf auf mehrere Zeilen umbrechen statt abgeschnitten zu werden -
       gerade auf schmalen Handy-Bildschirmen sonst kaum lesbar. */
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.cart-row-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cart-row-price {
    font-size: 0.85rem;
    color: #777;
    flex-shrink: 0;
}

.cart-row-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.qty-btn {
    padding: 0.3rem 0.7rem;
    font-size: 1.1rem;
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #ddd;
}

.qty-value {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.cart-row-total {
    min-width: 4.5rem;
    text-align: right;
    font-weight: 600;
    flex-shrink: 0;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.9rem;
    margin-top: 0.4rem;
    font-size: 1.2rem;
    font-weight: 700;
}

/* Hinweis-Boxen */
.notice {
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.notice-warning {
    background: #FFF3CD;
    color: #7A5B00;
    border: 1px solid #FFE69C;
}

.btn-checkout {
    margin-top: 1rem;
}

.checkout-heading {
    margin-top: 0;
}

.qr-box {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 0.8rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.qr-hint {
    margin: 0 0 1rem 0;
    color: #555;
}

.qr-container {
    display: flex;
    justify-content: center;
}

.qr-session-id {
    margin-top: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
}

/* Eingangsseite (Geschaefts-Zuordnung): eine Stufe kleiner als der Rest der
   App - hier geht es (anders als beim Warenkorb) nicht um schnelles
   Ablesen/Treffen im Vorbeigehen, normale Textgroesse reicht. */
.store-login {
    font-size: 0.9rem;
}

.store-login-heading {
    margin-top: 0;
    text-align: center;
}

.store-login-hint {
    color: #555;
    margin-bottom: 1rem;
}

/* Kurze Erlaeuterung des Ablaufs auf der Startseite, unterhalb des QR-Scanners */
.store-login-explainer {
    margin-top: 1.25rem;
    background: #fff;
    border-radius: 0.8rem;
    padding: 0.9rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .store-login-explainer h3 {
        margin: 0 0 0.5rem 0;
        font-size: 0.95rem;
    }

    .store-login-explainer ol {
        margin: 0;
        padding-left: 1.2rem;
        color: #555;
    }

    .store-login-explainer li {
        margin-bottom: 0.4rem;
    }

    .store-login-explainer li:last-child {
        margin-bottom: 0;
    }

/* Geschaefts-Badge auf der Scan-Seite */
.store-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #555;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
    width: auto;
}

/* Bestaetigungs-Box nach erfolgreichem Scan: der Artikel wird erst nach
   ausdruecklicher Bestaetigung in den Warenkorb uebernommen, statt
   automatisch - damit ein Fehl-Scan nicht unbemerkt im Warenkorb landet. */
.confirm-box {
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 0.8rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.confirm-heading {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.3rem;
}

.confirm-article-name {
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.3;
}

.confirm-article-number {
    color: #777;
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.confirm-article-price {
    color: #555;
    margin-top: 0.2rem;
    margin-bottom: 0.9rem;
}

.confirm-actions {
    display: flex;
    gap: 0.75rem;
}

    .confirm-actions .btn-primary,
    .confirm-actions .btn-secondary {
        flex: 1;
        width: auto;
    }

.btn-secondary {
    background: #fff;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

/* ---- Ergänzungen InventurScan (auf Basis des CashProScan-Layouts) ---- */

.scan-result {
    background: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 0.8rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.scan-result-unbekannt {
    border-color: var(--color-danger);
}

.menge-eingabe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

    .menge-eingabe input {
        width: 3.5rem;
        text-align: center;
        font-size: 1.1rem;
        padding: 0.4rem;
        border-radius: 0.4rem;
        border: 1px solid #ddd;
    }

    .menge-eingabe button {
        padding: 0.5rem 0.9rem;
    }

.inventory-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 0.8rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

    .inventory-table th,
    .inventory-table td {
        border-bottom: 1px solid #eee;
        padding: 0.6rem 0.7rem;
        text-align: left;
        font-size: 0.9rem;
    }

    .inventory-table th {
        background: var(--color-bg);
        font-weight: 600;
    }