/* /Frontend/Account/Shared/StatusMessage.razor.rz.scp.css */
.fui-status-msg[b-q4w00odblm] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.88rem;
    border-radius: var(--f-radius-l);
    margin-bottom: 1rem;
}

.fui-status-msg svg[b-q4w00odblm] {
    width: 16px;
    height: 16px;
    flex: none;
    margin-top: 1px;
}
/* /Frontend/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-5cjkuy3em8] {
    color-scheme: light only;
    background: #fff4ce;
    color: #433519;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .reload[b-5cjkuy3em8] {
    color: #6d49e0;
    font-weight: 600;
    text-decoration: underline;
}

#blazor-error-ui .dismiss[b-5cjkuy3em8] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Frontend/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-fz5jn5nr8k],
.components-reconnect-repeated-attempt-visible[b-fz5jn5nr8k],
.components-reconnect-failed-visible[b-fz5jn5nr8k],
.components-pause-visible[b-fz5jn5nr8k],
.components-resume-failed-visible[b-fz5jn5nr8k],
.components-rejoining-animation[b-fz5jn5nr8k] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-retrying[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-failed[b-fz5jn5nr8k],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-fz5jn5nr8k] {
    display: block;
}


#components-reconnect-modal[b-fz5jn5nr8k] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-fz5jn5nr8k 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-fz5jn5nr8k 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-fz5jn5nr8k 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-fz5jn5nr8k]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-fz5jn5nr8k 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-fz5jn5nr8k {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-fz5jn5nr8k {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-fz5jn5nr8k {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-fz5jn5nr8k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-fz5jn5nr8k] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-fz5jn5nr8k] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-fz5jn5nr8k] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-fz5jn5nr8k] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-fz5jn5nr8k] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-fz5jn5nr8k] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-fz5jn5nr8k 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-fz5jn5nr8k] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-fz5jn5nr8k {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Frontend/Pages/Compliance.razor.rz.scp.css */
.comp-head[b-cxr4jnde2q] {
    margin-bottom: 1.5rem;
}

.comp-head h1[b-cxr4jnde2q] {
    font-family: var(--f-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--f-fg-1);
}

.comp-summary[b-cxr4jnde2q] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ── Karte + Kopf ── */
.cdt-card[b-cxr4jnde2q] {
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--f-shadow-2);
}

.cdt-head[b-cxr4jnde2q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.cdt-title[b-cxr4jnde2q] {
    font-family: var(--f-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--f-fg-1);
}

.cdt-subtitle[b-cxr4jnde2q] {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: var(--f-fg-3);
}

.cdt-empty[b-cxr4jnde2q] {
    margin: 1rem 0 0;
    color: var(--f-fg-3);
    font-size: 0.9rem;
}

/* ── Filter ── */
.cdt-filters[b-cxr4jnde2q] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.cdt-filter[b-cxr4jnde2q] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--f-radius-l);
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--f-fg-3);
    cursor: pointer;
}

.cdt-filter:hover[b-cxr4jnde2q] {
    color: var(--f-fg-1);
}

.cdt-filter--active[b-cxr4jnde2q] {
    background: var(--f-surface-3);
    border-color: var(--f-stroke-1);
    color: var(--f-fg-1);
}

.cdt-filter-count[b-cxr4jnde2q] {
    font-weight: 700;
    color: var(--f-fg-2);
}

/* ── Tabelle ── */
.cdt-table[b-cxr4jnde2q] {
    width: 100%;
    border-collapse: collapse;
}

.cdt-table th[b-cxr4jnde2q] {
    text-align: left;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--f-fg-3);
    padding: 0.5rem;
    border-bottom: 1px solid var(--f-stroke-card);
}

.cdt-table th.cdt-th-right[b-cxr4jnde2q] {
    text-align: right;
}

.cdt-table th.cdt-th-center[b-cxr4jnde2q] {
    text-align: center;
}

/* ── Gerätetabelle: symmetrische Spalten, Report + Aktionen rechts ── */
.cdt-table--devices[b-cxr4jnde2q] {
    table-layout: fixed;
}

.cdt-table--devices th:nth-child(1)[b-cxr4jnde2q] {
    width: 22%;
}

.cdt-table--devices th:nth-child(2)[b-cxr4jnde2q] {
    width: 22%;
}

.cdt-table--devices th:nth-child(3)[b-cxr4jnde2q] {
    width: 22%;
}

.cdt-table--devices th:nth-child(4)[b-cxr4jnde2q] {
    width: 22%;
}

.cdt-table--devices th:nth-child(5)[b-cxr4jnde2q] {
    width: 12%;
}

.cdt-table td[b-cxr4jnde2q] {
    padding: 0.85rem 0.5rem;
    font-size: 0.9rem;
    vertical-align: middle;
}

.cdt-table tr + tr td[b-cxr4jnde2q] {
    border-top: 1px solid var(--f-stroke-card);
}

.cdt-device[b-cxr4jnde2q] {
    font-weight: 700;
    color: var(--f-fg-1);
    white-space: nowrap;
    width: 1%;
}

.cdt-time[b-cxr4jnde2q] {
    color: var(--f-fg-3);
    white-space: nowrap;
    width: 1%;
    padding-right: 1.5rem;
}

.cdt-message[b-cxr4jnde2q] {
    color: var(--f-fg-2);
}

.cdt-status[b-cxr4jnde2q] {
    text-align: center;
    white-space: nowrap;
    width: 150px;
    min-width: 150px;
}

/* „—" bei Geräten ohne Compliance-Daten */
.cdt-nodata[b-cxr4jnde2q] {
    color: var(--f-fg-4);
    font-weight: 600;
}

/* ── Agent-Spalte ── */
.cdt-agent[b-cxr4jnde2q] {
    text-align: center;
    white-space: nowrap;
}

.cdt-agent-seen[b-cxr4jnde2q] {
    margin-top: 0.3rem;
    font-size: 0.74rem;
    color: var(--f-fg-4);
}

/* Badge-Fix: neutralisiert Platzhalter (Dot/Gap) der globalen fui-badge
   und schluckt eventuellen Markup-Whitespace vor dem Text */
.cdt-badge[b-cxr4jnde2q] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    white-space: nowrap;
}

.cdt-badge[b-cxr4jnde2q]::before {
    content: none;
    display: none;
}

/* ── Aktionsmenü ── */
.cdt-actions[b-cxr4jnde2q] {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    position: relative;
}

.cdt-menu-btn[b-cxr4jnde2q] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--f-stroke-1);
    border-radius: var(--f-radius-l);
    cursor: pointer;
    color: var(--f-fg-2);
}

.cdt-menu-btn:hover[b-cxr4jnde2q] {
    color: var(--f-fg-1);
    border-color: var(--f-fg-3);
}

.cdt-menu-btn svg[b-cxr4jnde2q] {
    width: 16px;
    height: 16px;
}


.cdt-menu[b-cxr4jnde2q] {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.4rem);
    transform: translateY(-50%);
    z-index: 1002;
    min-width: 190px;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-l);
    box-shadow: var(--f-shadow-8);
    padding: 0.3rem;
}

.cdt-menu-item[b-cxr4jnde2q] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--f-radius-l);
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
    color: var(--f-fg-1);
    cursor: pointer;
}

.cdt-menu-item:hover[b-cxr4jnde2q] {
    background: var(--f-surface-3);
}

/* ── Download-Button ── */
.cdt-download[b-cxr4jnde2q] {
    text-align: right;
    white-space: nowrap;
    width: 1%;
    padding-left: 0.75rem;
}

.cdt-dl-btn[b-cxr4jnde2q] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-1);
    border-radius: var(--f-radius-l);
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--f-fg-2);
    cursor: pointer;
    white-space: nowrap;
}

