/* Design-System PLD Pro – siehe DESIGN.md.
   Die Farbtokens leiten sich von den MudBlazor-Palettenvariablen ab, damit
   eigene Elemente den Light-/Dark-Wechsel ohne Doppelpflege mitmachen. */

:root {
    --pld-surface: var(--mud-palette-surface);
    --pld-background: var(--mud-palette-background);
    --pld-border: var(--mud-palette-lines-default);
    --pld-text-primary: var(--mud-palette-text-primary);
    --pld-text-secondary: var(--mud-palette-text-secondary);
    --pld-primary: var(--mud-palette-primary);
    --pld-accent: var(--mud-palette-warning);
    --pld-success: var(--mud-palette-success);
    --pld-info: var(--mud-palette-info);
    --pld-error: var(--mud-palette-error);

    --pld-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --pld-row-height: 48px;
    --pld-stripe-width: 4px;
}

/* --- Signature 1: Kategorie-Farbstreifen (DESIGN.md, Abschnitt 1) ---------
   Eine leichte Anspielung auf physische Ablage-Register. Wird auf
   Tabellenzeilen und Karten angewendet, nicht punktuell. */

/* Seit die Kategorien Mandanten-Stammdaten sind, benennen die Klassen die
   Farbe und nicht mehr die Kategorie – ein Mandant kann seine Kategorien frei
   benennen, die Palette bleibt fest (DESIGN.md, Abschnitt 1). */
.pld-cat-primary { --pld-category-color: var(--pld-primary); }
.pld-cat-accent { --pld-category-color: var(--pld-accent); }
.pld-cat-info { --pld-category-color: var(--pld-info); }
.pld-cat-success { --pld-category-color: var(--pld-success); }
.pld-cat-neutral { --pld-category-color: var(--pld-text-secondary); }

.pld-row > td:first-child {
    border-left: var(--pld-stripe-width) solid var(--pld-category-color, transparent);
}

.pld-row > td {
    height: var(--pld-row-height);
}

.pld-card {
    border-left: var(--pld-stripe-width) solid var(--pld-category-color, transparent);
}

.pld-category-dot {
    background: var(--pld-category-color, var(--pld-text-secondary));
    border-radius: 2px;
    display: inline-block;
    height: 14px;
    margin-right: .5rem;
    vertical-align: -2px;
    width: 4px;
}

/* --- Ordnerbaum der Kundenakte (DESIGN.md, Abschnitt 9) -------------------
   Bewusst kein zweiter Farbcode: der Kategorie-Streifen oben bleibt das
   einzige Farbsignal, Kunden und Ordner tragen keine eigene Farbe.

   Die Einrueckung kommt aus DocumentFolder.Depth, nicht aus verschachteltem
   Markup – der Baum kommt bereits in Anzeigereihenfolge aus dem Service. */
.pld-folder-row {
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    gap: .25rem;
    /* 44px statt der 48px der Tabellenzeilen: der Baum ist dichter, bleibt
       aber ueber der Mindestgroesse fuer Touch-Ziele. */
    min-height: 44px;
    padding: 0 .5rem;
}

.pld-folder-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.pld-folder-selected {
    background: var(--mud-palette-action-default-hover);
    font-weight: 600;
}

/* Eigene Trefferflaeche fuers Auf- und Zuklappen. Ein Tippen auf den Namen
   waehlt den Ordner aus, es klappt ihn nicht auf. */
.pld-folder-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 32px;
}

.pld-folder-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Abschnitt "Belegdaten" auf der Upload-Seite ist zugeklappt der
   Normalfall und soll dann nicht wie eine eigene Karte wirken. */
.pld-upload-belegdaten {
    background: transparent;
}

/* --- Dokumentvorschau (DESIGN.md, Abschnitt 10) ---------------------------
   Die Vorschau soll auf einem Laptop ohne Scrollen erkennbar sein, aber die
   Metadaten darunter nicht aus dem Bild schieben – daher eine Hoehe in vh mit
   Deckel, kein fester Pixelwert. */

.pld-preview-frame {
    background: var(--pld-background);
    border: 1px solid var(--pld-border);
    border-radius: 8px;
    display: block;
    height: min(70vh, 760px);
    width: 100%;
}

/* Der Kasten traegt den Hintergrund, nicht das Bild: ein PNG mit
   Transparenz waere auf der Flaeche sonst je nach Theme unlesbar. */
.pld-preview-image-box {
    align-items: center;
    background: var(--pld-background);
    border: 1px solid var(--pld-border);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    max-height: min(70vh, 760px);
    overflow: auto;
    padding: 1rem;
}

.pld-preview-image {
    max-width: 100%;
    object-fit: contain;
}

/* pre bricht von sich aus nicht um. Ohne pre-wrap laeuft eine CSV-Zeile
   waagrecht aus der Karte heraus. */
