/* /WebApp/AppShell.razor.rz.scp.css */
.bg[b-4vkpmpvesx] {
    color: var(--theme-text);
}
/* /WebApp/Components/AboutDialog.razor.rz.scp.css */
/* Logo-Switch (.logo-light/.logo-dark) ist global in app.css definiert. */

.background[b-66vjz0ry1t] {
    background-image: linear-gradient(to bottom,
        color-mix(in srgb, var(--theme-surface) 50%, transparent) 0%,
        color-mix(in srgb, var(--theme-surface) 50%, transparent) 100%),
        url(assets/backgroundX.svg);
    background-repeat: no-repeat;
    background-position: right;
}

.modulesBox[b-66vjz0ry1t] {
    height: 250px;
    overflow: auto;
    border: var(--rz-listbox-border);
    background: var(--theme-surface);
}
/* /WebApp/Components/AiAssistent/AiAssistentPane.razor.rz.scp.css */
.resize-layout[b-6tnkbfea36] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.resize-handle[b-6tnkbfea36] {
    flex: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rz-splitter-bar-background-color);
    opacity: 0.4;
    user-select: none;
    touch-action: none;
}

.resize-handle[b-6tnkbfea36]::before {
    content: '';
    width: 0;
    height: 16px;
    border: 1px solid var(--rz-splitter-bar-color);
    border-radius: 1px;
    margin: 2px 0;
}

.resize-handle:hover[b-6tnkbfea36] {
    opacity: var(--rz-splitter-bar-hover-opacity);
    cursor: col-resize;
}

.resize-handle:active[b-6tnkbfea36] {
    background-color: var(--rz-splitter-bar-background-color-active);
    opacity: var(--rz-splitter-bar-hover-opacity);
}

.resize-handle:active[b-6tnkbfea36]::before {
    border-color: var(--rz-splitter-bar-color-active);
}

.resize-content[b-6tnkbfea36] {
    flex: 1;
    min-width: 0;
}
/* /WebApp/Components/AiAssistent/AiChat.razor.rz.scp.css */
.ai-chat[b-47n2ox405u] {
    flex: 1;
    width: 100%;
    min-width: 0;
    /* Leicht getönter Hintergrund über den GESAMTEN Chat (Nachrichten + Eingabebereich + Knöpfe),
       damit sich die hellen Bubbles und das weiße Eingabefeld abheben und kein weißer Streifen bleibt. */
    background: var(--rz-base-100);
}

.ai-chat-messages[b-47n2ox405u] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.ai-chat-row[b-47n2ox405u] {
    max-width: 100%;
}

.ai-chat-avatar[b-47n2ox405u] {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.ai-chat-bubble[b-47n2ox405u] {
    max-width: 80%;
    padding: 0.4rem 0.6rem;
    border-radius: 0.75rem;
}

.ai-chat-bubble-user[b-47n2ox405u] {
    background: var(--rz-primary-light, var(--rz-base-200));
    border-bottom-right-radius: 0.25rem;
}

.ai-chat-bubble-assistant[b-47n2ox405u] {
    background: var(--rz-base-background-color, var(--rz-base-100));
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.08));
    border-bottom-left-radius: 0.25rem;
}

.ai-chat-user-text[b-47n2ox405u] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.ai-chat-input[b-47n2ox405u] {
    flex: 0 0 auto;
    border-top: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.08));
}

.ai-chat-input-field[b-47n2ox405u] {
    flex: 1;
    min-width: 0;
}

.ai-chat-warning[b-47n2ox405u] {
    margin-top: 0.375rem;
}

.ai-chat-warning-icon[b-47n2ox405u] {
    flex: 0 0 auto;
    color: var(--rz-warning, var(--rz-warning-dark));
    font-size: 1rem;
}

.ai-chat-warning-text[b-47n2ox405u] {
    color: var(--rz-text-tertiary-color);
}
/* /WebApp/Components/AiAssistent/AiChatProcessLog.razor.rz.scp.css */
.ai-process-log[b-mh1um3wlcw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ai-process-step[b-mh1um3wlcw] {
    border: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.1));
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--rz-base-100, #f7f7f7);
    overflow: hidden;
    min-width: 0;
}