.cdt-dl-btn:hover[b-cxr4jnde2q] {
    color: #b63b3b;
    border-color: #b63b3b;
}

.cdt-dl-btn svg[b-cxr4jnde2q] {
    width: 14px;
    height: 14px;
}

.cdt-dl-btn:disabled[b-cxr4jnde2q] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cdt-dl-btn:disabled:hover[b-cxr4jnde2q] {
    color: var(--f-fg-2);
    border-color: var(--f-stroke-1);
}

/* ── Verlauf-Overlay ── */
.cdt-overlay[b-cxr4jnde2q] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgb(0 0 0 / 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overscroll-behavior: contain;
}

.cdt-overlay-panel[b-cxr4jnde2q] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    max-height: calc(100vh - 4rem);
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    box-shadow: var(--f-shadow-8);
    padding: 1.5rem;
}

.cdt-overlay-head[b-cxr4jnde2q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cdt-close[b-cxr4jnde2q] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--f-stroke-1);
    border-radius: var(--f-radius-l);
    cursor: pointer;
    color: var(--f-fg-2);
    flex-shrink: 0;
}

.cdt-close:hover[b-cxr4jnde2q] {
    color: var(--f-fg-1);
    border-color: var(--f-fg-3);
}

.cdt-close svg[b-cxr4jnde2q] {
    width: 16px;
    height: 16px;
}

.cdt-toolbar[b-cxr4jnde2q] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.cdt-pagesize[b-cxr4jnde2q] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--f-fg-3);
    white-space: nowrap;
}

.cdt-pagesize select[b-cxr4jnde2q] {
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-1);
    border-radius: var(--f-radius-l);
    color: var(--f-fg-1);
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
}

.cdt-overlay-body[b-cxr4jnde2q] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.cdt-pager[b-cxr4jnde2q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--f-stroke-card);
}

.cdt-page-btn[b-cxr4jnde2q] {
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-1);
    border-radius: var(--f-radius-l);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--f-fg-1);
    cursor: pointer;
}

.cdt-page-btn:disabled[b-cxr4jnde2q] {
    opacity: 0.4;
    cursor: default;
}

.cdt-page-info[b-cxr4jnde2q] {
    font-size: 0.85rem;
    color: var(--f-fg-3);
}
/* /Frontend/Pages/Dashboard.razor.rz.scp.css */
.dash-page[b-tuqqt2i3zp] {
    max-width: 1100px;
    margin: 0 auto;
    animation: fui-fade-up-b-tuqqt2i3zp 0.4s cubic-bezier(0.1, 0.9, 0.2, 1) both;
}

@keyframes fui-fade-up-b-tuqqt2i3zp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.dash-head[b-tuqqt2i3zp] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dash-head h1[b-tuqqt2i3zp] {
    font-family: var(--f-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--f-fg-1);
}

.dash-head p[b-tuqqt2i3zp] {
    color: var(--f-fg-3);
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
}

.dash-empty[b-tuqqt2i3zp] {
    max-width: 560px;
    margin: 2rem auto;
    padding: 2.25rem;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    text-align: center;
    box-shadow: var(--f-shadow-2);
}

.dash-empty .fui-ic[b-tuqqt2i3zp] {
    margin: 0 auto 1rem;
}

.dash-empty h3[b-tuqqt2i3zp] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--f-fg-1);
}

.dash-empty p[b-tuqqt2i3zp] {
    color: var(--f-fg-3);
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.dash-toast[b-tuqqt2i3zp] {
    background: var(--f-success-bg);
    border: 1px solid var(--f-success-stroke);
    color: var(--f-success-fg);
    border-radius: var(--f-radius-l);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.88rem;
}

.dash-summary[b-tuqqt2i3zp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-foot[b-tuqqt2i3zp] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
    font-size: 0.8rem;
    color: var(--f-fg-4);
}

.dash-foot svg[b-tuqqt2i3zp] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* /Frontend/Pages/Devices.razor.rz.scp.css */
/* ════════════════════════════════════════════════════════════════
   Devices.razor — Styles (Geräte-Übersicht)
   ----------------------------------------------------------------
   Inhalt (Reihenfolge = Aufbau der Seite):
     1) Seiten-Shell      .cock-*        (Kopf, CTA, Empty-State, Fuß)
     2) Such-/Filter-Leiste .dev-*       (Suche, Filter-Pills, Zähler)
     3) Geräte-Tabelle    .table-box / .device-table / .dt-* / .dc-osic
     4) Responsive        @media (max-width: 820px)
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════
   1) Seiten-Shell
   ════════════════════════════════════════════ */


@keyframes fui-fade-up-b-od927i8e1j {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Kopfzeile: Titel + Untertitel */
.cock-head[b-od927i8e1j] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cock-head h1[b-od927i8e1j] {
    font-family: var(--f-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--f-fg-1);
}

.cock-head p[b-od927i8e1j] {
    color: var(--f-fg-3);
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
}

/* Primär-Button "Gerät schützen" */
.cock-cta[b-od927i8e1j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--f-brand-grad);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.62rem 1.1rem;
    border-radius: var(--f-radius-m);
    text-decoration: none;
    box-shadow: var(--f-shadow-brand);
    transition: transform var(--f-dur-fast) var(--f-ease), box-shadow var(--f-dur-fast) var(--f-ease);
}

.cock-cta:hover[b-od927i8e1j] {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(91, 91, 214, 0.42);
    color: #fff;
}

.cock-cta svg[b-od927i8e1j] {
    width: 17px;
    height: 17px;
}

/* Empty-State: Konto ohne Organisation */
.cock-empty[b-od927i8e1j] {
    max-width: 560px;
    margin: 2rem auto;
    padding: 2.25rem;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    text-align: center;
    box-shadow: var(--f-shadow-2);
}

.cock-empty .fui-ic[b-od927i8e1j] {
    margin: 0 auto 1rem;
}

.cock-empty h3[b-od927i8e1j] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--f-fg-1);
}

.cock-empty p[b-od927i8e1j] {
    color: var(--f-fg-3);
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* Fußzeile unter der Tabelle */
.cock-foot[b-od927i8e1j] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
    font-size: 0.8rem;
    color: var(--f-fg-4);
}

.cock-foot svg[b-od927i8e1j] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════
   2) Such-/Filter-Leiste über der Tabelle
   ════════════════════════════════════════════ */

/* Karte mit Suchfeld, Filter-Pills und Geräte-Zähler */
.dev-toolbar[b-od927i8e1j] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    box-shadow: var(--f-shadow-2);
}

.dev-toolbar-row[b-od927i8e1j] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.dev-toolbar-actions[b-od927i8e1j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.dev-toolbar-info[b-od927i8e1j] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--f-fg-4);
    font-size: 0.85rem;
}

.dev-toolbar-btns[b-od927i8e1j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dev-divider[b-od927i8e1j] {
    border-top: 1px solid var(--f-stroke-2);
    width: 100%;
}

/* Suchfeld mit Lupen-Icon */
.dev-search[b-od927i8e1j] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.dev-search svg[b-od927i8e1j] {
    position: absolute;
    left: 0.85rem;
    width: 16px;
    height: 16px;
    color: var(--f-fg-4);
    pointer-events: none;
}

.dev-search input[b-od927i8e1j] {
    width: 100%;
    padding: 0.55rem 0.85rem 0.55rem 2.35rem;
    border: 1px solid var(--f-stroke-1);
    border-radius: var(--f-radius-m);
    font-size: 0.9rem;
    color: var(--f-fg-1);
    background: var(--f-surface);
    transition: border-color var(--f-dur-fast) var(--f-ease), box-shadow var(--f-dur-fast) var(--f-ease);
}

.dev-search input[b-od927i8e1j]::placeholder {
    color: var(--f-fg-4);
}

.dev-search input:focus[b-od927i8e1j] {
    outline: none;
    border-color: var(--f-brand-stroke);
    box-shadow: 0 0 0 3px var(--f-brand-tint-bg);
}

/* Filter als Text-Pills; aktiver Filter hervorgehoben */
.dev-filters[b-od927i8e1j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex-shrink: 0;
}

.dev-filter[b-od927i8e1j] {
    border: 0;
    background: none;
    color: var(--f-fg-3);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--f-radius-m);
    cursor: pointer;
    transition: background var(--f-dur-fast) var(--f-ease), color var(--f-dur-fast) var(--f-ease);
}

