/* =====================================================================================================================
   KUNDENPORTAL-THEME (29.10.2026, Vorgaben Bastian: „Generell zum Kundenbereich, kannst du den nochmal etwas cooler gestalten?“ und
   „mache die Boxen höher, das sieht so gedrungen aus“).

   Gilt NUR, solange das Kundenlayout steht (MainLayout „kunden-seite“) – der Client-Bereich bleibt im kantigen Desktop-Bild
   (nemesis-design.css). Wie die Anmeldung ist das Portal die Visitenkarte, keine Maske, und darf deshalb luftiger sein:
   - getönte Seite, Karten (Kacheln, Aktionsleiste) weiß mit Rundung 10 und weichem Schatten,
   - Eingabefelder 32 hoch mit Rundung 6 und Fokusring, Knöpfe 32/28/22, Tabellenzeilen 32,
   - Grundschrift 14 px wie OfficeController (Radzen-Theme „software“) – 29.10.2026, Vorgaben Bastian „Schriftgrad im Kundenbereich +1“,
     „Stell es auf 14 px wie OfficeController“ und „Setze auch den Clientbereich auf 14px“: kommt jetzt für alle aus nemesis-design.css.
   - Kachel- und Seitentitel etwas größer (15 bzw. 17 px – Ausnahme von „keine neuen Schriftgrößen“ wie bei der Anmeldung).
   Farben nur aus der Palette (--nem-*), Hell und Dunkel ohne zweite Regel außer Seite und Schatten.

   Wird NACH nemesis-design.css geladen (index.html); das Präfix html:has(.kunden-seite) hebt die Regeln zugleich über das
   komponentengebundene CSS (Nemesis.WebApp.Client.styles.css kommt danach). Variablen stehen am <html>, damit sie auch in Radzen-Dialogen,
   Aufklapplisten und Meldungen gelten, die <RadzenComponents /> außerhalb von .kunden-seite rendert.
   ===================================================================================================================== */

html:has(.kunden-seite) {
    --kp-seite: color-mix(in srgb, var(--nem-akzent) 6%, var(--nem-flaeche));
    --kp-karte: var(--nem-karte);
    --kp-radius: 10px;
    --kp-radius-klein: 6px;
    --kp-schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .07);
    --kp-schatten-knopf: 0 2px 6px rgba(16, 24, 40, .18);
    --kp-fokus: 0 0 0 3px color-mix(in srgb, var(--nem-akzent) 28%, transparent);
    --kp-feld: 32px;

    /* Grundschrift 14 px wie OfficeController. Seit 14.11.2026 hat der Client-Bereich 13 px (nemesis-design.css) – das Portal behält 14 px samt
       der Höhen, die daran hängen (wirkt über --nem-schriftgroesse auch auf die Radzen-/Bootstrap-Schriftgrößen). */
    --nem-schriftgroesse: 14px;
    --nem-zeilenhoehe: 18px;
    --nem-feld-hoehe: 26px;
    --nem-zeile: 30px;
    --nem-knopf-mini: 22px;

    /* Radzen-Eingaben 32 hoch (TextBox, Numeric, DropDown, DatePicker, FormField) – vorher 22 wie der Desktop */
    --rz-input-size-md: var(--kp-feld);
    --rz-input-padding-block-md: 6px;
    --rz-input-padding-inline-md: 10px;
    --rz-input-padding-block: 6px;
    --rz-input-padding-inline: 10px;
    --rz-input-border-radius: var(--kp-radius-klein);
    --rz-input-focus-shadow: var(--kp-fokus);
    --rz-form-field-focus-shadow: var(--kp-fokus);
    --rz-text-area-padding-block: 6px;
    --rz-numeric-input-padding-block-md: 6px;
    --rz-numeric-input-padding-inline-md: 10px 24px;
    --rz-numeric-button-height-md: 14px;
    --rz-datepicker-trigger-icon-size-md: 18px;
    --rz-dropdown-item-padding: 7px 10px;
    --rz-checkbox-width: 16px;
    --rz-checkbox-height: 16px;

    /* Radzen-Knöpfe 32 / 28 / 22 */
    --rz-button-size-md: 32px;
    --rz-button-size-sm: 28px;
    --rz-button-size-xs: 22px;

    /* Dialoge und Meldungen weicher */
    --rz-dialog-border-radius: 12px;
    --rz-notification-border-radius: 8px;
}

