@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

/* ===== No-Page-Scroll Layout =====
   The page itself never scrolls. Only data grids/tables may scroll internally.
   html/body: overflow hidden — no page-level scrollbar.
   .fluent-layout: flex column filling the viewport.
   Body-content: flex 1, internal scrolling. */
html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
}

#app {
    height: 100%;
    overflow: hidden;
}

/* FluentLayout wraps header + content-stack + footer. Flex column fills viewport.
   Uses 100dvh (dynamic viewport height) instead of 100vh: on mobile browsers
   100vh includes the URL-bar zone, so a 100vh layout extends below the visible
   viewport and the footer slides under the URL bar. 100dvh tracks the actual
   visible area and re-flows when the URL bar shows/hides. */
.fluent-layout {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

/* Header: fixed height, never shrinks */
.fluent-layout .main-header {
    flex-shrink: 0 !important;
}

/* Footer: fixed height, never grows, always visible */
.fluent-layout .app-footer {
    flex-shrink: 0 !important;
    min-height: var(--footer-h) !important;
}

/* The FluentStack wrapping nav + body-content sits between header and footer */
.fluent-layout > .stack-horizontal {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Body content area fills remaining space; scrolls internally */
.body-content {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ===== End No-Page-Scroll Layout ===== */

:root {
    --accent-fill-rest: #2C87C7 !important;
    --info: #003F7FFF !important;
    --control-corner-radius: 2 !important;
    --success: #08a169 !important;
    --warning: #ff950a !important;
    --error: #db1a37 !important;
    --sidebar-w: 220px;
    --topbar-h: 60px;
    --footer-h: 60px;
    --header-font: 18px;
    --header-detail-font: 16px;
    --grid-header-custom-bgcolor: #E5E7EA;
    --brand-prefix-color: #3c3c3b;
    --brand-product-color: #d6504a;
    --body-font: 'Roboto' !important;
}

/* Global link styling – matches the Impressum footer‑link look */
a {
    color: var(--accent-fill-rest);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

    a:hover,
    a:focus {
        color: var(--accent-fill-hover);
        text-decoration: underline;
    }

/* FOOTER */
.app-footer {
    width: 100%;
    padding-bottom: 5px;
    flex-shrink: 0;
    background: var(--neutral-fill-rest);
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-06);
    padding: var(--spacing-08);
    text-align: center;
    width: 100%;
    max-width: 500px;
    margin: auto;
    padding-bottom: 3px;
    padding-top: 12px;
}

/* all text the same size */
.footer-text,
.footer-link {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
}

/* accent‑colored links */
.footer-link {
    color: var(--accent-fill-rest);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    margin: 0 var(--spacing-04);
}

    .footer-link:hover,
    .footer-link:focus {
        color: var(--accent-fill-hover);
        text-decoration: underline;
    }

fluent-divider {
    width: 100%;
    border-color: #7ab3db75;
}

fluent-divider.dotted {
    margin-top: 30px;
}

/*appheader css*/

/* ===== Utility Classes ===== */
.w-auto { width: auto !important; } /* FluentStack/FluentLayout components render inline `style="width: 100%"`; only !important wins. */
.w-48 { width: 48px; }
.w-90 { width: 90%; }
.w-100 { width: 100% !important; }
.w-150 { width: 150px !important; }
.min-height-auto { min-height: auto; }
.h-100 { height: 100% !important; }
.m-0 { margin: 0; }
.m-30-auto { margin: 30px auto; }
.m-10-auto-5 { margin: 10px auto 5px; }
.mt-5 { margin-top: 5px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-minus-10 { margin-top: -10px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.ml-10 { margin-left: 10px; }
.mr-50 { margin-right: 50px; }
.mr-135 { margin-right: 135px; }
.p-0 { padding: 0; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-0-10 { padding: 0 10px; }
.p-6-0 { padding: 6px 0; }
.p-10-0 { padding: 10px 0; }
.pr-0 { padding-right: 0; }
.pt-0 { padding-top: 0; }
.pt-3 { padding-top: 3px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-25 { padding-bottom: 25px; }
.pb-35 { padding-bottom: 35px !important; }
.pl-15 { padding-left: 15px; }
.pl-30 { padding-left: 30px; }
.pr-15 { padding-right: 15px; }
.pr-30 { padding-right: 30px; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fs-12 { font-size: 12px; }
.d-none { display: none !important; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-flex { display: flex; }
.d-contents { display: contents; }
.anchor-unobtrusive { color: unset !important; text-decoration: unset !important; }
.ai-center { align-items: center; }
.td-align-right { text-align: right; }
.align-left { text-align: left; }
.text-overflow { overflow-wrap: anywhere; }
.text-wrap-auto { text-wrap: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-hidden { overflow: hidden; }
.pointer { cursor: pointer; }
.relative { position: relative; }
.z-index-0 { z-index: 0; }
.accent-color { color: var(--accent-fill-rest) !important; }
.white-color { color: #fff !important; }
.mobile-file-type-bg { background-color: var(--neutral-fill-secondary-rest); }
.header-font { font-size: var(--header-font) !important; }
.header-detail-font { font-size: var(--header-detail-font) !important; }
.min-max-24 { min-width: 24px; max-width: 24px; }

/*end appheader css*/

/* grid container */
.category-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* or: repeat(auto-fit, minmax(220px, 1fr)) */
    gap: 20px !important;
    margin-top: 10px;
}

/* make each button fill the grid cell and be tall enough */
.cat-tile {
    width: 100%;
    min-height: 70px;
    border: none;
    border-radius: 10px;
    background: var(--neutral-layer-1);
}

    .cat-tile::part(control) {
        height: auto;
        padding: 10px;
    }

    .cat-tile::part(content) {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .cat-tile.selected {
        border-color: var(--accent-fill-rest);
        box-shadow: 0 0 0 2px rgba(41,120,240,.12) inset;
    }

.main-header {
    height: var(--topbar-h) !important;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    width: 100%;
    display: flex !important;
    align-items: center !important;
}

/* FluentHeader wraps its children in a .header-gutters div with `margin: 0.5rem 1.5rem`
   from FluentUI's Blazor-scoped bundle (selector `.header .header-gutters[b-wxpnc5dx1o]`).
   That 24px left margin pushes the logo away from the edge — we want it flush left.
   `!important` is required because the Blazor-scoped attribute selector has higher
   specificity than our class-only rule and the bundle is third-party (can't edit). */
.main-header .header-gutters {
    margin: 0 !important;
}

/* FluentHeader splits .header-gutters children 50/50 by default, which visually centers
   the logo + title in the left half. FluentStack's .stack-horizontal defaults to width:100%,
   so we need both a width override and margin-right:auto to keep the logo+title flush left
   and push the right-side stack to the far right. */
.main-header .header-gutters > :first-child {
    flex: 0 0 auto;
    width: auto;
    max-width: max-content;
    margin-right: auto;
}

/* Mobile: the kanzlei text's max-content width (~200px unwrapped) plus the logo + hamburger
   exceeds a 390px viewport once the right-icon stack is reserved. Allow the left stack to
   shrink so the text wraps within whatever space the right stack leaves. min-width:0 on
   nested stacks so the wrap can propagate down to the FluentLabel. */
@media (max-width: 959px) {
    .main-header .header-gutters > :first-child {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
    }
    .main-header .header-gutters > :first-child > * {
        min-width: 0;
    }
}

/* Desktop: keep the "<Kanzleibezeichnung>" label on a single line. On mobile the viewport
   is too narrow for that — let it wrap so it doesn't get clipped at the right edge. */
@media (min-width: 960px) {
    .main-header .fluent-typography {
        white-space: nowrap;
    }
}

/* Hamburger menu button — visible only on mobile. Always rendered (CSS-driven visibility,
   no JS-state race with the BreakpointState/screenSize.js registration). */
.main-header .mobile-menu-button {
    display: none;
}
@media (max-width: 959px) {
    .main-header .mobile-menu-button {
        display: inline-flex;
    }
}

@media (max-width: 959px) {
    .profile-menu-btn {
        padding: 6px !important;
        gap: 1px !important;
    }

    .search-area {
        margin-right: 5px !important;
    }
}

.main {
    padding: 23px;
}

.web-nav-menu {
    overflow-y: auto;
}

.mobile-grid-item {
    height: auto !important;
    padding: 8px 16px !important;
}

/* HmdIconLabel inside ANY grid cell: its inner FluentLabel adds `.text-wrap-auto`
   (text-wrap: auto) plus the caller-supplied `.text-overflow` utility
   (overflow-wrap: anywhere). Together they defeat the cell's ellipsis. Force
   single-line truncation INSIDE the label too so all grid text columns truncate
   consistently (not just direct PropertyColumn text). `flex: 1 1 0` makes the
   label fill the remaining width inside the HmdIconLabel flex row so the icon
   stays at 24px and the label takes the rest. Outside grid cells the utility
   classes keep their original wrap-friendly behaviour (dashboard cards, sidebar
   labels, etc.). */
.fluent-data-grid td .text-wrap-auto,
.fluent-data-grid td .text-overflow {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
    max-width: 100%;
}

/* Nested FluentStacks (InfoBrief / Upload mobile cells) and their HmdIconLabel
   child carry `width: auto` inline, pinning the chain to content size and
   defeating the label's ellipsis. Force the shrink/stretch chain so the inner
   label gets a constrained max-width. */
.fluent-data-grid td .stack-horizontal,
.fluent-data-grid td .stack-vertical {
    min-width: 0;
}

/* HmdIconLabel writes `<FluentStack Width="auto">` which becomes
   `style="width: auto"` inline. Inside a grid cell that breaks the chain —
   override with !important so the icon+label row fills the parent stack and
   the FluentLabel inside has a constrained max-width to ellipsis against.
   Targeted via :has() to the stack-horizontal that contains a fluent-typography
   label — i.e. HmdIconLabel specifically, not arbitrary stacks. */
.fluent-data-grid td .stack-horizontal:has(> .text-wrap-auto),
.fluent-data-grid td .stack-horizontal:has(> .text-overflow) {
    width: 100% !important;
}

/* .body-content base rules are in the no-page-scroll section above */

.tabs-right {
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    padding: 0 !important;
}

    .tabs-right::part(tablist) {
        width: auto;
        align-items: flex-start;
    }

    .tabs-right::part(tab) {
        margin: 4px 0;
    }

    .tabs-right::part(activeIndicator) {
        display: none;
    }

    .tabs-right::part(tabpanel) {
        flex: 1;
        min-width: 0;
        height: 100%;
        overflow: auto;
        padding: 12px;
        border-right: 1px solid var(--neutral-stroke-layer-rest);
    }

    /* Kein Scrollen bei aktiver PDF-Vorschau (nur Desktop) */
    @media (min-width: 960px) {
        .preview-active .tabs-right::part(tabpanel) {
            overflow: hidden;
            box-sizing: border-box;
        }

        .preview-active.content-element-height {
            overflow-y: hidden;
        }
    }

.document-left-pane {
    flex: 0 0 60%;
    min-width: 0;
}

.document-left-pane.document-pane-full {
    flex: 1 1 100%;
}

.document-right-pane {
    flex: 0 0 40%;
    min-width: 0;
    border-left: 1px solid var(--neutral-stroke-divider-rest, lightgray);
}

/* Mobile: document list fills full width (right pane hidden on mobile) */
@media (max-width: 959px) {
    .document-grid .document-left-pane {
        flex: 1 1 100% !important;
    }
}

.tabs-right fluent-tab[aria-selected="true"] {
    color: var(--accent-fill-rest);
    border-left: 1px solid;
    font-weight: normal !important;
}

.tabs-right fluent-tab {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    width: 100%;
    min-width: min-content;
}

.mx-w-600-auto {
    max-width: 600px;
    margin: 0 auto;
}

.fluent-inputfile-container .inputfile-content {
    z-index: 0 !important;
    cursor: pointer;
}

.fluent-inputfile-container input {
    cursor: pointer;
}
fluent-select::part(listbox) {
    max-height: 300px;
    overflow-y: auto;
}

.brief-detail-grid-height {
    min-height: 160px;
    max-height: 300px;
    height: 100%;
    overflow: auto;
    padding: 0;
    margin: 5px 0 25px 0;
}

    .brief-detail-grid-height .empty-content-cell {
        height: unset;
        border-bottom: none;
    }

    .brief-detail-grid-height .fluent-data-grid {
        width: auto !important;
    }

    .brief-detail-grid-height .fluent-data-grid td,
    .brief-detail-grid-height .fluent-data-grid th {
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: nowrap !important;
    }

    .brief-detail-grid-height .fluent-data-grid td > *,
    .brief-detail-grid-height .fluent-data-grid .col-title-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 500px;
        display: inline-block;
    }
/* Profile menu button shadow DOM (must stay global) */
    .profile-menu-btn::part(control) {
        background: transparent;
        color: #fff;
        border: none;
        padding: 8px 0;
        gap: .5rem;
    }

    .profile-menu-btn::part(control):hover {
        background: rgba(255, 255, 255, 0.1);
    }

/* Force vertical centering of all header children */
.main-header > * {
    display: flex !important;
    align-items: center !important;
    height: 100%;
}
.main-header fluent-counter-badge {
    display: flex;
    align-items: center;
}
.main-header svg {
    vertical-align: middle;
}

/* Grid cell and header text truncation with ellipsis — applies to every td incl.
   mobile-grid-item so long filenames cut off with "…" instead of wrapping. */
.fluent-data-grid th,
.fluent-data-grid td {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* FluentUI gives both header structures (sortable: `.col-sort-button` /
   non-sortable: `.col-title`) inline `width: calc(100% - 10px)` (10px
   reserved for the resize handle). That inline width FIXES the inner element
   to th's width — so the header NEVER contributes its intrinsic content size
   to CSS-Grid auto-track sizing. Result: columns auto-size to data-only,
   ignoring header text — narrow/empty data + wide header = truncated header.
   The resize handle uses `position: absolute; right: 0`, so we can drop the
   inline width and let header size to its content. Padding-right tightened so
   the text breathes from the next column's divider but doesn't re-introduce
   the bundled 16px+10px overhead. !important needed because we're overriding
   an inline style. Both selectors are needed — sortable columns use
   `<fluent-button class="col-sort-button">` for the title, non-sortable use
   `<div class="col-title">`. */
.fluent-data-grid th .col-title,
.fluent-data-grid th .col-sort-button {
    width: auto !important;
    padding-right: 16px !important;
}

/* th defaults to `text-align: center`. Once the col-sort-button width is set
   to `auto` the (now narrower) button inline-aligns per th default — i.e.
   centered — even on columns flagged `.col-justify-start`. Restore start
   alignment so column header text sits flush-left as it did before. */
.fluent-data-grid th.col-justify-start {
    text-align: start;
}

.fluent-data-grid th > *,
.fluent-data-grid .col-title {
    overflow: hidden;
    min-width: 0;
}

.fluent-data-grid .col-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* FluentDataGrid has no per-column Resizable parameter (only grid-level
   ResizableColumns). Apply `Class="no-resize"` on any column (SelectColumn,
   TemplateColumn, PropertyColumn) to drop its drag handle. Use this for
   fixed-width affordance columns (checkboxes, icon-only columns) AND for
   the last column of every grid (resizing the last column does nothing
   useful — there's nothing to its right to push against).
   Hide BOTH `.resize-handle` (static, Razor-rendered) AND `.actual-resize-handle`
   (dynamically created by FluentDataGrid.razor.js — the one that receives
   the pointer events). */
.fluent-data-grid th.no-resize .resize-handle,
.fluent-data-grid th.no-resize .actual-resize-handle {
    display: none;
}

/* Resize handle visibility improvement */
.fluent-data-grid .resize-handle:hover {
    opacity: 1;
    background: var(--accent-base-color, #146eab);
}

/* Grid detector (invisible FluentGrid for breakpoint detection) */
.grid-detector {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* InfoTable: constrain last column width for long text (e.g. Buchungstext) */
.info-table-last-col {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Markdown page scroll — constrains height on pages with long markdown content */
.markdown-page {
    max-height: calc(100dvh - var(--topbar-h) - var(--footer-h, 30px) - 50px);
    overflow-y: auto;
}
/* AutoItemsPerPage measures parent clientHeight — needs defined height chain */
.grid-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    flex: 1 1 0;
    min-height: 8rem;
}

/* `show-on-mobile`: inverse of `hide-on-mobile` — visible on mobile, hidden on
   desktop. Used for the mobile-only chevron-right column in Documents.razor that
   acts as the "tap to navigate" affordance the operator expects on mobile. */
@media (min-width: 960px) {
    .fluent-data-grid th.show-on-mobile,
    .fluent-data-grid td.show-on-mobile {
        display: none !important;
    }
}

@media (max-width: 959px) {
    .grid-scroll-container {
        min-height: 4rem;
    }

    /* Hide marked grid columns on mobile. Applied via FluentDataGrid column
       Class= which puts the class on both <th> and <td>, so the column
       collapses to display:none in both header and body. */
    .fluent-data-grid th.hide-on-mobile,
    .fluent-data-grid td.hide-on-mobile {
        display: none !important;
    }
}

/* Grid width invariant: floor the grid at its natural content width so auto
   columns are never compressed below their max-content. When the parent is
   narrower, overflow-x: auto on .grid-scroll-container engages horizontal
   scroll instead. Mobile (≤959px) is excluded because mobile-grid-item cells
   now truncate via the universal td ellipsis rule — forcing max-content there
   would blow past the viewport and undo that truncation. */
@media (min-width: 960px) {
    .grid-scroll-container > .fluent-data-grid {
        min-width: max-content;
    }
}

/* FluentStack between content-element-height and grid must propagate height */
.content-element-height > .stack-vertical {
    min-height: 100%;
    box-sizing: border-box;
    margin-top: 0;
}

.grid-no-scroll {
    display: contents;
}

.brief-detail-grid-height thead td:last-child {
    border-inline-end: transparent !important;
}

/* Sheet tabs-right shadow DOM override (must stay global) */
.sheet .tabs-right::part(tabpanel) {
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}
.upload-photo {
    width: 100%;
    position: relative;
}
.delete-logo-icon{
    position: absolute;
    right: 0;
    top: 25px;
}

.document-detail {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    right: 0;
    margin: 0 auto;
}

/* Mobile-only bottom toolbar (Documents.razor preview/permission tabs, InfoBrief.razor answer btn).
   Replaces former Blazor IsMobile render-gate to avoid first-render race. */
@media (min-width: 960px) {
    .document-detail {
        display: none;
    }
}

.infobrief-fixed-btn {
    background-color: var(--neutral-fill-secondary-rest, #E5E5E5);
    padding-left: 15px;
}
.logo-img {
    /* Drive sizing from intrinsic aspect ratio: explicit height, auto width.
       Without `width: auto` + no `max-width:100%` constraint, the image collapses
       to 0 when its parent is a flex item with no min-width (parent has nothing
       to size against, so max-width:100% of 0 = 0). */
    height: 100%;
    width: auto;
}

.breadcrumbs fluent-breadcrumb-item::part(separator) {
    margin-inline: 10px;
    padding-top: 2px;
}

.breadcumb-item {
    color: var(--accent-fill-rest);
    font-weight: 500;
}

.logo-img-wd {
    height: 34px;
}

.spinner {
    position: absolute;
    top: 45%;
    bottom: 45%;
    z-index: 999;
}

.content-element-height {
    height: calc(100dvh - var(--topbar-h) - var(--footer-h, 30px) - 50px) !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.fluent-messagebox svg {
    fill: var(--accent-fill-rest) !important;
}

span.complete {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 5px;
    font-size: smaller;
    color: var(--accent-fill-rest);
}
@media (max-width: 959px) {
    .left-header-vertical-gap {
        width: auto;
    }
}

@media (max-width: 450px) {
    .left-header-vertical-gap {
        column-gap: 5px !important;
    }
}
.tabs-right fluent-tab > svg.fluent-tab-icon {
    margin-inline-end: 8px;
    min-width: 24px !important;
    max-width: 24px !important;
    fill: var(--neutral-fill-strong-active) !important;
}

.tabs-right fluent-tab[aria-selected="true"] svg.fluent-tab-icon {
    fill: var(--accent-fill-rest) !important;
}
.info-attach-icon {
    position: absolute;
    right: -18px;
}

.info-table-no-data {
    font-weight: 600;
    width: 100%;
    text-align: center;
    padding-top: 15px;
}
.info-answer-list {
    padding: 12px 0 15px;
}
/* SearchResult shadow DOM override (must stay global) */
.search-accordion > fluent-accordion-item[expanded]::part(region) {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.top-75{
    top: 75px !important;
}

@media (max-width: 768px) {
    fluent-number-field::part(control),
    fluent-text-field::part(control),
    fluent-text-area::part(control) {
        font-size: 16px !important;
    }

}

fluent-tooltip::part(tooltip) {
    white-space: pre-line;
}

.mobile-stepper-header {
    border-bottom: 1px solid var(--neutral-stroke-rest);
    width: 100%;
    padding: 10px 0;
}
    .mobile-stepper-header p {
        color: var(--accent-fill-rest);
        font-weight: bold;
        margin-bottom: 12px;
        text-align: center;
        width: 100%;
    }

/* Centered card layout for Login, LostPassword, Profile, UpdatePassword */
.centered-card {
    /* Override FluentCard MinimalStyle defaults (var(--card-height, 100%) / var(--card-width, 100%))
       so the card shrinks to its content instead of stretching to the parent. */
    --card-height: auto;
    --card-width: auto;
    margin: auto;
    max-width: 500px;
    max-height: calc(100dvh - var(--topbar-h) - var(--footer-h, 30px) - 50px);
    overflow-y: auto;
}
.login-header-label-style{
    margin: 15px auto 15px;
    padding-bottom: 15px;
}

.app-error-style {
    margin-top: calc(50vb - 50 * 1.4);
    transform: translateY(-50%);
}
.brand-prefix-color {
    color: var(--brand-prefix-color);
}
.brand-product-color {
    color: var(--brand-product-color);
}
.error-label-style {
    width: 100%;
    text-align: right;
    color: var(--error);
}

/* ===== Browser-Normalisierung ===== */
/* Pseudo-Elemente und Vendor-Defaults vereinheitlichen (Chromium, Firefox, Safari) */

/* Edge: hide the native ::-ms-reveal / ::-ms-clear on light-DOM <input>s.
   KNOWN ISSUE — does NOT reach inputs inside FluentTextField's shadow DOM.
   On Edge, password fields rendered via HmdInput show BOTH the custom Eye
   icon (HmdInput.razor: ShowEye) AND Edge's native ::-ms-reveal eye, because
   FluentTextField wraps its <input> in a closed shadowRoot that this CSS rule
   can't pierce. Tracked in microsoft/fluentui#22362 and #23482; unresolved
   upstream since 2022. Decision: ACCEPT the duplicate (per Microsoft's own
   guidance — the native reveal has security behaviour we don't want to hide
   via JS injection). See PENDING.md "Edge duplicate password-reveal eye". */
::-ms-reveal,
::-ms-clear {
    display: none;
}

/* Chromium: native Number-Spinner ausblenden (FluentNumberField HideStep="true" handles stepper,
   this hides the native Chrome/Safari spinner on any remaining <input type="number">) */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox: native Number-Spinner ausblenden. `appearance: textfield` is the
   standard property since Firefox 126 (May 2024); -moz-appearance still works
   but is deprecated. Both included for older-browser compat. */
input[type="number"],
fluent-number-field::part(control) {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Chromium: native Search-Decoration und Cancel-Button ausblenden */
::-webkit-search-decoration,
::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Mobile: FluentPanel auto-adapts, but ensure max usability */
@media (max-width: 600px) {
    fluent-dialog.panel {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}

/* StyledFluentInputFile (InfoBrief variant): replaces former IsMobile-parameter-driven render branches.
   Desktop default → desktop-only labels visible, icon gray (#CCCCCC).
   Mobile (≤959px) → labels hidden, icon blue (#146eab). */
@media (max-width: 959px) {
    .dz-desktop-only { display: none; }
    .dz-icon, .dz-icon * { color: #146eab !important; fill: #146eab !important; }
}