.dev-filter:hover[b-od927i8e1j] {
    background: var(--f-subtle-hover);
    color: var(--f-fg-1);
}

.dev-filter.active[b-od927i8e1j] {
    background: var(--f-surface-3);
    color: var(--f-fg-1);
}

/* Geräte-Zähler rechts */
.dev-count[b-od927i8e1j] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--f-fg-4);
    white-space: nowrap;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════
   3) Geräte-Tabelle
   ════════════════════════════════════════════ */

/* Tabellen-Karte (Rahmen um die Tabelle) */
.table-box[b-od927i8e1j] {
    width: 100%;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    overflow: visible;
    box-shadow: var(--f-shadow-2);
}

/* Tabelle selbst */
.device-table[b-od927i8e1j] {
    width: 100%;
    border-collapse: collapse;
}

.device-table th[b-od927i8e1j] {
    padding: 0.85rem 1.25rem;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--f-fg-4);
    text-align: left;
    border-bottom: 1px solid var(--f-stroke-2);
}

.device-table td[b-od927i8e1j] {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: var(--f-fg-1);
    border-bottom: 1px solid var(--f-stroke-2);
    vertical-align: middle;
}

.device-table tbody tr:last-child td[b-od927i8e1j] {
    border-bottom: 0;
}

.device-table tbody tr:hover[b-od927i8e1j] {
    background: var(--f-subtle-hover);
}

/* Spalte "Gerät": Status-Punkt + OS-Icon + Name + Untertitel */
.dt-device[b-od927i8e1j] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dt-dot[b-od927i8e1j] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dt-dot.on[b-od927i8e1j] {
    background: var(--f-success);
    box-shadow: 0 0 8px var(--f-success);
}

.dt-dot.off[b-od927i8e1j] {
    background: var(--f-fg-disabled);
}

.dt-name[b-od927i8e1j] {
    font-weight: 600;
    color: var(--f-fg-1);
}

.dt-sub[b-od927i8e1j] {
    font-size: 0.76rem;
    color: var(--f-fg-4);
    margin-top: 0.15rem;
}

/* OS-Icon-Kachel (Win/Mac) */
.os-ic[b-od927i8e1j] {
    width: 18px;
    height: 18px;
    display: block;
}

.dc-osic[b-od927i8e1j] {
    width: 30px;
    height: 30px;
    border-radius: var(--f-radius-m);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.dc-osic.win[b-od927i8e1j] {
    background: var(--f-info-bg);
    color: var(--f-info-fg);
}

.dc-osic.mac[b-od927i8e1j] {
    background: var(--f-surface-3);
    color: var(--f-fg-1);
}

.dc-osic .os-ic[b-od927i8e1j] {
    width: 15px;
    height: 15px;
}

/* Spalte "Lizenz": Zustands-Badge */
.dt-badge[b-od927i8e1j] {
    display: inline-block;
    padding: 0.28rem 0.75rem;
    border-radius: var(--f-radius-circle);
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.dt-badge.licensed[b-od927i8e1j] {
    background: var(--f-success-bg);
    color: var(--f-success-fg);
    border-color: var(--f-success-stroke);
}

.dt-badge.dormant[b-od927i8e1j] {
    background: var(--f-surface-3);
    color: var(--f-fg-3);
    border-color: var(--f-stroke-2);
}

/* Spalte "Härtung": Fortschrittsbalken + Prozent */
.dt-harden[b-od927i8e1j] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.dt-track[b-od927i8e1j] {
    width: 92px;
    height: 7px;
    background: var(--f-surface-pressed);
    border-radius: var(--f-radius-circle);
    overflow: hidden;
    flex-shrink: 0;
}

.dt-fill[b-od927i8e1j] {
    height: 100%;
    border-radius: var(--f-radius-circle);
}

.dt-fill.full[b-od927i8e1j] {
    background: var(--f-success);
}

.dt-fill.partial[b-od927i8e1j] {
    background: var(--f-warning);
}

.dt-fill.empty[b-od927i8e1j] {
    background: transparent;
}

.dt-pct[b-od927i8e1j] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--f-fg-2);
    font-variant-numeric: tabular-nums;
}

/* Spalte "Zuletzt gesehen" */
.dt-seen[b-od927i8e1j] {
    color: var(--f-fg-3);
    font-size: 0.86rem;
}

.license-action[b-od927i8e1j] {
    color: #d36b6b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease;
}

.license-action:hover[b-od927i8e1j] {
    text-decoration: underline;
    color: #e57f7f;
}

/* ════════════════════════════════════════════
   4) Responsive
   ════════════════════════════════════════════ */
@media (max-width: 820px) {
    .table-box[b-od927i8e1j] {
        overflow-x: auto;
    }
}

/* ════════════════════════════════════════════
   5) Lizenz Buttons mit einheitlicher Breite & Tiefe
   ════════════════════════════════════════════ */

/* Button: Lizenz entziehen (Schwarz mit rotem Rand & Tiefe) */
.btn-revoke[b-od927i8e1j] {
    background: transparent !important;
    color: #d96c6c !important;

    border: 1px solid rgba(217, 108, 108, .35) !important;
    border-radius: 8px !important;

    font-weight: 500 !important;

    box-shadow: none !important;
    transition: all .15s ease !important;
}

.btn-revoke:hover:not(:disabled)[b-od927i8e1j] {
    background: rgba(216, 122, 122, .08) !important;

    color: #f08a8a !important;
    border-color: rgba(240, 138, 138, .5) !important;

    transform: none !important;
    box-shadow: none !important;
}

.btn-revoke:active:not(:disabled)[b-od927i8e1j] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 77, 79, 0.25) !important;
}

.action-menu button:disabled[b-od927i8e1j] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    color: var(--f-fg-4);
}

.action-menu button:disabled:hover[b-od927i8e1j] {
    background: transparent;
}

.btn-revoke:disabled[b-od927i8e1j] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: none;
}

/* ──────────────────────────────────────────────
   1. Toolbar-Buttons (oben rechts): Beide exakt gleich breit
   ────────────────────────────────────────────── */