html[data-theme="dunkel"]:has(.kunden-seite) {
    --kp-seite: color-mix(in srgb, #000000 30%, var(--nem-flaeche));
    --kp-schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .30);
    --kp-schatten-knopf: 0 2px 6px rgba(0, 0, 0, .45);
}

/* ---------- Seite ---------- */
html:has(.kunden-seite),
html:has(.kunden-seite) body,
html:has(.kunden-seite) .kunden-seite {
    background-color: var(--kp-seite);
}

/* Menü (Shared/CustomerNavBar) bleibt beim Rollen oben stehen. */
html:has(.kunden-seite) .kunden-kopf {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* ---------- Overlays (MaskenOverlay, NemesisRueckfrage …) mittig im Fenster ----------
   29.10.2026, Rückmeldung Bastian zum Export-Dialog des Grids „zu weit oben, es muss mittig auf dem Bildschirm liegen“: im Client-Bereich
   liegen Overlays wie im Desktop oben über der Maske (Rand 45/30/30/30), das Portal hat keinen Reiterbereich – dort gilt das ganze Fenster,
   und die Karte steht in der Mitte (gleichmäßiger Rand, Karte nie größer als die Fläche). */
html:has(.kunden-seite) .nem-overlay-schleier {
    align-items: center;
    padding: 30px;
}

html:has(.kunden-seite) .nem-overlay-karte {
    border-radius: var(--kp-radius);
}

/* ---------- Kacheln (NemesisKachel) als Karten ---------- */
html:has(.kunden-seite) .nem-kachel {
    --nem-k-flaeche: var(--kp-karte);
    margin-bottom: 12px;
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-schatten);
}

html:has(.kunden-seite) .nem-kachel .nem-kachel,
html:has(.kunden-seite) .nem-kachel .rz-fieldset {
    box-shadow: none;
}

html:has(.kunden-seite) .nem-kachel-kopf {
    min-height: 24px;
    padding: 10px 14px 0 14px;
}

html:has(.kunden-seite) .nem-kachel-titel {
    font-size: 15px;
}

html:has(.kunden-seite) .nem-kachel-symbol {
    margin-right: 8px;
    font-size: 18px;
    width: 18px;
    height: 18px;
}

html:has(.kunden-seite) .nem-kachel-hinweis {
    padding: 2px 14px 0 15px;
}

html:has(.kunden-seite) .nem-kachel-inhalt {
    padding: 8px 14px 12px 14px;
}

html:has(.kunden-seite) .nem-kachel-kopf ~ .nem-kachel-inhalt,
html:has(.kunden-seite) .nem-kachel-hinweis ~ .nem-kachel-inhalt {
    padding-top: 10px;
}

html:has(.kunden-seite) .nem-kachel-buendig > .nem-kachel-inhalt {
    padding: 0;
}

html:has(.kunden-seite) .nem-kachel-buendig > .nem-kachel-kopf ~ .nem-kachel-inhalt {
    padding-top: 10px;
}

html:has(.kunden-seite) .nem-kachel-fuss {
    min-height: 32px;
    padding: 4px 14px;
    border-radius: 0 0 calc(var(--kp-radius) - 1px) 0;
}

/* ---------- Aktionsleiste (Shared/KundenAktionsleiste) ---------- */
html:has(.kunden-seite) .kal {
    min-height: 54px;
    margin-bottom: 12px;
    padding: 10px 16px;
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-schatten);
}

/* Symbol im getönten Kreis */
html:has(.kunden-seite) .kal .kal-titel .kal-symbol {
    box-sizing: content-box;
    width: 20px;
    height: 20px;
    padding: 7px;
    font-size: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nem-akzent) 14%, transparent);
}

html:has(.kunden-seite) .kal .kal-titel {
    gap: 10px;
}

html:has(.kunden-seite) .kal .kal-texte {
    line-height: 18px;
}

    html:has(.kunden-seite) .kal .kal-texte > strong {
        font-size: 17px;
    }

html:has(.kunden-seite) .kal .kal-aktionen {
    gap: 6px;
}