.pld-preview-text {
    background: var(--pld-background);
    border: 1px solid var(--pld-border);
    border-radius: 8px;
    color: var(--pld-text-primary);
    font-family: var(--pld-font-mono);
    font-size: .8125rem;
    line-height: 1.5;
    margin: 0;
    max-height: min(70vh, 760px);
    overflow: auto;
    padding: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Signature 2: Systemdaten in Mono (DESIGN.md, Abschnitt 3) ------------
   Signalisiert "Maschinendaten" gegenueber Freitext. */

.pld-mono,
.pld-mono code {
    color: var(--pld-text-secondary);
    font-family: var(--pld-font-mono);
    font-size: .8125rem;
    letter-spacing: -.01em;
}

.pld-mono-strong {
    color: var(--pld-text-primary);
    font-family: var(--pld-font-mono);
    font-size: .8125rem;
}

/* --- Status-Chips: heller Tint statt vollem Farbfeld ----------------------
   Wirkt bei vielen Zeilen deutlich ruhiger als der MudBlazor-Default. */

.pld-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: .4rem;
    line-height: 1;
    padding: .3rem .6rem .3rem .5rem;
    white-space: nowrap;
}

.pld-status::before {
    background: currentColor;
    border-radius: 50%;
    content: "";
    height: 6px;
    width: 6px;
}

.pld-status-eingegangen {
    background: color-mix(in srgb, var(--pld-info) 14%, transparent);
    color: var(--pld-info);
}

.pld-status-freigegeben {
    background: color-mix(in srgb, var(--pld-success) 14%, transparent);
    color: var(--pld-success);
}

.pld-status-bezahlt {
    background: color-mix(in srgb, var(--pld-primary) 14%, transparent);
    color: var(--pld-primary);
}

/* --- KPI-Kacheln ---------------------------------------------------------- */

.pld-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.pld-kpi-label {
    color: var(--pld-text-secondary);
    font-size: .875rem;
}

.pld-kpi-context {
    color: var(--pld-text-secondary);
    font-family: var(--pld-font-mono);
    font-size: .75rem;
}

/* --- Bewegung (DESIGN.md, Abschnitt 5) ------------------------------------
   Hover nur als leichte Elevation, keine Skalierung, kein Bounce. */

.pld-hoverable {
    transition: box-shadow 120ms ease-in-out;
}

.pld-hoverable:hover {
    box-shadow: 0 2px 8px rgba(26, 32, 39, .12);
}

.pld-fade-in {
    animation: pld-fade 140ms ease-out;
}

@keyframes pld-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pld-hoverable,
    .pld-fade-in {
        animation: none;
        transition: none;
    }
}

/* --- Topbar / Marke -------------------------------------------------------- */

.pld-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.pld-brand img {
    display: block;
    height: 28px;
    width: 28px;
}

.pld-brand-name {
    font-weight: 700;
    letter-spacing: -.01em;
}

.pld-tenant-name {
    border-left: 1px solid var(--pld-border);
    color: var(--pld-text-secondary);
    margin-left: .875rem;
    padding-left: .875rem;
}

/* --- Fehlerbanner ---------------------------------------------------------- */

#blazor-error-ui {
    background: #ffe6e6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    color: #1A2027;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* --- Anmeldung / Fehlerseiten (eigenstaendig, ohne MudBlazor-Provider) ----- */

.pld-minimal-layout {
    align-items: center;
    background: #F7F8FA;
    display: flex;
    font-family: Inter, "Segoe UI", Helvetica, Arial, sans-serif;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.pld-minimal-card {
    background: #FFFFFF;
    border: 1px solid #E2E5EA;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(26, 32, 39, .08);
    color: #1A2027;
    max-width: 24rem;
    padding: 2rem;
    width: 100%;
}

.pld-minimal-brand {
    align-items: center;
    display: flex;
    gap: .625rem;
    margin: 0 0 1.5rem;
}

.pld-minimal-brand img {
    height: 32px;
    width: 32px;
}

.pld-minimal-brand span {
    font-family: Manrope, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
}

.pld-minimal-brand .pld-minimal-brand-accent {
    color: #E8935B;
}

.pld-minimal-title {
    font-family: Manrope, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.pld-field {
    display: block;
    margin-bottom: 1rem;
}

.pld-field > span {
    color: #5B6472;
    display: block;
    font-size: .875rem;
    margin-bottom: .25rem;
}

.pld-field input {
    border: 1px solid #E2E5EA;
    border-radius: 6px;
    box-sizing: border-box;
    font: inherit;
    padding: .55rem .65rem;
    width: 100%;
}

.pld-field input:focus {
    border-color: #1F6F78;
    outline: 2px solid rgba(31, 111, 120, .2);
}

.pld-checkbox {
    align-items: center;
    display: flex;
    font-size: .875rem;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.pld-button {
    background: #1F6F78;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: .6rem 1rem;
    width: 100%;
}

.pld-button:hover {
    background: #17565D;
}

.pld-alert {
    background: rgba(214, 69, 69, .1);
    border-radius: 6px;
    color: #D64545;
    font-size: .875rem;
    margin: 0 0 1rem;
    padding: .6rem .75rem;
}

.pld-hint {
    color: #5B6472;
    font-size: .8125rem;
    margin: 1.25rem 0 0;
}

.pld-link {
    color: #1F6F78;
}

.validation-message {
    color: #D64545;
    display: block;
    font-size: .8125rem;
    margin-top: .25rem;
}