.dev-toolbar .fui-btn[b-od927i8e1j] {
    min-width: 210px !important;
    height: 38px !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Deaktivierte Toolbar-Buttons: einheitliches Ausgrauen für beide.
   (.btn-revoke:disabled oben deckt nur den roten Button ab –
   das hier greift zusätzlich beim blauen Primärbutton.) */
.dev-toolbar .fui-btn:disabled[b-od927i8e1j] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* ──────────────────────────────────────────────
   2. Tabellen-Buttons (pro Zeile): Beide exakt gleich breit & handlich
   ────────────────────────────────────────────── */
.btn-revoke--sm[b-od927i8e1j],
.btn-assign--sm[b-od927i8e1j] {
    min-width: 145px !important; /* Beide Tabellen-Buttons haben exakt 145px */
    padding: 5px 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    justify-content: center !important; /* Text mittig */
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Spezieller Schatten für den kleinen blauen Zuweisen-Button */
.btn-assign--sm[b-od927i8e1j] {
    box-shadow: 0 2px 6px rgba(91, 91, 214, 0.35) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.btn-assign--sm:hover[b-od927i8e1j] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(91, 91, 214, 0.5) !important;
}

/* ════════════════════════════════════════════
   ConfirmDialog (Shared-Komponente)
   ════════════════════════════════════════════ */
.cdlg-overlay[b-od927i8e1j] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}


.cdlg-box[b-od927i8e1j] {
    width: 100%;
    max-width: 440px;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    box-shadow: var(--f-shadow-2);
    padding: 1.6rem 1.6rem 1.3rem;
}

.cdlg-icon[b-od927i8e1j] {
    width: 44px;
    height: 44px;
    border-radius: var(--f-radius-m);
    display: grid;
    place-items: center;
    margin-bottom: 0.9rem;
}

.cdlg-icon svg[b-od927i8e1j] {
    width: 22px;
    height: 22px;
}

.cdlg-icon--brand[b-od927i8e1j] {
    background: var(--f-brand-tint-bg);
    color: var(--f-brand-stroke);
}

.cdlg-icon--danger[b-od927i8e1j] {
    background: rgba(255, 77, 79, 0.12);
    color: #ff4d4f;
}

.cdlg-title[b-od927i8e1j] {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--f-fg-1);
}

.cdlg-text[b-od927i8e1j] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--f-fg-3);
}

.cdlg-list[b-od927i8e1j] {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.3rem;
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-2);
    border-radius: var(--f-radius-m);
    max-height: 170px;
    overflow-y: auto;
}

.cdlg-list li[b-od927i8e1j] {
    padding: 0.45rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--f-fg-1);
}

.cdlg-list li + li[b-od927i8e1j] {
    border-top: 1px solid var(--f-stroke-2);
}

.cdlg-actions[b-od927i8e1j] {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.3rem;
}

.cdlg-confirm--danger[b-od927i8e1j] {
    background: #c2453a !important;
    color: #fff !important;
}

.cdlg-confirm--danger:hover[b-od927i8e1j] {
    background: #d4554a !important;
}

/* ════════════════════════════════════════════
   ConfirmDialog (Bestätigungsdialog Lizenzen)
   ════════════════════════════════════════════ */
[b-od927i8e1j] .cdlg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

[b-od927i8e1j] .cdlg-box {
    width: 100%;
    max-width: 440px;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    box-shadow: var(--f-shadow-2);
    padding: 1.6rem 1.6rem 1.3rem;
}

[b-od927i8e1j] .cdlg-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--f-radius-m);
    display: grid;
    place-items: center;
    margin-bottom: 0.9rem;
}

[b-od927i8e1j] .cdlg-icon svg {
    width: 22px;
    height: 22px;
}

[b-od927i8e1j] .cdlg-icon--brand {
    background: var(--f-brand-tint-bg);
    color: var(--f-brand-stroke);
}

[b-od927i8e1j] .cdlg-icon--danger {
    background: rgba(255, 77, 79, 0.12);
    color: #ff4d4f;
}

[b-od927i8e1j] .cdlg-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--f-fg-1);
}

[b-od927i8e1j] .cdlg-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--f-fg-3);
}

[b-od927i8e1j] .cdlg-list {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.3rem;
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-2);
    border-radius: var(--f-radius-m);
    max-height: 170px;
    overflow-y: auto;
}

[b-od927i8e1j] .cdlg-list li {
    padding: 0.45rem 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--f-fg-1);
}

[b-od927i8e1j] .cdlg-list li + li {
    border-top: 1px solid var(--f-stroke-2);
}

[b-od927i8e1j] .cdlg-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.3rem;
}

[b-od927i8e1j] .cdlg-confirm--danger {
    background: #c2453a !important;
    color: #fff !important;
}

[b-od927i8e1j] .cdlg-confirm--danger:hover {
    background: #d4554a !important;
}

.device-actions[b-od927i8e1j] {
    position: relative;
}

.action-menu-button[b-od927i8e1j] {
    width: 36px;
    height: 36px;

    border: 1px solid var(--f-stroke-2);
    border-radius: 8px;

    background: var(--f-surface);
    color: var(--f-fg-1);

    cursor: pointer;
    font-size: 22px;
    font-weight: bold;

    transition: all .15s ease;
}

.action-menu-button:hover[b-od927i8e1j] {
    background: var(--f-subtle-hover);
}

.action-menu[b-od927i8e1j] {
    position: absolute;
    top: 42px;
    right: 0;
    min-width: 220px;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    z-index: 999;
}

.action-menu button[b-od927i8e1j] {
    width: 100%;

    border: none;
    background: transparent;

    padding: 12px 16px;

    text-align: left;
    color: var(--f-fg-1);

    cursor: pointer;
}

.action-menu button:hover[b-od927i8e1j] {
    background: var(--f-subtle-hover);
}

.action-divider[b-od927i8e1j] {
    height: 1px;
    background: var(--f-stroke-2);
}
/* /Frontend/Pages/Downloads.razor.rz.scp.css */
.flow-page[b-pr31eb5dhw] {
    max-width: 1000px;
    margin: 0 auto;
}

.flow-body[b-pr31eb5dhw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Hero */

.flow-hero[b-pr31eb5dhw] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,#1c0608 0%,#2c0a0f 40%,#3c0f15 72%,#140407 100%);
    border-radius: var(--f-radius-3xl);
    padding: 2rem;
    margin-bottom: 1.5rem;

    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 64px rgba(40,8,12,.45);
}

.flow-eyebrow[b-pr31eb5dhw] {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #e6a8a2;
    margin-bottom: .75rem;
}

.flow-hero-content h1[b-pr31eb5dhw] {
    margin: 0 0 .75rem;
    color: white;
    font-size: 2rem;
    font-weight: 700;
}

.flow-hero-content p[b-pr31eb5dhw] {
    margin: 0;
    color: rgba(255,255,255,.75);
    line-height: 1.7;
}

/* Panels */

.panel[b-pr31eb5dhw] {
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--f-shadow-2);
}