/* In einer Kachel bzw. Karte bleibt die Leiste flach (Kopfzeile). */
html:has(.kunden-seite) :is(.nem-kachel, .rz-card, .rz-fieldset) .kal {
    min-height: 0;
    margin-bottom: 8px;
    padding: 0 0 8px 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Knöpfe (Radzen): höher, beim Überfahren leicht angehoben ---------- */
html:has(.kunden-seite) .rz-button-md {
    padding: 7px 14px;
}

html:has(.kunden-seite) .rz-button-sm {
    padding: 5px 12px;
}

html:has(.kunden-seite) .rz-button-xs {
    padding: 3px 6px;
}

html:has(.kunden-seite) .rz-button-md.rz-button-icon-left,
html:has(.kunden-seite) .rz-button-sm.rz-button-icon-left {
    padding-inline-start: 10px;
}

html:has(.kunden-seite) .rz-button {
    transition: background-color .15s ease, box-shadow .15s ease;
}

    html:has(.kunden-seite) .rz-button:not(.rz-state-disabled):not(:disabled):not(.rz-variant-text):hover {
        box-shadow: var(--kp-schatten-knopf);
    }

/* ---------- Eigene Eingabefelder (nem-feld, Bootstrap) wie die Radzen-Felder ---------- */
html:has(.kunden-seite) .kunden-seite :is(input.nem-feld, select.nem-feld, .form-control, .form-select) {
    height: var(--kp-feld);
    padding: 4px 10px;
    border-radius: var(--kp-radius-klein);
    box-sizing: border-box;
}

    html:has(.kunden-seite) .kunden-seite :is(input.nem-feld, select.nem-feld, .form-control, .form-select):focus {
        border-color: var(--nem-akzent);
        box-shadow: var(--kp-fokus);
        outline: none;
    }

/* Mengen rechtsbündig (29.10.2026, Vorgabe Bastian „die Mengen in der Textbox auch rechts“): jedes Zahlenfeld (RadzenNumeric) des Portals.
   !important, weil RadzenNumeric die Ausrichtung (Parameter TextAlign, Vorgabe links) als Inline-Stil an das Eingabefeld schreibt. */
html:has(.kunden-seite) .rz-numeric .rz-numeric-input {
    text-align: right !important;
}

/* ---------- Tabellen (NemesisDataGrid, Bootstrap-.table): Zeilen 32 ---------- */
html:has(.kunden-seite) .table > :not(caption) > * > * {
    padding: 7px 10px;   /* 7 + Zeile 18 + 7 = 32 */
}

/* Zellen mit Eingabe oder Knopf: schmaler gepolstert, damit die Zeile 32 bleibt bzw. nur wenig wächst (nicht die Detailzeile darunter). */
html:has(.kunden-seite) .table > tbody > tr:not(.ndg-details) > td:has(input, select, textarea, .rz-numeric, .rz-dropdown, .rz-datepicker, .rz-button) {
    padding-block: 2px;
}

/* Leiste des Grids: Suchfeld 32 (nem-feld oben), Knöpfe 28, Löschkreuz und Trefferzahl mittig im höheren Feld. */
html:has(.kunden-seite) .ndg-knopf {
    height: 28px;
    padding: 0 10px;
}

html:has(.kunden-seite) .ndg-such-weg {
    height: var(--kp-feld);
}

html:has(.kunden-seite) .ndg-treffer {
    line-height: var(--kp-feld);
}

/* ---------- Dashboard (Customer/CusDashboardView): Kacheln füllen die Höhe bis zur Fußzeile ---------- */
/* Eigenes Raster statt Bootstrap row/col (bündig mit der Aktionsleiste): untereinander, ab 1200 px zwei Spalten nebeneinander. */
.kd-reihe {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(320px, 1fr);
    gap: 12px;
}

@media (min-width: 1200px) {
    .kd-reihe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.kd-spalte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

html:has(.kunden-seite) .kd-spalte > .nem-kachel {
    flex: 1 1 auto;
    margin-bottom: 0;
}

/* Sprung aus einer Dashboard-Kachel (Fußzeile, z. B. „Sollmengen verwalten“, 29.10.2026): Symbol + Text in der Akzentfarbe. */
.kd-fuss-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--nem-akzent);
    text-decoration: none;
}

    .kd-fuss-link:hover {
        text-decoration: underline;
    }

    .kd-fuss-link .rzi {
        font-size: 16px;
        width: 16px;
        height: 16px;
    }

/* Hinweise der Lagererfassung (29.10.2026, Vorgabe Bastian): drei Zeilen sichtbar, Zeilenumbruch, Text oben – nicht auf die 32 px der Felder
   zusammengedrückt (Radzen gibt Eingaben die Feldhöhe). */
html:has(.kunden-seite) textarea.kp-hinweise {
    height: auto;
    min-height: calc(3 * 20px + 12px);
    line-height: 20px;
    padding-block: 6px;
    vertical-align: top;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    resize: vertical;
}