/* Linker Rand signalisiert den Zustand: erledigt = gruen, laufend = gelb, Gedankengang = lila. */
.ai-process-step.is-done[b-mh1um3wlcw] {
    border-left-color: var(--rz-success, #2e7d32);
}

.ai-process-step.is-active[b-mh1um3wlcw] {
    border-left-color: var(--rz-warning, #ed6c02);
}

.ai-process-step-reasoning.is-active[b-mh1um3wlcw] {
    border-left-color: var(--rz-primary, #6a4bff);
}

.ai-process-step-head[b-mh1um3wlcw] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}

.ai-process-step-title[b-mh1um3wlcw] {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: var(--ff-weight-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge and chevron sit on Radzen components (isolation scope does not reach them); their layout
   rules live globally in app.css. */
.ai-process-step-check[b-mh1um3wlcw] {
    flex: 0 0 auto;
    color: var(--rz-success, #2e7d32);
    font-size: 1.1rem;
}

.ai-process-step-detail[b-mh1um3wlcw] {
    padding: 0.5rem 0.6rem;
    border-top: 1px solid var(--rz-border-color, rgba(0, 0, 0, 0.08));
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}
/* /WebApp/Components/AiAssistent/MarkdownView.razor.rz.scp.css */
.markdown-view[b-6hsmw4mpjf] {
    word-break: break-word;
    overflow-wrap: anywhere;
}

.markdown-view[b-6hsmw4mpjf]  p {
    margin: 0 0 0.5rem;
}

.markdown-view[b-6hsmw4mpjf]  p:last-child {
    margin-bottom: 0;
}

.markdown-view[b-6hsmw4mpjf]  code {
    font-family: var(--rz-code-font-family, ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace);
    font-size: 0.85em;
    background: var(--rz-base-200, rgba(0, 0, 0, 0.06));
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.markdown-view[b-6hsmw4mpjf]  pre {
    background: var(--rz-base-200, rgba(0, 0, 0, 0.06));
    padding: 0.75rem;
    border-radius: 6px;
    overflow-x: auto;
}

.markdown-view[b-6hsmw4mpjf]  pre code {
    background: none;
    padding: 0;
    font-size: 0.85em;
    white-space: pre;
}
/* /WebApp/Components/CultureSelect.razor.rz.scp.css */
[b-8k94lm0ddg] .rz-button {
    width: 100%;
}
[b-8k94lm0ddg] .rz-button-box {
    justify-content: space-between;
    width: 100%;
}
/* /WebApp/Components/ModuleCardSection.razor.rz.scp.css */
/* Moduleinstieg-Kacheln im FINNOFLEET-Design-System v2: harte Kanten (kein Radius),
   Anthrazit-Kopf mit Neon-Icon, Beschreibung auf der Grundfläche.
   Vorlage ist der App-Shell-Mock aus Epic #36855 (Branch feature/momo/finnofleet-designsystem,
   docs/Features/finnofleet-design-system/mockups/app-shell.html im Monorepo-Root). */

.cardGrid[b-8b4gtynd1q] {
    display: grid;
    /* min() verhindert, dass die Spalte auf schmalen Viewports breiter wird als der Container. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
}

.moduleCard[b-8b4gtynd1q] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--theme-card-border);
    border-radius: 0;
    background: var(--theme-surface);
    color: var(--theme-text);
    text-decoration: none;
    transition: transform .12s ease;
}

.moduleCard:hover[b-8b4gtynd1q] {
    transform: translateY(-2px);
}

/* Nicht --theme-accent: Neon auf weißer Seitenfläche ergibt nur ~1.3:1 (app.css: "Akzent nur auf
   dunklen/neutralen Flächen"). --theme-text liegt in beiden Modi bei ~12:1 gegen die Seitenfläche. */
.moduleCard:focus-visible[b-8b4gtynd1q] {
    outline: 2px solid var(--theme-text);
    outline-offset: 2px;
}

.moduleCard .head[b-8b4gtynd1q] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
    min-height: 108px;
    padding: 1rem;

    /* Header-Token statt --ff-anthracite: im Hellmodus Anthrazit wie im Mock, im Dunkelmodus
       eine abgesetzte Fläche — sonst fiele der Kopf mit dem anthrazitfarbenen Seitengrund zusammen. */
    background: var(--theme-header-bg);
}

.moduleCard .head .name[b-8b4gtynd1q] {
    color: var(--theme-header-text);
    font-size: 1.5rem;
    font-weight: var(--ff-weight-strong);
}

/* ::deep, weil RadzenIcon das Scope-Attribut nicht auf sein Wurzelelement schreibt.
   Die Klasse heißt .rzi (nicht .rz-icon), die Größe kommt über --rz-icon-size. */
.moduleCard .head[b-8b4gtynd1q]  .rzi {
    align-self: flex-start;  /* Radzen zentriert das Icon sonst über die Kachelbreite. */
    width: auto;
    font-size: 2.75rem;
    color: var(--ff-neon);
}

.moduleCard .body[b-8b4gtynd1q] {
    padding: 1rem;
    color: var(--theme-text-muted);
    line-height: 1.4;

    /* Platz für zwei Beschreibungszeilen (box-sizing: border-box, Innenabstand eingerechnet):
       hält Kacheln mit kurzer oder ohne Beschreibung auf der Höhe ihrer Nachbarn. */
    min-height: calc(2 * 1.4em + 2rem);
}
/* /WebApp/Layout/Components/AppearanceToggle.razor.rz.scp.css */
/* Popup-Optionsbuttons wie bei der Sprachauswahl (CultureSelect): volle Breite, Inhalt mit
   Space-Between, damit Icon + Klartext links und das Häkchen des aktiven Eintrags rechts sitzen. */
[b-qwxsj4ray6] .rz-button {
    width: 100%;
}

[b-qwxsj4ray6] .rz-button-box {
    justify-content: space-between;
    width: 100%;
}
/* /WebApp/Layout/Components/PartsMenu.razor.rz.scp.css */
.workspaceArea[b-bqjminmcvy] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

[b-bqjminmcvy] .managementArea .rz-button {
    width: 100%;
}

[b-bqjminmcvy] .managementArea .rz-button-box {
    justify-content: flex-start;
    width: 100%;
}

.checkbox[b-bqjminmcvy] {
    margin: 0;
    position: absolute;
    display: block;
    height: 24px;
    width: 24px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.hamburger-lines[b-bqjminmcvy] {
    display: block;
    height: 20px;
    min-width: 24px;
    width: 24px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger-lines .line[b-bqjminmcvy] {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: var(--theme-accent);
}

.hamburger-lines .line1[b-bqjminmcvy] {
    transform-origin: 0 0;
    transition: transform 0.4s ease-in-out;
}

.hamburger-lines .line2[b-bqjminmcvy] {
    transform-origin: 0 0;
    transition: transform 0.4s ease-in;
    transform: scaleX(1);
}

.hamburger-lines .line3[b-bqjminmcvy] {
    transform-origin: 0 100%;
    transition: transform 0.4s ease-in-out;
}

.hamburger-lines input[type="checkbox"]:checked ~ .line1[b-bqjminmcvy] {
    transform: rotate(45deg);
}

.hamburger-lines input[type="checkbox"]:checked ~ .line2[b-bqjminmcvy] {
    transform: scaleX(0);
    transition: transform 0.2s ease-out;
}

.hamburger-lines input[type="checkbox"]:checked ~ .line3[b-bqjminmcvy] {
    transform: rotate(-45deg);
}
/* /WebApp/Layout/MainFooter.razor.rz.scp.css */
.footer-bar[b-mft3aarnwt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    height: 22px;
    font-size: 0.7rem;
}

.footer-left[b-mft3aarnwt],
.footer-right[b-mft3aarnwt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Footer-Grund ist Anthrazit (--theme-header-bg); --theme-text-muted (#666666) erreicht darauf
   keinen AA-Kontrast, daher heller Brand-Grey (--ff-grey-300, ~7:1 auf #333333) für Sekundärtext. */
[b-mft3aarnwt] .footer-icon {
    font-size: 0.75rem !important;
    color: var(--ff-grey-300);
}

.footer-connection-name[b-mft3aarnwt] {
    color: var(--theme-header-text);
    /* Abhebung vom Provider-Text über die hellere Farbe (oben), nicht über ein Sonder-Gewicht —
       Schriftstärke folgt dem globalen Zwei-Stufen-Schema (Standard). */
    font-weight: var(--ff-weight-normal);
}

.footer-provider[b-mft3aarnwt] {
    color: var(--ff-grey-300);
}

.footer-connection-string[b-mft3aarnwt] {
    color: var(--ff-grey-300);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.footer-separator[b-mft3aarnwt] {
    color: var(--ff-grey-300);
}

.footer-version[b-mft3aarnwt] {
    color: var(--theme-header-text);
}

.footer-environment[b-mft3aarnwt] {
    color: var(--ff-grey-300);
}
/* /WebApp/Layout/MainHeader.razor.rz.scp.css */
[b-mnpd150mf2] .smaller-gap {
    .rz-button-box {
        gap: 0.125rem;
    }
}

/* /WebApp/Layout/MainSidebar.razor.rz.scp.css */
/* Menü-Items füllen die (per Splitter variable) Sidebar-Breite; bei schmaler Sidebar
   greift das Text-Ellipsis unten. Früher fix 175px — passte nicht zur Resize-Funktion. */
[b-wmssfysop6] .rz-navigation-item-wrapper {
    width: 100%;
}

[b-wmssfysop6] .rz-navigation-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Splitter (gleicher Mechanismus wie AiAssistentPane, Griff an der rechten Kante) --- */
.resize-layout[b-wmssfysop6] {
    display: flex;
    height: 100%;
}

.resize-content[b-wmssfysop6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.resize-handle[b-wmssfysop6] {
    flex: 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--rz-splitter-bar-background-color);
    opacity: 0.4;
    user-select: none;
    touch-action: none;
}

.resize-handle[b-wmssfysop6]::before {
    content: '';
    width: 0;
    height: 16px;
    border: 1px solid var(--rz-splitter-bar-color);
    border-radius: 1px;
    margin: 2px 0;
}

.resize-handle:hover[b-wmssfysop6] {
    opacity: var(--rz-splitter-bar-hover-opacity);
    cursor: col-resize;
}

.resize-handle:active[b-wmssfysop6] {
    background-color: var(--rz-splitter-bar-background-color-active);
    opacity: var(--rz-splitter-bar-hover-opacity);
}

.resize-handle:active[b-wmssfysop6]::before {
    border-color: var(--rz-splitter-bar-color-active);
}

/* Link-Wrapper um das Footer-Logo (führt zur Startseite). display: contents nimmt den Anchor aus
   dem Box-Layout — die Logo-Bilder bleiben direkte Flex-Kinder des Sidebar-Stacks (Layout exakt
   wie ohne Link), sind aber über den Anchor klickbar. Das native <a> (siehe MainSidebar.razor)
   trägt das Scope-Attribut, daher greift diese Regel ohne ::deep. */
/* Flex-Wrapper zentriert das Logo horizontal, ohne dessen display anzufassen — der Light/Dark-
   Logo-Switch in app.css schaltet die Bilder per display:none/block, das darf hier nicht überschrieben
   werden (sonst werden beide Logos sichtbar). Daher Zentrierung über den Link, nicht über das img. */
.sidebar-brand-link[b-wmssfysop6] {
    display: flex;
    justify-content: center;
}

/* Dezenter Marken-Watermark am Sidebar-Fuß: bewusst zurückhaltende Deckkraft (0.5) in BEIDEN Modi.
   Positiv-Logo (dunkel) auf hellem Grund bzw. Negativ-Logo (weiß) auf dunklem Grund sind als
   zurückhaltendes Branding gewollt, nicht als primäres Bedienelement. ::deep, weil das gestylte
   RadzenImage-img selbst kein Scope-Attribut trägt — der scoped <a>-Vorfahr macht das Matching. */
/* Logo behält sein Seitenverhältnis (height:auto) und wird nur über max-height begrenzt — width:100%
   würde es bei der per Splitter variablen Sidebar-Breite in die Breite ziehen und verzerren.
   display:block + margin:0 auto zentriert horizontal unabhängig von der Sidebar-Breite. */
[b-wmssfysop6] .sidebar-brand-logo {
    max-height: 50px;
    max-width: 100%;
    height: auto;
    opacity: 0.5;
}

/* Logo-Switch (.logo-light/.logo-dark) ist global in app.css definiert — ::deep greift hier
   nicht, weil die RadzenImage-Elemente unter Komponenten ohne natives Scope-Root liegen. */
/* /WebApp/Pages/Embedded/EmbeddedAiAssistant.razor.rz.scp.css */
/* Die Klassen gehören direkten Elementen dieser Page (kein ::deep – das würde nur
   Kind-Komponenten treffen, nicht die Elemente der Page selbst). */
.finno-embedded[b-xyb7c985g4] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    /* Etwas mehr Luft links – nur in der eingebetteten Finno-Page (die Pane bleibt unverändert). */
    padding-left: 0.5rem;
}

/* Flex-Container, damit der eingebettete AiChat (flex: 1) die Resthöhe voll ausfüllt
   und das Eingabefeld immer am unteren Rand steht. */
.finno-embedded-chat[b-xyb7c985g4] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.finno-embedded-blocked[b-xyb7c985g4] {
    height: 100vh;
    padding: 2rem;
}