.panel-head[b-pr31eb5dhw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.panel-head h2[b-pr31eb5dhw] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.lead[b-pr31eb5dhw] {
    margin: 0 0 1rem;
    color: var(--f-fg-2);
    line-height: 1.7;
}

/* Pills */

.pill[b-pr31eb5dhw] {
    padding: .3rem .75rem;
    border-radius: 999px;
    background: var(--f-brand-tint-bg);
    color: var(--f-brand-tint-fg);
    font-size: .75rem;
    font-weight: 600;
}

/* CTA */

.cta[b-pr31eb5dhw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: .9rem 1.2rem;

    border: 0;
    border-radius: 12px;

    background: var(--f-brand-grad);
    color: white;

    font-size: .95rem;
    font-weight: 600;

    cursor: pointer;
    text-decoration: none;

    transition: .2s;
}

.cta:hover[b-pr31eb5dhw] {
    transform: translateY(-1px);
    color: white;
}

.cta.ghost[b-pr31eb5dhw] {
    background: var(--f-surface);
    border: 1px solid var(--f-brand-stroke);
    color: var(--f-brand-fg);
}

.cta.ghost:hover[b-pr31eb5dhw] {
    background: var(--f-brand-tint-bg);
}

/* Hinweis */

.bind-note[b-pr31eb5dhw] {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: 12px;

    background: var(--f-info-bg);
    color: var(--f-info-fg);
}

/* Terminal */

.terminal[b-pr31eb5dhw] {
    background: #0c0c14;
    border: 1px solid #21212d;
    border-radius: 16px;
    overflow: hidden;
}

.term-bar[b-pr31eb5dhw] {
    display: flex;
    align-items: center;
    gap: .45rem;

    padding: .75rem 1rem;

    background: #161622;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.tdot[b-pr31eb5dhw] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.tdot.r[b-pr31eb5dhw] {
    background: #ff5f57;
}

.tdot.y[b-pr31eb5dhw] {
    background: #febc2e;
}

.tdot.g[b-pr31eb5dhw] {
    background: #28c840;
}

.term-name[b-pr31eb5dhw] {
    margin-left: .5rem;
    color: rgba(255,255,255,.65);
    font-size: .8rem;
}

.term-copy[b-pr31eb5dhw] {
    margin-left: auto;

    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: white;

    padding: .35rem .75rem;
    border-radius: 8px;

    cursor: pointer;
}

.term-copy:hover[b-pr31eb5dhw] {
    background: rgba(255,255,255,.12);
}

.term-body[b-pr31eb5dhw] {
    padding: 1rem;
}

.term-body code[b-pr31eb5dhw] {
    color: #f5f5f5;
    word-break: break-all;
}

/* Devices Button */

.devices-link[b-pr31eb5dhw] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.download-actions[b-pr31eb5dhw] {
    margin-bottom: 1.25rem;
}

/* Mobile */

@media (max-width: 760px) {

    .flow-hero[b-pr31eb5dhw] {
        padding: 1.5rem;
    }

    .flow-hero-content h1[b-pr31eb5dhw] {
        font-size: 1.6rem;
    }

    .panel-head[b-pr31eb5dhw] {
        flex-direction: column;
        align-items: flex-start;
    }

    .term-bar[b-pr31eb5dhw] {
        flex-wrap: wrap;
    }

    .term-copy[b-pr31eb5dhw] {
        margin-left: 0;
    }
}
/* /Frontend/Pages/Error.razor.rz.scp.css */
/* Error — scoped, tokens only */

.err-page[b-7ppffdj6fj] {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.err-card[b-7ppffdj6fj] {
    max-width: 520px;
    width: 100%;
}

.err-request-id[b-7ppffdj6fj] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-2);
    border-radius: var(--f-radius-l);
    padding: 0.75rem 1.25rem;
    margin-top: 1rem;
    text-align: left;
}

.err-actions[b-7ppffdj6fj] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}
/* /Frontend/Pages/Home.razor.rz.scp.css */
/* Home nutzt jetzt das globale Marketing-Designsystem: wwwroot/css/marketing.css
   (alle Selektoren unter .mkt). Keine seiten-scoped Styles mehr nötig. */
/* /Frontend/Pages/Licenses.razor.rz.scp.css */

/* ════════════════════════════════════════════════════════════════
   Licenses.razor.css — Lizenzübersicht und Detail-Modal
   ════════════════════════════════════════════════════════════════ */

/* 1. Seitenlayout */

@keyframes fui-fade-up-b-91bzisc1ca {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cock-head[b-91bzisc1ca] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.cock-head h1[b-91bzisc1ca] {
    font-family: var(--f-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--f-fg-1);
}

.cock-head p[b-91bzisc1ca] {
    color: var(--f-fg-3);
    margin: 0.3rem 0 0;
    font-size: 0.92rem;
}

.cock-empty[b-91bzisc1ca] {
    max-width: 560px;
    margin: 2rem auto;
    padding: 2.25rem;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    text-align: center;
    box-shadow: var(--f-shadow-2);
}

.cock-empty .fui-ic[b-91bzisc1ca] {
    margin: 0 auto 1rem;
}

.cock-empty h3[b-91bzisc1ca] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--f-fg-1);
}

.cock-empty p[b-91bzisc1ca] {
    color: var(--f-fg-3);
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
    line-height: 1.6;
}

.cock-foot[b-91bzisc1ca] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.1rem;
    font-size: 0.8rem;
    color: var(--f-fg-4);
}

/* 2. Summary-Karte */

.dash-summary[b-91bzisc1ca] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

[b-91bzisc1ca] .scard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--f-shadow-2);
}

[b-91bzisc1ca] .scard-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

[b-91bzisc1ca] .scard-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

[b-91bzisc1ca] .scard-title {
    font-family: var(--f-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--f-fg-1);
}

[b-91bzisc1ca] .scard-subtitle {
    font-size: 0.82rem;
    color: var(--f-fg-3);
}

[b-91bzisc1ca] .scard-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-91bzisc1ca] .sic {
    width: 46px;
    height: 46px;
    border-radius: var(--f-radius-l);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

[b-91bzisc1ca] .sic svg {
    width: 22px;
    height: 22px;
}

[b-91bzisc1ca] .sic.purple {
    background: var(--f-brand-tint-bg);
    color: var(--f-brand-2);
}

[b-91bzisc1ca] .sval {
    font-family: var(--f-font-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--f-fg-1);
}

[b-91bzisc1ca] .sval-unit {
    font-family: var(--f-font-body, system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--f-fg-2);
}

/* 3. Lizenzfortschritt */

/* 3. Lizenzfortschritt */

.license-progress[b-91bzisc1ca] {
    display: block;
    position: relative;
    width: 100%;
    height: 10px;
    margin-top: 1rem;
    padding: 0;
    background: var(--f-surface-3);
    border-radius: 999px;
    overflow: hidden;
    box-sizing: border-box;
}

.license-progress .license-progress-fill[b-91bzisc1ca] {
    display: block;
    height: 100%;
    width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    background: var(--f-brand-grad);
    border-radius: 999px;
    transition: width 0.25s ease;
}

.license-stats[b-91bzisc1ca] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--f-fg-3);
}

.license-stats .free[b-91bzisc1ca] {
    color: var(--f-success-fg);
    font-weight: 600;
}

/* 4. Filter-Tabs */

.license-tabs[b-91bzisc1ca] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: 0 0 0.75rem;
    margin: 1rem 0;
    border-bottom: 1px solid var(--f-stroke-2);
}

.license-tabs span[b-91bzisc1ca] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-bottom: 0.75rem;
    margin-bottom: -0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--f-fg-3);
    cursor: pointer;
    transition: color 0.2s ease;
}

.license-tabs span:hover[b-91bzisc1ca] {
    color: var(--f-fg-1);
}

.license-tabs span.active[b-91bzisc1ca] {
    color: var(--f-brand-2);
}

.license-tabs span.active[b-91bzisc1ca]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--f-brand-2);
    border-radius: 999px;
}

.license-tabs span strong[b-91bzisc1ca] {
    font-weight: 700;
}

/* 5. Tabelle */

.table-box[b-91bzisc1ca] {
    width: 100%;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    overflow-x: auto;
    box-shadow: var(--f-shadow-2);
}

.device-table[b-91bzisc1ca] {
    width: 100%;
    border-collapse: collapse;
}

.device-table th[b-91bzisc1ca] {
    padding: 0.85rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--f-fg-4);
    text-align: left;
    border-bottom: 1px solid var(--f-stroke-2);
}

.device-table td[b-91bzisc1ca] {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: var(--f-fg-1);
    border-bottom: 1px solid var(--f-stroke-2);
    vertical-align: middle;
}

.device-table tbody tr:last-child td[b-91bzisc1ca] {
    border-bottom: 0;
}

.device-table tbody tr:hover[b-91bzisc1ca] {
    background: var(--f-subtle-hover);
}

.ta-r[b-91bzisc1ca] {
    text-align: right;
}

/* 6. Lizenzstatus */

.license-status[b-91bzisc1ca] {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.license-status.assigned[b-91bzisc1ca] {
    background: var(--f-info-bg);
    border: 1px solid var(--f-info-bg);
    color: var(--f-info-fg);
}

.license-status.free[b-91bzisc1ca] {
    background: var(--f-success-bg);
    border: 1px solid var(--f-success-stroke);
    color: var(--f-success-fg);
}

.license-status.expired[b-91bzisc1ca] {
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
}

/* 7. Details-Button ohne Standard-HTML-Design */

button.license-link[b-91bzisc1ca] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--f-brand-2);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: inherit;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

button.license-link:hover[b-91bzisc1ca] {
    background: transparent;
    color: var(--f-brand-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

button.license-link:focus-visible[b-91bzisc1ca] {
    outline: 2px solid var(--f-brand-2);
    outline-offset: 4px;
}

/* 8. Modal-Hintergrund */

.license-modal-backdrop[b-91bzisc1ca] {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    padding: 20px;

    background: rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* 9. Modal-Fenster */

.license-modal[b-91bzisc1ca] {
    position: relative;
    flex: 0 1 540px;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 40px);

    margin: auto;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;

    background: var(--f-surface);
    color: var(--f-fg-1);

    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    box-shadow: var(--f-shadow-8);
}

/* 10. Modal-Kopf */

.license-modal-header[b-91bzisc1ca] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding: 24px 28px;

    background: var(--f-surface);
    border-bottom: 1px solid var(--f-stroke-2);
}

.license-modal-header h2[b-91bzisc1ca] {
    margin: 8px 0 0;
    color: var(--f-fg-1);
    font-family: var(--f-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.license-modal-eyebrow[b-91bzisc1ca] {
    display: block;
    color: var(--f-brand-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
}

/* Schließen-X */

button.license-modal-close[b-91bzisc1ca] {
    display: grid;
    place-items: center;
    flex-shrink: 0;

    width: 36px;
    height: 36px;
    padding: 0;

    color: var(--f-fg-2);
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-1);
    border-radius: var(--f-radius-m);

    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
}

button.license-modal-close:hover[b-91bzisc1ca] {
    color: var(--f-fg-1);
    background: var(--f-subtle-hover);
}

/* 11. Modal-Inhalt */

.license-modal-body[b-91bzisc1ca] {
    padding: 8px 28px;
    background: var(--f-surface);
}

.license-detail-row[b-91bzisc1ca] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 17px 0;

    border-bottom: 1px solid var(--f-stroke-2);
}

.license-detail-row:last-child[b-91bzisc1ca] {
    border-bottom: 0;
}

.license-detail-row > span:first-child[b-91bzisc1ca] {
    flex-shrink: 0;
    color: var(--f-fg-3);
    font-size: 0.85rem;
}

.license-detail-row strong[b-91bzisc1ca] {
    color: var(--f-fg-1);
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* 12. Modal-Fuß */

.license-modal-footer[b-91bzisc1ca] {
    display: flex;
    justify-content: flex-end;
    padding: 20px 28px;

    background: var(--f-surface);
    border-top: 1px solid var(--f-stroke-2);
}

/* 13. Responsive Darstellung */

@media (max-width: 820px) {
    .dash-summary[b-91bzisc1ca] {
        grid-template-columns: 1fr;
    }

    .license-stats[b-91bzisc1ca] {
        gap: 0.65rem 1rem;
    }

    .license-tabs[b-91bzisc1ca] {
        gap: 1.25rem;
    }
}

@media (max-width: 520px) {
    .license-modal-backdrop[b-91bzisc1ca] {
        padding: 12px;
    }

    .license-modal[b-91bzisc1ca] {
        max-height: calc(100vh - 24px);
    }

    .license-modal-header[b-91bzisc1ca],
    .license-modal-body[b-91bzisc1ca],
    .license-modal-footer[b-91bzisc1ca] {
        padding-left: 20px;
        padding-right: 20px;
    }

    .license-detail-row[b-91bzisc1ca] {
        gap: 12px;
    }

    .license-detail-row > span:first-child[b-91bzisc1ca],
    .license-detail-row strong[b-91bzisc1ca] {
        font-size: 0.8rem;
    }
}
/* /Frontend/Pages/NotFound.razor.rz.scp.css */
/* NotFound — scoped, tokens only */

.nf-page[b-6qp17p0inf] {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.nf-card[b-6qp17p0inf] {
    max-width: 480px;
    width: 100%;
}

.nf-actions[b-6qp17p0inf] {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}
/* /Frontend/Pages/Organization.razor.rz.scp.css */
/* ════════════════════════════════════════════
   organisation — Fluent 2 scoped styles
   Only var(--f-*) tokens; no hardcoded colours.
   ════════════════════════════════════════════ */

.organisation-page[b-rmi6syych3] { max-width: 860px; }

/* security notice */
.organisation-secure[b-rmi6syych3] {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: var(--f-success-bg); border-color: var(--f-success-stroke);
    color: var(--f-success-fg); margin-bottom: 1.75rem;
}

/* section spacing */
.organisation-section[b-rmi6syych3] { margin-bottom: 2rem; }
.ts-head[b-rmi6syych3] { margin-bottom: 0.9rem; }
.ps-actions[b-rmi6syych3] { gap: 0.5rem; }

/* key-value grid */
.kv-grid[b-rmi6syych3] {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.5rem;
}
.kv[b-rmi6syych3] { display: flex; flex-direction: column; gap: 0.2rem; }
.kv strong[b-rmi6syych3] { font-size: 0.92rem; font-weight: 600; color: var(--f-fg-1); }

/* org form */
.form-grid[b-rmi6syych3] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
}
.form-grid label.full[b-rmi6syych3] { grid-column: 1 / -1; }
.form-hint[b-rmi6syych3] { margin-top: 0.75rem; }

/* save confirmation */
.saved-note[b-rmi6syych3] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.84rem; font-weight: 600;
    color: var(--f-success-fg); background: var(--f-success-bg);
    border: 1px solid var(--f-success-stroke);
    border-radius: var(--f-radius-l); padding: 0.55rem 0.85rem; margin-top: 1rem;
}
.saved-note svg[b-rmi6syych3] { width: 15px; height: 15px; flex-shrink: 0; }

/* avatar role tints */
.m-avatar.admin[b-rmi6syych3]   { background: var(--f-brand-grad); }
.m-avatar.partner[b-rmi6syych3] { background: linear-gradient(135deg, var(--f-info) 0%, var(--f-brand) 100%); }
.m-avatar.user[b-rmi6syych3]    { background: var(--f-surface-3); color: var(--f-fg-2); }

.m-mail[b-rmi6syych3] { font-size: 0.82rem; }

/* invite form */
.invite-form[b-rmi6syych3] {
    display: flex; align-items: flex-end;
    justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.if-field[b-rmi6syych3] { flex: 1; min-width: 200px; }
.role-pills[b-rmi6syych3] { gap: 0.4rem; }
.invite-btn[b-rmi6syych3] { white-space: nowrap; }

/* invite created confirmation */
.invite-created[b-rmi6syych3] {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: var(--f-success-bg); border-color: var(--f-success-stroke);
    color: var(--f-success-fg); margin-top: 0.75rem;
}
.ic-link[b-rmi6syych3] {
    display: block; margin-top: 0.5rem;
    word-break: break-all; font-size: 0.82rem;
}

/* expired invite row */
.inv-row-exp[b-rmi6syych3] { opacity: 0.6; }
.inv-code[b-rmi6syych3] { font-size: 0.82rem; }

/* footer note */
.organisation-foot[b-rmi6syych3] {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin-top: 0.5rem; line-height: 1.55;
}
.organisation-foot svg[b-rmi6syych3] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--f-fg-3); }

@media (max-width: 640px) {
    .kv-grid[b-rmi6syych3], .form-grid[b-rmi6syych3] { grid-template-columns: 1fr; }
    .invite-form[b-rmi6syych3] { flex-direction: column; align-items: stretch; }
    .invite-btn[b-rmi6syych3] { justify-content: center; }
}
/* /Frontend/Pages/Payment.razor.rz.scp.css */
/* Payment page — scoped styles, tokens only */

.pay-alert[b-3qggstyso3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
}

.pay-alert--danger[b-3qggstyso3] {
    background: var(--f-danger-bg);
    border-color: var(--f-danger-stroke);
    color: var(--f-danger-fg);
}

.pay-spinner-wrap[b-3qggstyso3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem;
}

.pay-spinner[b-3qggstyso3] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--f-stroke-2);
    border-top-color: var(--f-brand);
    border-radius: 50%;
    animation: pay-spin-b-3qggstyso3 0.7s linear infinite;
}

@keyframes pay-spin-b-3qggstyso3 {
    to { transform: rotate(360deg); }
}

/* Stat mini-cards in the analysis section */
.pay-stat[b-3qggstyso3] {
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-xl);
    padding: 1rem 1.25rem;
    text-align: center;
}

.pay-stat-value[b-3qggstyso3] {
    font-family: var(--f-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.pay-stat-label[b-3qggstyso3] {
    font-size: 0.8rem;
    color: var(--f-fg-3);
}

.payment-qty-stepper[b-3qggstyso3] {
    display: inline-grid;
    grid-template-columns: 32px 64px 32px;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-l);
}

.payment-qty-stepper button[b-3qggstyso3] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--f-radius-m);
    background: var(--f-surface);
    color: var(--f-brand-fg);
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--f-shadow-2);
    display: grid;
    place-items: center;
}

.payment-qty-stepper button:hover:not(:disabled)[b-3qggstyso3] {
    background: var(--f-surface-hover);
}

.payment-qty-stepper button:disabled[b-3qggstyso3] {
    color: var(--f-fg-disabled);
    background: transparent;
    box-shadow: none;
    cursor: default;
}

.payment-qty-input[b-3qggstyso3] {
    width: 64px;
    height: 32px;
    min-width: 0;
    box-sizing: border-box;
    padding: 0 5px;
    border: 1px solid transparent;
    border-radius: var(--f-radius-m);
    background: transparent;
    color: var(--f-fg-1);
    text-align: center;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

.payment-qty-input:hover[b-3qggstyso3] {
    background: var(--f-surface);
    border-color: var(--f-stroke-1);
}

.payment-qty-input:focus[b-3qggstyso3] {
    background: var(--f-surface);
    border-color: var(--f-brand);
    box-shadow: 0 0 0 2px var(--f-brand-tint-bg);
}

.pay-stat--danger .pay-stat-value[b-3qggstyso3] { color: var(--f-danger-fg); }
.pay-stat--warning .pay-stat-value[b-3qggstyso3] { color: var(--f-warning-fg); }
.pay-stat--success .pay-stat-value[b-3qggstyso3] { color: var(--f-success-fg); }

/* Payment method selector buttons */
.pay-method[b-3qggstyso3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--f-surface);
    border: 1.5px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    padding: 1.25rem;
    cursor: pointer;
    text-align: left;
    transition: transform var(--f-dur) var(--f-ease-decel),
                box-shadow var(--f-dur) var(--f-ease-decel),
                border-color var(--f-dur) var(--f-ease);
    width: 100%;
    color: var(--f-fg-1);
}

.pay-method:hover:not(.is-disabled)[b-3qggstyso3] {
    transform: translateY(-2px);
    box-shadow: var(--f-shadow-8);
    border-color: var(--f-brand-stroke);
}

.pay-method.is-disabled[b-3qggstyso3] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.pay-method-body[b-3qggstyso3] {
    flex: 1;
}

.pay-method-title[b-3qggstyso3] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--f-fg-1);
    margin-bottom: 0.15rem;
}

.pay-method-amount[b-3qggstyso3] {
    display: inline-block;
    margin-top: 0.4rem;
    background: var(--f-info-bg);
    color: var(--f-info-fg);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.18rem 0.55rem;
    border-radius: var(--f-radius-circle);
    border: 1px solid var(--f-info-stroke);
}

.pay-method-amount--wero[b-3qggstyso3] {
    background: var(--f-success-bg);
    color: var(--f-success-fg);
    border-color: var(--f-success-stroke);
}

.pay-method-arrow[b-3qggstyso3] {
    width: 18px;
    height: 18px;
    color: var(--f-fg-4);
    flex: none;
    transition: transform var(--f-dur) var(--f-ease-decel);
}

.pay-method:hover:not(.is-disabled) .pay-method-arrow[b-3qggstyso3] {
    transform: translateX(3px);
    color: var(--f-brand-fg);
}
/* /Frontend/Pages/PaymentCancel.razor.rz.scp.css */
/* PaymentCancel — scoped, tokens only */

.pay-status-page[b-4whiq7czhg] {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.pay-status-card[b-4whiq7czhg] {
    max-width: 480px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.pay-status-icon[b-4whiq7czhg] {
    margin-bottom: 0.5rem;
}

.pay-cancel-actions[b-4whiq7czhg] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}
/* /Frontend/Pages/PaymentResult.razor.rz.scp.css */
/* PaymentResult — scoped, tokens only */

.pay-result-page[b-1cjh2b8jia] {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.pay-result-card[b-1cjh2b8jia] {
    max-width: 560px;
    width: 100%;
    text-align: center;
}

.pay-result-icon-wrap[b-1cjh2b8jia] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.pay-status-grid[b-1cjh2b8jia] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    text-align: left;
    margin-top: 0.25rem;
}

.pay-status-item[b-1cjh2b8jia] {
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-2);
    border-radius: var(--f-radius-l);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pay-status-item--full[b-1cjh2b8jia] {
    grid-column: 1 / -1;
}

.pay-info-box[b-1cjh2b8jia] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--f-info-bg);
    border: 1px solid var(--f-info-stroke);
    border-radius: var(--f-radius-l);
    padding: 0.85rem 1rem;
    text-align: left;
    color: var(--f-info-fg);
}

.pay-info-box--warning[b-1cjh2b8jia] {
    background: var(--f-warning-bg);
    border-color: var(--f-warning-stroke);
    color: var(--f-warning-fg);
}

@keyframes pay-indeterminate-b-1cjh2b8jia {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
/* /Frontend/Pages/PaymentSuccess.razor.rz.scp.css */
/* PaymentSuccess — scoped, tokens only */

.pay-status-page[b-yuxf27ie82] {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
}

.pay-status-card[b-yuxf27ie82] {
    max-width: 480px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.pay-status-icon[b-yuxf27ie82] {
    margin-bottom: 0.5rem;
}

.pay-tx-box[b-yuxf27ie82] {
    background: var(--f-surface-3);
    border: 1px solid var(--f-stroke-2);
    border-radius: var(--f-radius-l);
    padding: 0.85rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    text-align: left;
    width: 100%;
}

.mt-4[b-yuxf27ie82] { margin-top: 1rem; }
/* /Frontend/Pages/Profile.razor.rz.scp.css */
/* ════════════════════════════════════════════
   Profil — Fluent 2 scoped styles
   Only var(--f-*) tokens; no hardcoded colours.
   ════════════════════════════════════════════ */

.prof-page[b-k3m2vii9kx] { max-width: 860px; }

/* avatar in page head */
.ph-id[b-k3m2vii9kx] { min-width: 0; }
.ph-mail[b-k3m2vii9kx] { margin-top: 0.2rem; }

/* tab strip spacing */
.prof-tabs[b-k3m2vii9kx] { margin-bottom: 1.5rem; }

/* panel section header */
.panel-bar[b-k3m2vii9kx] { margin-bottom: 0.85rem; }
.panel-bar--mt[b-k3m2vii9kx] { margin-top: 1.75rem; }
.ps-actions[b-k3m2vii9kx] { gap: 0.5rem; }

/* key-value grid */
.kv-grid[b-k3m2vii9kx] {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.5rem;
}
.kv[b-k3m2vii9kx] { display: flex; flex-direction: column; gap: 0.2rem; }
.kv strong[b-k3m2vii9kx] { font-size: 0.92rem; font-weight: 600; color: var(--f-fg-1); }

/* org form */
.form-grid[b-k3m2vii9kx] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
}
.form-grid label.full[b-k3m2vii9kx] { grid-column: 1 / -1; }
.form-hint[b-k3m2vii9kx] { margin-top: 0.75rem; }

/* save confirmation */
.saved-note[b-k3m2vii9kx] {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.84rem; font-weight: 600;
    color: var(--f-success-fg); background: var(--f-success-bg);
    border: 1px solid var(--f-success-stroke);
    border-radius: var(--f-radius-l); padding: 0.55rem 0.85rem; margin-top: 1rem;
}
.saved-note svg[b-k3m2vii9kx] { width: 15px; height: 15px; flex-shrink: 0; }

/* plan card */
.plan-card[b-k3m2vii9kx] { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.plan-main[b-k3m2vii9kx] { flex: 1; min-width: 160px; }
.plan-badge[b-k3m2vii9kx] { font-size: 0.92rem; padding: 0.3rem 0.85rem; }
.plan-meta[b-k3m2vii9kx] { margin-top: 0.4rem; }

/* invoice table */
.ta-r[b-k3m2vii9kx] { text-align: right; }
.mono[b-k3m2vii9kx] { font-family: var(--f-font-mono); font-size: 0.82rem; color: var(--f-fg-3); }
.amount[b-k3m2vii9kx] { font-weight: 700; color: var(--f-fg-1); }

/* security list */
.sec-list[b-k3m2vii9kx] { padding: 0.25rem 1.5rem; }
.sec-row[b-k3m2vii9kx] {
    display: flex; align-items: center;
    justify-content: space-between; gap: 1rem; padding: 1rem 0;
}

/* footer note */
.prof-foot[b-k3m2vii9kx] {
    display: flex; align-items: flex-start; gap: 0.55rem;
    margin-top: 1.5rem; line-height: 1.55;
}
.prof-foot svg[b-k3m2vii9kx] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--f-fg-3); }

@media (max-width: 640px) {
    .kv-grid[b-k3m2vii9kx], .form-grid[b-k3m2vii9kx] { grid-template-columns: 1fr; }
    .plan-card[b-k3m2vii9kx] { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
/* /Frontend/Pages/Setup.razor.rz.scp.css */
.verify-status[b-fq6o0wural] {
    text-align: center;
}

.verify-badge[b-fq6o0wural] {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
}

.verify-badge svg[b-fq6o0wural] {
    width: 30px;
    height: 30px;
}

.verify-badge--pending[b-fq6o0wural] {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.verify-badge--rejected[b-fq6o0wural] {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
}

.verify-summary[b-fq6o0wural] {
    text-align: left;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.45rem 1.1rem;
    margin: 0;
}

.verify-summary dt[b-fq6o0wural] {
    color: #6b7280;
    font-size: 0.85rem;
    align-self: center;
}

.verify-summary dd[b-fq6o0wural] {
    margin: 0;
    font-weight: 600;
    text-align: right;
}
/* /Frontend/Shared/Card.razor.rz.scp.css */
/* ════════════════════════════════════════════
   Card — Shared Component
   ════════════════════════════════════════════ */

/* ── Link-Wrapper ── */
.dash-cta[b-14fthbu4xs],
.dash-cta:hover[b-14fthbu4xs],
.dash-cta:focus[b-14fthbu4xs] {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

/* ── Karten-Hülle ── */
.scard[b-14fthbu4xs] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    background: var(--f-surface);
    border: 1px solid var(--f-stroke-card);
    border-radius: var(--f-radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--f-shadow-2);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease;
}

.dash-cta:hover .scard[b-14fthbu4xs] {
    transform: translateY(-2px);
    box-shadow: var(--f-shadow-8);
    border-color: var(--f-stroke-1);
}

/* ── Header: Icon + Titel ── */
.scard-header[b-14fthbu4xs] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.scard-title-group[b-14fthbu4xs] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.scard-title[b-14fthbu4xs] {
    font-family: var(--f-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--f-fg-1);
    line-height: 1.2;
}

.scard-subtitle[b-14fthbu4xs] {
    font-size: 0.82rem;
    color: var(--f-fg-3);
    font-weight: 500;
    line-height: 1.3;
}

/* ── Icon-Badge (sic) ── */
.sic[b-14fthbu4xs] {
    width: 46px;
    height: 46px;
    border-radius: var(--f-radius-l);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* ::deep nötig: das SVG kommt als RenderFragment von der Eltern-Seite */
.sic[b-14fthbu4xs]  svg {
    width: 22px;
    height: 22px;
}

/* Farbvarianten */
.sic.grey[b-14fthbu4xs],
.sic.gray[b-14fthbu4xs] {
    background: var(--f-surface-3);
    color: var(--f-fg-2);
    border: 1px solid var(--f-stroke-1);
}

.sic.indigo[b-14fthbu4xs] {
    background: var(--f-brand-tint-bg);
    color: var(--f-brand-tint-fg);
}

.sic.green[b-14fthbu4xs] {
    background: var(--f-success-bg);
    color: var(--f-success-fg);
}

.sic.purple[b-14fthbu4xs] {
    background: var(--f-brand-tint-bg);
    color: var(--f-brand-2);
}

.sic.blue[b-14fthbu4xs] {
    background: var(--f-info-bg);
    color: var(--f-info-fg);
}

.sic.red[b-14fthbu4xs] {
    background: var(--f-danger-bg);
    color: var(--f-danger-fg);
}

/* ── Body: Wert + Beschreibung ── */
.scard-body[b-14fthbu4xs] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sval[b-14fthbu4xs] {
    font-family: var(--f-font-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--f-fg-1);
}

/* ::deep nötig: sval-unit steckt im Value-Fragment der Eltern-Seite */
.sval[b-14fthbu4xs]  .sval-unit {
    font-family: var(--f-font-body, system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--f-fg-2);
    letter-spacing: -0.01em;
}

.slab[b-14fthbu4xs] {
    font-size: 0.76rem;
    color: var(--f-fg-3);
    margin-top: 0.6rem;
}

/* ── Footer ── */
.scard-footer[b-14fthbu4xs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgb(172 172 172 / 0.5);
    color: #b63b3b;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.scard-footer span:first-child[b-14fthbu4xs] {
    display: inline-block;
    transform-origin: left center;
    transition: transform 0.2s ease;
}

.scard-footer span:first-child:hover[b-14fthbu4xs] {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    transform: scale(1.02);
}

.scard-footer span:last-child[b-14fthbu4xs] {
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    transform-origin: center center;
    transition: transform 0.2s ease;
}

.scard-footer span:last-child:hover[b-14fthbu4xs] {
    transform: scale(1.2);
}

/* ── Variante: Compact (kleiner Titel links, kleines Icon-Badge rechts) ── */
.scard-header--compact[b-14fthbu4xs] {
    justify-content: space-between;
}

.scard-header--compact .sic[b-14fthbu4xs] {
    order: 2;
    width: 36px;
    height: 36px;
}

.scard-header--compact .sic[b-14fthbu4xs]  svg {
    width: 18px;
    height: 18px;
}

.scard-header--compact .scard-title[b-14fthbu4xs] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--f-fg-3);
}