/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* App Shell */
.app-shell[b-iwsk212stf] {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.main-area[b-iwsk212stf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0; /* prevents flex overflow */
}

.app-header[b-iwsk212stf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-color);
    flex-shrink: 0;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    gap: 0.5rem;
}

.app-header .text-muted[b-iwsk212stf] {
    color: var(--bs-secondary-color) !important;
    transition: color 0.3s ease;
}

.main-content[b-iwsk212stf] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--bg-color);
    color: var(--text-color);
    transition: background 0.3s ease, color 0.3s ease;
}

#blazor-error-ui[b-iwsk212stf] {
    color-scheme: light only;
    background: lightyellow;
    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 .dismiss[b-iwsk212stf] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-42akdotdcc],
.components-reconnect-repeated-attempt-visible[b-42akdotdcc],
.components-reconnect-failed-visible[b-42akdotdcc],
.components-pause-visible[b-42akdotdcc],
.components-resume-failed-visible[b-42akdotdcc],
.components-rejoining-animation[b-42akdotdcc] {
    display: none;
}

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


#components-reconnect-modal[b-42akdotdcc] {
    background-color: var(--bs-card-bg, white);
    color: var(--bs-body-color, #212529);
    width: 22rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--bs-border-color, transparent);
    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-42akdotdcc 0.5s both;
    &[open]

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

}

/* Dark + Developer themes — pick up theme tokens. */
:global([data-color-mode="dark"]) #components-reconnect-modal[b-42akdotdcc] {
    background-color: var(--bs-card-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

:global([data-bs-theme="developer"]) #components-reconnect-modal[b-42akdotdcc] {
    border-radius: 0;
    border-color: var(--dm-accent);
    font-family: var(--bs-font-mono);
}

:global([data-bs-theme="developer"]) #components-reconnect-modal button[b-42akdotdcc] {
    background-color: var(--dm-accent-soft);
    border: 1px solid var(--dm-accent);
    color: var(--dm-accent);
    border-radius: 0;
    font-family: var(--bs-font-mono);
}

:global([data-bs-theme="developer"]) #components-reconnect-modal button:hover[b-42akdotdcc] {
    background-color: var(--dm-accent);
    color: #0a0e14;
}

:global([data-bs-theme="developer"]) .components-rejoining-animation div[b-42akdotdcc] {
    border-color: var(--dm-accent);
}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-42akdotdcc] {
    border: 0;
    background-color: var(--ds-color-action-primary);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-42akdotdcc] {
        background-color: var(--ds-color-action-primary-hover);
    }

    #components-reconnect-modal button:active[b-42akdotdcc] {
        background-color: var(--ds-color-action-primary);
    }

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

    .components-rejoining-animation div[b-42akdotdcc] {
        position: absolute;
        border: 3px solid var(--ds-color-action-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-42akdotdcc 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-42akdotdcc {
    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;
    }
}
/* /Components/Pages/AuditLog.razor.rz.scp.css */
.audit-log-filter-input[b-9swp7o3f3y] {
    width: 180px;
}

.audit-log-entity-id[b-9swp7o3f3y] {
    font-size: 0.75rem;
}
/* /Components/Pages/AuthCallback.razor.rz.scp.css */
.auth-callback-wrapper[b-jlvnh92q4i] {
    min-height: 60vh;
}
/* /Components/Pages/DevCallback.razor.rz.scp.css */
.dev-callback-wrapper[b-3y355j2089] {
    min-height: 60vh;
}
/* /Components/Pages/DevLogin.razor.rz.scp.css */
.dev-login-container[b-y2tjbfsx16] {
    max-width: 400px;
    margin-top: 100px;
}
/* /Components/Pages/Flows.razor.rz.scp.css */
.flows-modal-backdrop[b-tw07946q3i] {
    background-color: rgba(0, 0, 0, 0.5);
    /* Full-viewport, scrollable container: a tall flow form (long description, async + schedule
       sections) can exceed the screen — let the whole modal scroll so the footer/save stays reachable. */
    position: fixed;
    inset: 0;
    overflow-y: auto;
}

.flow-card[b-tw07946q3i] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.flow-card:hover[b-tw07946q3i] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.flow-url[b-tw07946q3i] {
    word-break: break-all;
}

/* Multi-line description on the card — preserve author line breaks, cap height and scroll a long
   README blob so one flow card never dominates the grid. */
.flow-description[b-tw07946q3i] {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 8rem;
    overflow-y: auto;
}

/* The edit form's description textarea grows for a docs blob but stays inside the modal. */
.flow-description-input[b-tw07946q3i] {
    min-height: 5rem;
    max-height: 20rem;
    resize: vertical;
}

.flow-history[b-tw07946q3i] {
    max-height: 240px;
    overflow-y: auto;
}
/* /Components/Pages/Forbidden.razor.rz.scp.css */
.forbidden-wrapper[b-vkpfn1v86n] {
    min-height: 60vh;
}

.forbidden-message[b-vkpfn1v86n] {
    max-width: 480px;
}
/* /Components/Pages/JsonReader.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════
   ApoTune JSON Reader – ApoTune Analyse visual design
   ─────────────────────────────────────────────────────────────────── */

/* ── Design tokens (light mode) — ApoTune brand tokens ──────────────
   Was the self-contained "Analyse" navy/cyan palette; now bridged onto the
   --ds-* design system: chrome navy → ink, cyan accent → action blue, and the
   diagnostic status palette routed straight through the brand feedback tokens
   (ok → lime, warn → amber, err, info) for full brand fidelity. The brand has
   no feedback-success surface token, so --jrt-ok-bg is derived as a light lime
   tint, mirroring how the error/warning surfaces are built. Theme-aware --ds-*
   means this whole block re-resolves in dark mode; the [data-color-mode="dark"]
   block below only re-points the chrome surfaces. */
.json-reader-tool[b-dbn15t32de] {
    --jrt-navy:       var(--ds-color-text-primary);
    --jrt-navy2:      var(--ds-color-text-primary);
    --jrt-cyan:       var(--ds-color-action-primary);
    --jrt-cyan-bg:    var(--ds-color-action-selected-tint);
    --jrt-text:       var(--ds-color-text-primary);
    --jrt-muted:      var(--ds-color-text-secondary);
    --jrt-border:     var(--ds-color-border-strong);
    --jrt-bg:         var(--ds-color-surface-canvas);
    --jrt-white:      var(--ds-color-surface-base);
    --jrt-ok:    var(--ds-color-feedback-success);
    --jrt-ok-bg: color-mix(in srgb, var(--ds-color-feedback-success) 16%, var(--ds-color-surface-base) 84%);
    --jrt-warn:    var(--ds-color-feedback-warning);   --jrt-warn-bg: var(--ds-color-feedback-warning-surface);
    --jrt-err:     var(--ds-color-feedback-error);     --jrt-err-bg:  var(--ds-color-feedback-error-surface);
    --jrt-info:    var(--ds-color-feedback-info);      --jrt-info-bg: var(--ds-color-action-selected-tint);
    --jrt-shadow:     0 2px 8px rgba(43, 56, 62, .10);
    --jrt-shadow-sm:  0 1px 4px rgba(43, 56, 62, .06);

    /* Override shared json-reader-tool vars to use the brand palette */
    --bg:          var(--jrt-bg);
    --surface:     var(--jrt-white);
    --surface-soft:var(--jrt-bg);
    --heading:     var(--jrt-navy);
    --row-alt:     color-mix(in srgb, var(--ds-color-surface-base) 92%, var(--ds-color-text-primary) 8%);
    --text:        var(--jrt-text);
    --muted:       var(--jrt-muted);
    --accent:      var(--jrt-cyan);
    --border:      var(--jrt-border);
    --success:     var(--jrt-ok);
    --danger:      var(--jrt-err);
    --shadow:      var(--jrt-shadow);
    --shadow-soft: var(--jrt-shadow-sm);

    background: var(--jrt-bg);
    border-radius: 12px;
    padding: 0 0 1rem;
}

/* Dark-mode token overrides – fall back to Bootstrap semantic vars */
[data-color-mode="dark"] .json-reader-tool[b-dbn15t32de] {
    --jrt-navy:   var(--bs-emphasis-color);
    --jrt-cyan:   var(--bs-primary);
    --jrt-text:   var(--bs-body-color);
    --jrt-muted:  var(--bs-secondary-color);
    --jrt-border: var(--bs-border-color);
    --jrt-bg:     var(--bs-body-bg);
    --jrt-white:  var(--bs-secondary-bg);
    --bg:          var(--bs-body-bg);
    --surface:     var(--bs-secondary-bg);
    --surface-soft:var(--bs-tertiary-bg);
    --heading:     var(--bs-emphasis-color);
    --row-alt:     color-mix(in srgb, var(--bs-body-bg) 88%, var(--bs-secondary-bg) 12%);
    --text:        var(--bs-body-color);
    --muted:       var(--bs-secondary-color);
    --accent:      var(--bs-primary);
    --border:      var(--bs-border-color);
}

/* ── Hero (upload) area ──────────────────────────────────────────── */
.jrt-hero[b-dbn15t32de] {
    margin: 0 0 0;
}

.jrt-hero-inner[b-dbn15t32de] {
    background: var(--jrt-white);
    border: 1px solid var(--jrt-border);
    border-radius: 10px 10px 0 0;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: var(--jrt-shadow-sm);
}

[data-color-mode="dark"] .jrt-hero-inner[b-dbn15t32de] {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.jrt-hero-title[b-dbn15t32de] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--jrt-navy);
    display: flex;
    align-items: center;
    gap: 8px;
}

.jrt-hero-title .bi[b-dbn15t32de] {
    color: var(--jrt-cyan);
    font-size: 1.125rem;
}

[data-color-mode="dark"] .jrt-hero-title[b-dbn15t32de] {
    color: var(--bs-emphasis-color);
}

.jrt-hero-meta[b-dbn15t32de] {
    font-size: 0.6875rem;
    color: var(--jrt-muted);
    margin-top: 2px;
}

.jrt-hero-actions[b-dbn15t32de] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.jrt-hero-actions input[type="file"][b-dbn15t32de] {
    display: none;
}

/* ── Drop zone ───────────────────────────────────────────────────── */
.drop-zone[b-dbn15t32de] {
    background: var(--jrt-bg);
    border: 2px dashed color-mix(in srgb, var(--jrt-cyan) 45%, var(--jrt-border) 55%);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 1.4rem;
    text-align: center;
    color: var(--jrt-muted);
    min-height: 100px;
    display: grid;
    place-content: center;
    gap: 0.3rem;
    transition: border-color .18s, background .18s;
}

.drop-zone.dragging[b-dbn15t32de] {
    border-color: var(--jrt-cyan);
    background: var(--jrt-cyan-bg);
}

[data-color-mode="dark"] .drop-zone[b-dbn15t32de] {
    background: var(--bs-tertiary-bg);
    border-color: color-mix(in srgb, var(--bs-primary) 35%, var(--bs-border-color) 65%);
}

.jrt-drop-icon[b-dbn15t32de] {
    font-size: 2rem;
    color: color-mix(in srgb, var(--jrt-cyan) 60%, var(--jrt-muted) 40%);
    margin-bottom: 0.2rem;
}

.drop-zone p[b-dbn15t32de] {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
}

.drop-zone small[b-dbn15t32de] {
    font-size: 0.6875rem;
    color: var(--jrt-muted);
}

/* ── File info topbar (visible after load) ───────────────────────── */
.jrt-file-topbar[b-dbn15t32de] {
    background: var(--jrt-white);
    border: 1px solid var(--jrt-border);
    border-top: none;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 2.4rem;
}

[data-color-mode="dark"] .jrt-file-topbar[b-dbn15t32de] {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.jrt-file-topbar-left[b-dbn15t32de] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Override .status inside topbar */
.jrt-file-topbar .status[b-dbn15t32de] {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Override .file-type-banner inside topbar */
.jrt-file-topbar .file-type-banner[b-dbn15t32de] {
    margin: 0;
    padding: 3px 10px;
    font-size: 0.75rem;
    border-radius: 99px;
    background: color-mix(in srgb, var(--jrt-cyan) 12%, var(--jrt-white) 88%);
    border: 1px solid color-mix(in srgb, var(--jrt-cyan) 30%, var(--jrt-border) 70%);
}

.jrt-file-topbar .file-type-banner.visible[b-dbn15t32de] {
    display: inline-block;
}

/* ── Section navigation – horizontal top bar ─────────────────────── */
.jrt-section-nav[b-dbn15t32de] {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--jrt-navy);
    border-radius: 0;
    margin-top: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-radius: 10px 10px 0 0;
}

.jrt-section-nav[b-dbn15t32de]::-webkit-scrollbar {
    display: none;
}

[data-color-mode="dark"] .jrt-section-nav[b-dbn15t32de] {
    background: var(--bs-secondary-bg);
    border-bottom: 2px solid var(--bs-border-color);
    border-radius: 10px 10px 0 0;
}

.jrt-nav-tab[b-dbn15t32de] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 18px;
    font-size: 0.78125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s, border-color .12s;
    user-select: none;
}

.jrt-nav-tab .bi[b-dbn15t32de] {
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.jrt-nav-tab:hover[b-dbn15t32de] {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.jrt-nav-tab--active[b-dbn15t32de] {
    color: var(--jrt-cyan) !important;
    border-bottom-color: var(--jrt-cyan) !important;
    background: rgba(0, 196, 204, .1) !important;
}

[data-color-mode="dark"] .jrt-nav-tab[b-dbn15t32de] {
    color: var(--bs-secondary-color);
}

[data-color-mode="dark"] .jrt-nav-tab:hover[b-dbn15t32de] {
    color: var(--bs-emphasis-color);
    background: var(--bs-tertiary-bg);
}

[data-color-mode="dark"] .jrt-nav-tab--active[b-dbn15t32de] {
    color: var(--bs-primary) !important;
    border-bottom-color: var(--bs-primary) !important;
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent 90%) !important;
}

/* ── Sections (hidden/shown by tab nav) ──────────────────────────── */
.jrt-section[b-dbn15t32de] {
    display: none;
}

.jrt-section--active[b-dbn15t32de] {
    display: block;
}

/* Übersicht wraps directly with padding */
.jrt-section[data-section="ubersicht"][b-dbn15t32de] {
    background: var(--jrt-bg);
    border: 1px solid var(--jrt-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

[data-color-mode="dark"] .jrt-section[data-section="ubersicht"][b-dbn15t32de] {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
}

/* All other sections */
.jrt-section[data-section="applikationen"][b-dbn15t32de],
.jrt-section[data-section="plugins"][b-dbn15t32de],
.jrt-section[data-section="voraussetzungen"][b-dbn15t32de],
.jrt-section[data-section="netzwerk"][b-dbn15t32de],
.jrt-section[data-section="dateisystem"][b-dbn15t32de],
.jrt-section[data-section="anwendungsfehler"][b-dbn15t32de],
.jrt-section[data-section="sonstiges"][b-dbn15t32de],
.jrt-section[data-section="dymo-fehler"][b-dbn15t32de],
.jrt-section[data-section="dymo-quelle"][b-dbn15t32de],
.jrt-section[data-section="text-fehler"][b-dbn15t32de] {
    margin-top: 0;
}

/* Section inner containers */
.ubersicht-inner[b-dbn15t32de] {
    padding: 1rem;
}

.applikationen-inner[b-dbn15t32de],
.plugins-inner[b-dbn15t32de],
.voraussetzungen-inner[b-dbn15t32de],
.netzwerk-inner[b-dbn15t32de],
.dateisystem-inner[b-dbn15t32de],
.anwendungsfehler-inner[b-dbn15t32de],
.sonstiges-inner[b-dbn15t32de],
.dymo-fehler-inner[b-dbn15t32de],
.dymo-quelle-inner[b-dbn15t32de],
.text-fehler-inner[b-dbn15t32de] {
    padding: 0;
}

/* ── Tab badge (plugin count) ────────────────────────────────────── */
.jrt-tab-badge[b-dbn15t32de] {
    background: var(--jrt-cyan);
    color: var(--jrt-navy);
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
    min-width: 18px;
    text-align: center;
    line-height: 16px;
    display: inline-block;
}

[data-color-mode="dark"] .jrt-tab-badge[b-dbn15t32de] {
    background: var(--bs-primary);
    color: var(--bs-body-bg);
}

/* ── Metric cards grid (Übersicht top row) ───────────────────────── */
.jrt-metrics-grid[b-dbn15t32de] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .jrt-metrics-grid[b-dbn15t32de] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .jrt-metrics-grid[b-dbn15t32de] {
        grid-template-columns: 1fr;
    }
}

/* ── Section subheader ───────────────────────────────────────────── */
.jrt-section-subheader[b-dbn15t32de] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--jrt-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem;
}

/* ── Alert list ──────────────────────────────────────────────────── */
.jrt-alert-section[b-dbn15t32de] {
    margin-bottom: 1rem;
}

/* ── Cards grid for Übersicht bottom row ─────────────────────────── */
.jrt-cards-row[b-dbn15t32de] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 0;
}

/* ── jrt-ch / jrt-cb – card header / body (HTML design pattern) ── */
.jrt-ch[b-dbn15t32de] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--jrt-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--jrt-white);
    border-radius: 10px 10px 0 0;
}

[data-color-mode="dark"] .jrt-ch[b-dbn15t32de] {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.jrt-ct[b-dbn15t32de] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--jrt-navy);
    display: flex;
    align-items: center;
    gap: 7px;
}

.jrt-ct .bi[b-dbn15t32de] {
    color: var(--jrt-cyan);
    font-size: 0.9375rem;
}

[data-color-mode="dark"] .jrt-ct[b-dbn15t32de] {
    color: var(--bs-emphasis-color);
}

[data-color-mode="dark"] .jrt-ct .bi[b-dbn15t32de] {
    color: var(--bs-primary);
}

.jrt-ch-actions[b-dbn15t32de] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.jrt-ch-actions .json-search-input[b-dbn15t32de] {
    max-width: 180px;
    border-radius: 999px;
    background: var(--jrt-bg);
    font-size: 0.75rem;
}

[data-color-mode="dark"] .jrt-ch-actions .json-search-input[b-dbn15t32de] {
    background: var(--bs-body-bg);
}

.jrt-cb[b-dbn15t32de] {
    padding: 14px 16px;
    background: var(--jrt-white);
    border-radius: 0 0 10px 10px;
}

[data-color-mode="dark"] .jrt-cb[b-dbn15t32de] {
    background: var(--bs-secondary-bg);
}

/* ── Panel overrides – match card header/body design ─────────────── */
.panel[b-dbn15t32de] {
    border: 1px solid var(--jrt-border);
    border-radius: 10px;
    background: var(--jrt-white);
    padding: 0;
    box-shadow: var(--jrt-shadow-sm);
    overflow: hidden;
    margin-top: 0;
}

[data-color-mode="dark"] .panel[b-dbn15t32de] {
    border-color: var(--bs-border-color);
    background: var(--bs-secondary-bg);
}

/* Section panels connect flush to the nav bar */
.jrt-section[data-section="applikationen"] .panel[b-dbn15t32de],
.jrt-section[data-section="plugins"] .panel[b-dbn15t32de],
.jrt-section[data-section="voraussetzungen"] .panel[b-dbn15t32de],
.jrt-section[data-section="netzwerk"] .panel[b-dbn15t32de],
.jrt-section[data-section="dateisystem"] .panel[b-dbn15t32de],
.jrt-section[data-section="anwendungsfehler"] .panel[b-dbn15t32de],
.jrt-section[data-section="sonstiges"] .panel[b-dbn15t32de],
.jrt-section[data-section="dymo-fehler"] .jrt-card[b-dbn15t32de],
.jrt-section[data-section="dymo-quelle"] .jrt-card[b-dbn15t32de],
.jrt-section[data-section="text-fehler"] .jrt-card[b-dbn15t32de],
.jrt-section[data-section="dymo-fehler"] .panel[b-dbn15t32de],
.jrt-section[data-section="dymo-quelle"] .panel[b-dbn15t32de],
.jrt-section[data-section="text-fehler"] .panel[b-dbn15t32de] {
    border-radius: 0 0 10px 10px;
    border-top: none;
    box-shadow: none;
}

/* Status output */
.status[b-dbn15t32de] {
    margin-top: 0;
    min-height: 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.status.error[b-dbn15t32de] { color: var(--jrt-err); }
.status.ok[b-dbn15t32de]    { color: var(--jrt-ok); }

[data-color-mode="dark"] .status.error[b-dbn15t32de] { color: var(--bs-danger); }
[data-color-mode="dark"] .status.ok[b-dbn15t32de]    { color: var(--bs-success); }

/* ── Summary grid ────────────────────────────────────────────────── */
.summary-grid[b-dbn15t32de] {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0;
}

/* ── Keyframe for card entrance ──────────────────────────────────── */
@keyframes riseIn-b-dbn15t32de {
    to { transform: translateY(0); opacity: 1; }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .jrt-hero-inner[b-dbn15t32de] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .jrt-section-nav[b-dbn15t32de] {
        overflow-x: auto;
    }

    .jrt-nav-tab span[b-dbn15t32de] {
        display: none;
    }

    .jrt-nav-tab[b-dbn15t32de] {
        padding: 10px 14px;
    }

    .jrt-ch[b-dbn15t32de] {
        flex-direction: column;
        align-items: flex-start;
    }

    .jrt-ch-actions[b-dbn15t32de] {
        width: 100%;
    }

    .jrt-ch-actions .json-search-input[b-dbn15t32de] {
        max-width: 100%;
        width: 100%;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login page — no app-shell, no MainLayout. The wrapper covers the
   viewport, so its background controls what users see during the
   pre-auth flash. Tokens follow [data-bs-theme] so dark-mode users
   see a dark page instead of a hardcoded light flash. */

.login-wrapper[b-wz2mzdn6h9] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-secondary-bg, #f8f9fa);
}

.login-card[b-wz2mzdn6h9] {
    background: var(--bs-card-bg, #ffffff);
    color: var(--bs-body-color);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 380px;
}

.login-logo[b-wz2mzdn6h9] {
    margin-bottom: 1.25rem;
}

.login-logo img[b-wz2mzdn6h9] {
    height: 52px;
    width: auto;
}

.login-title[b-wz2mzdn6h9] {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
/* /Components/Pages/Modules.razor.rz.scp.css */
.plugin-picker-scrollbox[b-avtdd6kpno] {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}

.modules-table .module-row > td[b-avtdd6kpno] {
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.modules-table .module-row.module-row-open > td[b-avtdd6kpno] {
    background-color: var(--bs-secondary-bg);
}

.modules-table .inline-editor-row > td[b-avtdd6kpno] {
    background-color: var(--bs-body-bg);
}
/* /Components/Pages/PermissionsUnavailable.razor.rz.scp.css */
.unavailable-wrapper[b-txk73x25qu] {
    min-height: 60vh;
}

.unavailable-message[b-txk73x25qu] {
    max-width: 480px;
}
/* /Components/Pages/Pharmacies.razor.rz.scp.css */
/* Toolbar */
.pharmacies-toolbar[b-q4dm9vdd6x] {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.pharmacies-search-input[b-q4dm9vdd6x] {
    max-width: 17.5rem; /* was 280px — rem so it grows with the text scale */
}

/* ── Status filter: same colours as the badges it filters ──────────────────
   Measured 2026-08-06: the row badge "Aktiv" is lime rgb(147,236,41) with dark
   ink, while Bootstrap's .btn-success is rgb(25,135,84) with white — two
   different greens for one meaning, because .btn-success hard-codes
   --bs-btn-bg: #198754 and never passes through the brand bridge that
   .bg-success (rgba(var(--bs-success-rgb))) uses.

   Fixed by overriding Bootstrap 5.3's --bs-btn-* variables instead of the
   painted properties: hover / active / focus stay coherent, no !important, and
   a future per-user "emphasis" preference can still take it back. The values
   come from the SAME variables the badge overrides in app.css use, so a rebrand
   moves badge and filter together instead of drifting apart again. */
.status-filter-btn.is-active-aktiv[b-q4dm9vdd6x] {
    --bs-btn-bg: rgb(var(--bs-success-rgb));
    --bs-btn-border-color: rgb(var(--bs-success-rgb));
    --bs-btn-color: var(--ds-color-on-brand);
    --bs-btn-hover-bg: var(--ds-color-brand-primary-hover);
    --bs-btn-hover-border-color: var(--ds-color-brand-primary-hover);
    --bs-btn-hover-color: var(--ds-color-on-brand);
    --bs-btn-active-bg: var(--ds-color-brand-primary-hover);
    --bs-btn-active-border-color: var(--ds-color-brand-primary-hover);
    --bs-btn-active-color: var(--ds-color-on-brand);
}

/* Light: the badge is rgba(var(--bs-secondary-rgb)) with white ink. */
.status-filter-btn.is-active-inaktiv[b-q4dm9vdd6x] {
    --bs-btn-bg: rgb(var(--bs-secondary-rgb));
    --bs-btn-border-color: rgb(var(--bs-secondary-rgb));
    --bs-btn-color: var(--ds-color-text-inverse);
    --bs-btn-hover-bg: var(--ds-color-text-secondary);
    --bs-btn-hover-border-color: var(--ds-color-text-secondary);
    --bs-btn-hover-color: var(--ds-color-text-inverse);
    --bs-btn-active-bg: var(--ds-color-text-secondary);
    --bs-btn-active-border-color: var(--ds-color-text-secondary);
    --bs-btn-active-color: var(--ds-color-text-inverse);
}

/* Dark: the badge switches to --ds-color-border-strong with primary ink
   (app.css → [data-color-mode="dark"] .badge.bg-secondary), so this follows it
   rather than staying on the light grey. */
[data-color-mode="dark"] .status-filter-btn.is-active-inaktiv[b-q4dm9vdd6x] {
    --bs-btn-bg: var(--ds-color-border-strong);
    --bs-btn-border-color: var(--ds-color-border-strong);
    --bs-btn-color: var(--ds-color-text-primary);
    --bs-btn-hover-bg: var(--ds-color-surface-subtle);
    --bs-btn-hover-border-color: var(--ds-color-surface-subtle);
    --bs-btn-hover-color: var(--ds-color-text-primary);
    --bs-btn-active-bg: var(--ds-color-surface-subtle);
    --bs-btn-active-border-color: var(--ds-color-surface-subtle);
    --bs-btn-active-color: var(--ds-color-text-primary);
}

/* Table viewport & layout */
.pharmacies-table-viewport[b-q4dm9vdd6x] {
    max-height: calc(100vh - 15.625rem);
    overflow-y: auto;
}

.pharmacies-table[b-q4dm9vdd6x] {
    table-layout: fixed;
    min-width: 43.75rem;
}

/* Breathing room around the leading Name + IDF block (the two were swapped so
   Name leads). ::deep reaches the row cells, which live in the PharmacyRow
   child component and so sit outside this file's scope. The grouped header row
   (colspan, .pharmacy-group-row) keeps its own padding. */
.pharmacies-table[b-q4dm9vdd6x]  tr > th:first-child,
.pharmacies-table[b-q4dm9vdd6x]  tr:not(.pharmacy-group-row) > td:first-child {
    padding-left: 1rem;
}

.pharmacies-table[b-q4dm9vdd6x]  tr > th:nth-child(2),
.pharmacies-table[b-q4dm9vdd6x]  tr:not(.pharmacy-group-row) > td:nth-child(2) {
    padding-right: 1rem;
    white-space: nowrap; /* IDF must stay on one line — never wrap a 10-digit IDF */
}

/* Fixed column widths */
.col-idf[b-q4dm9vdd6x] {
    /* Wide enough for a 10-digit IDF plus the trailing gap, so it never wraps. */
    width: 7.5rem;
}

.col-anschrift[b-q4dm9vdd6x] {
    width: 25%;
}

.col-lizenz[b-q4dm9vdd6x] {
    width: 7.5rem;
}

.col-server[b-q4dm9vdd6x] {
    width: 6.875rem;
}

.col-status[b-q4dm9vdd6x] {
    width: 4.6875rem;
}

.col-tickets[b-q4dm9vdd6x] {
    width: 5rem;
}

.col-actions[b-q4dm9vdd6x] {
    width: 8.75rem;
}

/* Server jump label — fixed width prevents the button group from shifting
   as the "1 / 5" counter changes. */
.server-jump-label[b-q4dm9vdd6x] {
    min-width: 3rem;
    text-align: center;
}

/* Sticky table head & sortable headers */
.pharmacies-thead-sticky[b-q4dm9vdd6x] {
    top: 0;
    z-index: 10;
}

.pharmacies-th-sortable[b-q4dm9vdd6x] {
    cursor: pointer;
}

/* Right-click context menu */
.pharmacy-context-menu-backdrop[b-q4dm9vdd6x] {
    z-index: 1999;
}

.pharmacy-context-menu-positioned[b-q4dm9vdd6x] {
    /* `position: fixed` is already provided by Bootstrap's `.position-fixed`
       on this element. Coordinates come from MouseEvent.ClientX/Y (viewport-relative). */
    left: var(--menu-x);
    top: var(--menu-y);
    z-index: 2000;
    min-width: 13.75rem;
}

/* ── Narrow card view ──────────────────────────────────────────────────
   When the table area is too narrow to lay the 7 columns out cleanly, each
   pharmacy row collapses into a labelled card. Threshold 900px: below it the
   auto-width Name column would otherwise be crushed by the fixed columns +
   25% address column.

   The switch is driven by the `.pharmacies-cards` class, toggled from JS by
   a ResizeObserver on the card (attachPharmaciesResponsive in
   pharmacies-scroll.js). We deliberately do NOT use a CSS container query
   here: `container-type` applies layout containment to the card, which wraps
   the <Virtualize> scroll viewport and breaks Virtualize's row loading (rows
   vanish on scroll). Measuring the card's own width (not the window's) still
   accounts for the sidebar, matching the container-query behaviour without
   the containment. The sub-pages (plugins/files/devices) have no Virtualize,
   so they keep the plain container-query utility in app.css.

   Pure-CSS transform over the existing virtualized <tr>s — no second render
   path, so the row components keep working unchanged. The developer-theme
   JSON view (.pharmacies-json-view) is a separate container and unaffected;
   the table it hides here is already display:none in that theme. */
/* Drop the fixed min-width so the viewport stops scrolling sideways. */
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x] {
    min-width: 0;
    table-layout: auto;
}

/* Column headers make no sense once each cell stacks onto its own line. */
.pharmacies-cards .pharmacies-table thead.pharmacies-thead-sticky[b-q4dm9vdd6x] {
    display: none;
}

/* Collapse the table grid into block flow so rows become stacked cards. */
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x],
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  tbody,
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  tr,
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  td {
    display: block;
    width: auto;
}

/* Each data row → a bordered card sitting on the page background (so it
   never looks like a stray grey table row). Explicit bg + transparent
   cells also neutralise Bootstrap's table-hover / stripe cell colours. */
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  tr.pharmacy-row {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, 0.375rem);
    margin: 0.5rem 0.75rem;
    padding: 0.4rem 0.75rem;
    background-color: var(--bs-body-bg);
}

/* Cells stack; kill the table borders, cell backgrounds, fixed widths
   and truncation. */
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  tr.pharmacy-row > td {
    border: 0;
    padding: 0.15rem 0 !important;
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    background-color: transparent;
    box-shadow: none;
}

/* Labelled cells render as "Label ........ value" on one line. */
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  tr.pharmacy-row > td[data-label]:not([data-label=""]) {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    text-align: right;
}

.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  tr.pharmacy-row > td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--bs-secondary-color);
}

/* Group / server header bands keep their full-width single-cell look. */
.pharmacies-cards .pharmacies-table[b-q4dm9vdd6x]  tr.pharmacy-group-row > td {
    display: block;
}

/* Row / header styles live with their components:
     Components/Shared/PharmacyRow.razor.css
     Components/Shared/PharmacyGroupHeaderRow.razor.css
   (Slice A extracted the row, Slice B replaced the per-tbody group
   with a virtualized flat-items model and split the group header into
   its own row component.) Blazor CSS isolation is per-component, so
   styles follow the markup. */
/* /Components/Pages/PharmacyDetail.razor.rz.scp.css */
.pharmacy-group-member-idf-badge[b-a7g99qxx71] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

/* Right-rail group / pharmacy switcher — sticky so it stays while a long tab body scrolls.
   Only on lg+, where it is the right column. On small screens it sits ABOVE the tabs (Bootstrap
   order-*), where sticky would pin it over the scrolling tab content — so keep it static there.
   rem offset (not px) so it tracks the per-user text scale. */
@media (min-width: 992px) {
    .pharmacy-group-rail[b-a7g99qxx71] {
        position: sticky;
        top: 1rem;
    }
}
/* /Components/Pages/PrinterProfiles.razor.rz.scp.css */
/* The create/edit modal (and its pharmacy-search dropdown styles) now live in the
   shared PrinterProfileFormModal component and its scoped CSS. */
.printer-profiles-fax-user-row > td[b-augyvc9myd] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-top-color: var(--bs-border-color);
}

.table-hover > tbody > tr.printer-profiles-fax-user-row:hover > *[b-augyvc9myd] {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-card[b-twta8ggmwl] {
    max-width: 480px;
}
/* /Components/Pages/ToolDetail.razor.rz.scp.css */
.tool-versions-table[b-747x7to5q1] {
    min-width: 800px;
}

.tool-versions-actions-col[b-747x7to5q1] {
    width: 120px;
}

.tool-versions-filename-cell[b-747x7to5q1] {
    max-width: 200px;
}

.tool-versions-sha-code[b-747x7to5q1] {
    cursor: pointer;
}

.tool-detail-modal-backdrop[b-747x7to5q1] {
    background-color: rgba(0, 0, 0, 0.5);
}

.readme-content[b-747x7to5q1] {
    line-height: 1.7;
}

/* MarkupString-rendered children need ::deep to bypass Blazor's scoped-attribute selectors. */
.readme-content[b-747x7to5q1]  h1,
.readme-content[b-747x7to5q1]  h2,
.readme-content[b-747x7to5q1]  h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.readme-content[b-747x7to5q1]  h1:first-child,
.readme-content[b-747x7to5q1]  h2:first-child {
    margin-top: 0;
}

.readme-content[b-747x7to5q1]  pre {
    background: var(--bs-tertiary-bg);
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
}

.readme-content[b-747x7to5q1]  code {
    font-size: 0.875em;
}

.readme-content[b-747x7to5q1]  table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.readme-content[b-747x7to5q1]  table th,
.readme-content[b-747x7to5q1]  table td {
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.readme-content[b-747x7to5q1]  img {
    max-width: 100%;
    height: auto;
}

.tool-detail-custom-icon[b-747x7to5q1] {
    width: 56px;
    height: 56px;
    object-fit: contain;
}
/* /Components/Pages/Tools.razor.rz.scp.css */
.tools-search-wrapper[b-ntz4ba9343] {
    max-width: 300px;
    flex: 1;
}

.tools-search-icon[b-ntz4ba9343] {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary);
}

.tools-category-select[b-ntz4ba9343] {
    min-width: 160px;
}

.tools-modal-backdrop[b-ntz4ba9343] {
    background-color: rgba(0, 0, 0, 0.5);
}

.tool-card[b-ntz4ba9343] {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
}

.tool-card:hover[b-ntz4ba9343] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tool-description[b-ntz4ba9343] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-custom-icon[b-ntz4ba9343] {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

/* Flex child in the version-info row: min-width:0 lets text-truncate clip the (often very long)
   external URL instead of stretching the row and pushing the usage counter out of the card. */
.tools-external-url[b-ntz4ba9343] {
    min-width: 0;
}

.tool-usage-counter[b-ntz4ba9343] {
    white-space: nowrap;
    font-weight: 600;
}

.tool-usage-counter .bi[b-ntz4ba9343] {
    vertical-align: middle;
}
/* /Components/Pages/Users.razor.rz.scp.css */
.users-search-header[b-cy53l3h7x7] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.users-search-input[b-cy53l3h7x7] {
    max-width: 320px;
}
/* /Components/Shared/ApoLauncherHint.razor.rz.scp.css */
/* Top-centred, anchored to the viewport.

   The app shell is height:100dvh with overflow:hidden and only .main-content scrolls,
   so a fixed element stays put no matter how far down the pharmacy list the user is —
   which is the point: the start button that produces this hint sits in a table row,
   not at the top of the page. A banner placed in normal document flow would scroll
   away from the very user it exists for.

   3.75rem clears .app-header, measured at 48.67px with .main-content starting exactly
   below it. The mobile rule in responsive.css only trims the header's vertical padding
   by 0.5rem, so the same offset holds there with a slightly larger gap — not worth a
   second breakpoint.

   z-index sits above Bootstrap's sticky (1020) and fixed (1030) tiers but below modal
   (1055), so an open dialog still wins. */
.apolauncher-hint-host[b-rmtyog6orn] {
    position: fixed;
    top: 3.75rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    width: max-content;
    max-width: calc(100vw - 2rem);
}
/* /Components/Shared/Charts/BarChart.razor.rz.scp.css */
/* Hover/focus tooltip overlay for BarChart. The zones sit on top of the SVG, positioned in % so they
   track the bars as the chart scales; the tooltip shows instantly (unlike the old native <title>) and
   is themed through Bootstrap CSS variables. Font sizes stay in rem so they follow the per-user text
   scale; the small internal paddings/offsets stay in px (see .claude/rules/css-rem-scaling.md). */

.apo-barchart[b-vvnjd1jcf0] {
    position: relative;
}

.apo-barchart-zone[b-vvnjd1jcf0] {
    position: absolute;
    top: 0;
    bottom: 0;
    outline: none;
    cursor: default;
}

.apo-barchart-tip[b-vvnjd1jcf0] {
    position: absolute;
    left: 50%;
    transform: translate(-50%, calc(-100% - 6px));
    display: none;
    z-index: 5;
    white-space: nowrap;
    pointer-events: none;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.apo-barchart-zone:hover .apo-barchart-tip[b-vvnjd1jcf0],
.apo-barchart-zone:focus .apo-barchart-tip[b-vvnjd1jcf0],
.apo-barchart-zone:focus-visible .apo-barchart-tip[b-vvnjd1jcf0] {
    display: block;
}

.apo-barchart-tip-value[b-vvnjd1jcf0] {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    color: var(--bs-body-color);
}

.apo-barchart-tip-label[b-vvnjd1jcf0] {
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
}
/* /Components/Shared/EnvironmentBadge.razor.rz.scp.css */
/* Environment badge pill. Colours come from inline custom properties (set from
   EnvironmentBadgeOptions); geometry is here so it scales with the per-user text size.
   Sizes in rem (scale with text), hairlines/radius in px (see .claude/rules/css-rem-scaling.md). */
.env-badge[b-7cn4ji9777] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    background: var(--env-badge-bg, #FFC400);
    color: var(--env-badge-fg, #1A1A1A);
    font-size: 0.6875rem; /* ~11px at the 16px base */
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    /* Outline + soft shadow keep the pill legible on any theme's header background. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.22);
}
/* /Components/Shared/FavoritesManager.razor.rz.scp.css */
.favorites-modal-backdrop[b-rjq7z7pkwo] {
    background: rgba(0, 0, 0, .5);
}

/* Pharmacy rows nested under the folder entry — subtle indent + accent. */
.favorites-child[b-rjq7z7pkwo] {
    padding-left: 2.25rem;
    border-left: 3px solid var(--bs-border-color);
}
/* /Components/Shared/JsonViewerModal.razor.rz.scp.css */
/* ── Modal chrome ─────────────────────────────────────────────────── */

.json-viewer-modal-content[b-6s5lmqir6l] {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--ds-color-border-strong);
}

[data-color-mode="dark"] .json-viewer-modal-content[b-6s5lmqir6l] {
    border-color: var(--bs-border-color);
}

.json-viewer-modal-header[b-6s5lmqir6l] {
    background: var(--ds-color-text-primary);
    border-bottom: none;
    padding: 12px 16px !important;
}

[data-color-mode="dark"] .json-viewer-modal-header[b-6s5lmqir6l] {
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.json-viewer-header-title[b-6s5lmqir6l] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    min-width: 0;
    flex: 1;
}

[data-color-mode="dark"] .json-viewer-header-title[b-6s5lmqir6l] {
    color: var(--bs-emphasis-color);
}

.json-viewer-header-icon[b-6s5lmqir6l] {
    color: var(--ds-color-action-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

[data-color-mode="dark"] .json-viewer-header-icon[b-6s5lmqir6l] {
    color: var(--bs-primary);
}

.json-viewer-modal-header .btn-outline-secondary[b-6s5lmqir6l] {
    color: rgba(255, 255, 255, .75);
    border-color: rgba(255, 255, 255, .25);
    font-size: 0.6875rem;
}

.json-viewer-modal-header .btn-outline-secondary:hover[b-6s5lmqir6l] {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

[data-color-mode="dark"] .json-viewer-modal-header .btn-outline-secondary[b-6s5lmqir6l] {
    color: var(--bs-secondary-color);
    border-color: var(--bs-border-color);
}

.json-viewer-modal-header .btn-close[b-6s5lmqir6l] {
    filter: invert(1) grayscale(1);
    opacity: .6;
}

.json-viewer-modal-header .btn-close:hover[b-6s5lmqir6l] {
    opacity: 1;
}

[data-color-mode="dark"] .json-viewer-modal-header .btn-close[b-6s5lmqir6l] {
    filter: none;
}

/* ── Section nav in modal context ────────────────────────────────── */
.json-viewer-modal-nav[b-6s5lmqir6l] {
    border-radius: 0 !important;
    margin-top: 0 !important;
    /* Prevent Bootstrap's modal-dialog-scrollable flex layout from compressing the nav */
    flex-shrink: 0;
    /* Bootstrap .modal-body has position:relative — give nav higher stacking order */
    position: relative;
    z-index: 2;
}

/* ── Modal body ──────────────────────────────────────────────────── */
.json-viewer-modal-body[b-6s5lmqir6l] {
    background: var(--ds-color-surface-canvas);
}

[data-color-mode="dark"] .json-viewer-modal-body[b-6s5lmqir6l] {
    background: var(--bs-body-bg);
}

/* ── json-reader-tool inside modal ──────────────────────────────── */
.json-reader-modal-inner[b-6s5lmqir6l] {
    padding: 0 0 1rem;
}

/* The file info topbar inside modal – no border-top (modal content provides it) */
.json-reader-modal-inner .jrt-file-topbar[b-6s5lmqir6l] {
    border-top: none;
}

/* Summary section inside modal gets no rounded bottom corners on small screens */
.json-reader-modal-inner .jrt-section[data-section="summary"][b-6s5lmqir6l] {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.json-reader-modal-inner .jrt-section[data-section="insights"] .panel[b-6s5lmqir6l],
.json-reader-modal-inner .jrt-section[data-section="structured"] .panel[b-6s5lmqir6l] {
    border-left: none;
    border-right: none;
    border-radius: 0;
}

/* Size constraint for dialog */
.json-viewer-modal-dialog[b-6s5lmqir6l] {
    max-height: 90vh;
}
/* /Components/Shared/NavMenu.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────────
   Sidebar — token-driven, collapsible.
   All colours come from --sidebar-* tokens in app.css.

   ⚠️ **Type and geometry here are both in rem, and they have to stay that way
   together.** The sidebar rides the per-user text scale (html[data-text-scale]
   in app.css sets one root font-size), so everything that boxes text in — the
   rail width, the collapsed width, the icon box, paddings, gaps, the label's
   max-width — must scale with it.

   Converting only the type is the trap: a 13px label growing to 16.25px at the
   "Sehr groß" step inside a rail still 240px wide wraps, and a 17px glyph
   growing to 21.25px inside a 22px box clips. That is why --sidebar-width and
   --sb-collapsed (app.css) are rem too. All values were converted 1:1 against
   the 16px base, so at the "Normal" step the sidebar is pixel-identical to
   before the scale existed.

   What stays in **px on purpose**: hairline borders (1px, the 3px active
   marker), the 3px scrollbar and the border-radii. A hairline is a hairline at
   every text size, and scaling it only makes it blurry.
   ──────────────────────────────────────────────────────────────────────── */

.sidebar[b-6nf7at2oju] {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    border-right: 1px solid var(--sidebar-border-strong, transparent);
    overflow: hidden;
    transition: width .22s cubic-bezier(.4, 0, .2, 1);
}

.sidebar.collapsed[b-6nf7at2oju] {
    width: var(--sb-collapsed);
}

/* ── Brand row — just the logo, centered ────────────────────────────────── */
.sidebar-brand[b-6nf7at2oju] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem;
    border-bottom: 1px solid var(--sidebar-border);
    background: var(--sidebar-brand-bg);
    flex-shrink: 0;
}

.sb-logo-icon[b-6nf7at2oju] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* No display:block — app.css owns all logo visibility via data-color-mode.
   Adding display:block here raises specificity via the scoped attribute
   and overrides the display:none rules in app.css. */
.brand-logo[b-6nf7at2oju] {
    height: 1.875rem;
    width: auto;
}

.brand-logo-collapsed[b-6nf7at2oju] {
    height: 1.875rem;
    width: auto;
    max-width: 2.125rem;
    object-fit: contain;
}

/* ── Scrollable nav area ────────────────────────────────────────────────── */
.nav-scroll[b-6nf7at2oju] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.375rem 0 0.625rem;
}

.nav-scroll[b-6nf7at2oju]::-webkit-scrollbar { width: 3px; }
.nav-scroll[b-6nf7at2oju]::-webkit-scrollbar-thumb {
    background: var(--sidebar-border);
    border-radius: 2px;
}

/* ── Section headers ────────────────────────────────────────────────────── */
.nav-group[b-6nf7at2oju] {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sidebar-link-fg);
    opacity: 0.4;
    padding: 0.875rem 0.875rem 0.1875rem;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    transition: opacity .18s;
}

.sidebar.collapsed .nav-group[b-6nf7at2oju] {
    opacity: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Nav items ──────────────────────────────────────────────────────────────
   ::deep pierces the NavLink component boundary so the <a> it renders
   gets display:flex and inherits colour/decoration from the sidebar tokens
   rather than from Bootstrap's global <a> rules. Without ::deep, the scoped
   attribute might not land on NavLink's rendered element in all Blazor builds.
   ─────────────────────────────────────────────────────────────────────────── */
[b-6nf7at2oju] .nav-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.6875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--sidebar-link-fg);
    text-decoration: none;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: background .12s, color .12s, border-left-color .12s;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.4;
}

[b-6nf7at2oju] .nav-item:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-link-fg-hover);
    text-decoration: none;
}

[b-6nf7at2oju] .nav-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-link-fg-active);
    border-left-color: var(--sidebar-active-border);
    font-weight: 600;
}

/* ── Icon and label inside each nav item ───────────────────────────────── */
[b-6nf7at2oju] .nav-icon {
    font-size: 1.0625rem;
    flex-shrink: 0;
    width: 1.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* max-width collapses the label to zero so it takes NO layout space —
   opacity:0 alone keeps the element in flow and shifts the icon off-centre. */
[b-6nf7at2oju] .nav-lbl {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 12.5rem;
    transition: opacity .18s, max-width .22s cubic-bezier(.4, 0, .2, 1);
}

.sidebar.collapsed[b-6nf7at2oju]  .nav-lbl {
    opacity: 0;
    max-width: 0;
}

/* ── Edit-navigation affordance ─────────────────────────────────────────────
   The "Anpassen" pencil lives in the bottom control row (see .sb-bottom-row).
   When active, each nav entry shows an eye button to hide/show that page.
   The eyes are meaningless in the collapsed rail (labels gone) so they hide.
   Base + hover styling comes from .sb-ctl; only the active highlight differs. */
.nav-edit-btn.active[b-6nf7at2oju] {
    opacity: 1;
    background: var(--sidebar-active-bg);
    color: var(--sidebar-link-fg-active);
    border-color: var(--sidebar-active-border);
}

/* Each nav entry wraps a NavLink plus (in edit mode) an eye toggle. */
.nav-entry[b-6nf7at2oju] {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* The NavLink must fill the row so the eye button sits flush at the right. */
.nav-entry[b-6nf7at2oju]  .nav-item {
    flex: 1;
    min-width: 0;
}

/* Hidden-but-shown-while-editing pages read as dimmed; the eye stays crisp. */
.nav-entry-hidden[b-6nf7at2oju]  .nav-item {
    opacity: 0.4;
}

.nav-eye[b-6nf7at2oju] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--sidebar-link-fg);
    opacity: 0.55;
    cursor: pointer;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    line-height: 1;
    transition: opacity .12s, color .12s;
}

.nav-eye:hover[b-6nf7at2oju] {
    opacity: 1;
    color: var(--sidebar-link-fg-hover);
}

.sidebar.collapsed .nav-eye[b-6nf7at2oju] {
    display: none;
}

/* ── Bottom control row: theme cycle · edit navigation · collapse ────────────
   One row holding all three sidebar controls. Expanded: theme toggle on the
   left, edit + collapse pushed to the right by the spacer. Collapsed rail:
   stacked vertically and centered, spacer + edit pencil hidden. */
.sb-bottom-row[b-6nf7at2oju] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sb-ctl-spacer[b-6nf7at2oju] {
    flex: 1;
}

/* Shared look for every control button in the bottom row. */
.sb-ctl[b-6nf7at2oju] {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--sidebar-link-fg);
    opacity: 0.55;
    cursor: pointer;
    padding: 0.1875rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity .15s, background .15s, color .15s, border-color .15s;
}

.sb-ctl:hover[b-6nf7at2oju] {
    opacity: 1;
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-link-fg-hover);
}

.sidebar.collapsed .sb-bottom-row[b-6nf7at2oju] {
    flex-direction: column;
    gap: 0.1875rem;
    padding: 0.375rem 0;
}

.sidebar.collapsed .sb-ctl-spacer[b-6nf7at2oju] {
    display: none;
}

/* Editing is meaningless without labels, so drop the pencil in the rail. */
.sidebar.collapsed .nav-edit-btn[b-6nf7at2oju] {
    display: none;
}

/* ── Favoriten group header (collapsible, clickable) ─────────────────────────
   Overrides the base .nav-group (which is pointer-events:none) so the header
   toggles the list. Same single-class specificity as .nav-group but declared
   later, so these win when the sidebar is expanded; the higher-specificity
   `.sidebar.collapsed .nav-group` rule still hides it when collapsed (the
   favourite icons below stay visible). */
.nav-group-fav[b-6nf7at2oju] {
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    opacity: 0.55;
    margin-top: 0.375rem;
    border-top: 1px solid var(--sidebar-border);
    padding-top: 0.75rem;
}

.nav-group-fav:hover[b-6nf7at2oju] {
    opacity: 0.9;
}

.nav-fav-caret[b-6nf7at2oju] {
    font-size: 0.625rem;
    flex-shrink: 0;
    pointer-events: none;
}

/* Header actions (edit + caret), right-aligned. */
.nav-fav-actions[b-6nf7at2oju] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.nav-fav-edit[b-6nf7at2oju] {
    pointer-events: auto;
    cursor: pointer;
    font-size: 0.6875rem;
    line-height: 1;
    opacity: 0.8;
    transition: opacity .12s, transform .12s;
}

.nav-fav-edit:hover[b-6nf7at2oju] {
    opacity: 1;
    transform: scale(1.15);
}

.sidebar.collapsed .nav-fav-actions[b-6nf7at2oju] {
    display: none;
}

/* Pharmacy sub-folder header inside Favoriten. */
[b-6nf7at2oju] .nav-fav-folder {
    font-weight: 600;
}

/* Pharmacy links nested under the folder — subtle indent. */
[b-6nf7at2oju] .nav-fav-child {
    padding-left: 1.375rem;
}

.sidebar.collapsed[b-6nf7at2oju]  .nav-fav-child {
    padding-left: 0.6875rem;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.sidebar-footer[b-6nf7at2oju] {
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    padding: 0.25rem 0;
}
/* /Components/Shared/PermissionPicker.razor.rz.scp.css */
.permission-picker[b-4xeuiik27s] {
    /* leave layout to the host */
}

.permission-picker-filter[b-4xeuiik27s] {
    max-width: 320px;
    flex-grow: 1;
}

.permission-picker-group[b-4xeuiik27s] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-body-bg);
}

.permission-picker-group > summary[b-4xeuiik27s] {
    cursor: pointer;
    list-style: none;
    margin: 0;
}

.permission-picker-group > summary[b-4xeuiik27s]::-webkit-details-marker {
    display: none;
}

.permission-picker-group > summary[b-4xeuiik27s]::before {
    content: "▸";
    display: inline-block;
    width: 1rem;
    color: var(--bs-secondary-color);
    transition: transform 0.15s ease;
}

.permission-picker-group[open] > summary[b-4xeuiik27s]::before {
    content: "▾";
}
/* /Components/Shared/PharmacyDevicesView.razor.rz.scp.css */
/* Device table */
.device-table[b-bro2kmgl1r] {
    table-layout: fixed;
    min-width: 860px;
}

/* Fixed-size columns: badge and actions button stay at pixel widths.
   Name (2), ApoTune Version (3), Hardware-ID (4), Geräteschlüssel (5)
   share the remaining space so they stretch with the window. */
.device-table th:nth-child(1)[b-bro2kmgl1r] { width: 130px; }   /* Type badge */
.device-table th:nth-child(3)[b-bro2kmgl1r] { width: 145px; }   /* ApoTune Version */
.device-table th:nth-child(6)[b-bro2kmgl1r] { width: 75px;  }   /* Actions */

/* Device filter bar */
.device-filter-name[b-bro2kmgl1r] { max-width: 200px; }
.device-filter-type[b-bro2kmgl1r] { max-width: 175px; }

/* Masked DeviceKey cell — defaults to bullet-masked, toggled via eye icon.
   Stops fix-width dots from drifting vertically vs. the real key text by giving
   the wrapper a stable baseline and letting both states share the same line-height. */
.device-key-wrapper[b-bro2kmgl1r] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.device-key-value[b-bro2kmgl1r] {
    display: inline-block;
    /* Keep tracking consistent in masked state so a long key does not look like
       a short dotted line. The bullet glyph is wider than the average char, so
       we let it flow naturally without a min-width cap. */
    user-select: text;
}

.device-key-value.is-masked[b-bro2kmgl1r] {
    letter-spacing: 0.1em;
    color: var(--bs-secondary-color);
}

.device-key-toggle[b-bro2kmgl1r] {
    color: var(--bs-secondary-color);
    text-decoration: none;
    line-height: 1;
}

.device-key-toggle:hover[b-bro2kmgl1r],
.device-key-toggle:focus[b-bro2kmgl1r] {
    color: var(--bs-body-color);
}

/* Inline JSON viewer for device config files */
.device-json-block[b-bro2kmgl1r] {
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
    padding: 0.75rem 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 20rem;
    overflow-y: auto;
}
/* /Components/Shared/PharmacyExportDialog.razor.rz.scp.css */
/* Pharmacy Excel export dialog — theme-aware via Bootstrap CSS variables.
   Geometry that bounds text is in rem so it scales with the per-user text size; only hairlines
   and radii stay in px (see .claude/rules/css-rem-scaling.md). */

.export-section[b-o0czo7n82e] {
    margin-bottom: 1.25rem;
}

.export-section:last-of-type[b-o0czo7n82e] {
    margin-bottom: 0;
}

.export-section__head[b-o0czo7n82e] {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: .5rem;
    font-weight: 600;
}

.export-section__head > i[b-o0czo7n82e] {
    color: var(--bs-secondary-color);
}

/* Selectable option cards (layout radios + SmartCourier toggle). */
.export-tile[b-o0czo7n82e] {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    height: 100%;
    margin: 0;
    padding: .625rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.export-tile:hover[b-o0czo7n82e] {
    border-color: var(--bs-success);
}

.export-tile--active[b-o0czo7n82e] {
    border-color: var(--bs-success);
    background-color: var(--bs-success-bg-subtle);
}

.export-tile--wide[b-o0czo7n82e] {
    width: 100%;
}

.export-tile .form-check-input[b-o0czo7n82e] {
    margin-top: .15rem;
    flex-shrink: 0;
}

.export-tile__text[b-o0czo7n82e] {
    min-width: 0;
}

/* Server list — bounded so a fleet of many databases scrolls instead of pushing the dialog long. */
.export-scroll[b-o0czo7n82e] {
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.export-scroll .list-group-item[b-o0czo7n82e] {
    border-left: 0;
    border-right: 0;
}

.export-scroll .list-group-item:first-child[b-o0czo7n82e] {
    border-top: 0;
}

.export-scroll .list-group-item:last-child[b-o0czo7n82e] {
    border-bottom: 0;
}

.export-row--active[b-o0czo7n82e] {
    background-color: var(--bs-success-bg-subtle);
}

/* Column picker groups. */
.export-colgroup[b-o0czo7n82e] {
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
}

.export-colgroup__head[b-o0czo7n82e] {
    margin-bottom: .375rem;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--bs-secondary-color);
}
/* /Components/Shared/PharmacyGroupHeaderRow.razor.rz.scp.css */
/* Scoped styles for PharmacyGroupHeaderRow.razor.
   Previously lived in PharmacyGroupBody.razor.css (Slice A). With the
   Virtualize-driven flat-items refactor (Slice B) the header row is its
   own component, so its styles follow it for Blazor CSS isolation. */

/* Group header — legacy-id badge in Grouped view */
.pharmacy-group-id-badge[b-ujxi9af7i1] {
    min-width: 60px;
    text-align: center;
}
/* /Components/Shared/PharmacyModuleActivationView.razor.rz.scp.css */
/* Modules are the primary entity. The layout reads like a Python for-loop: the module name
   is the statement line and the plugin list is its indented body. */
.module-block[b-v8ac8elbcm] {
    padding-bottom: 0.5rem;
}

.module-body[b-v8ac8elbcm] {
    margin-left: 2.5rem;
    padding-bottom: 0.25rem;
}

/* Lightweight plugin rows (no table chrome) so plugins read as the module's sub-items.
   Fixed-width trailing columns keep the ID and the present mark aligned across all rows. */
.plugin-row + .plugin-row[b-v8ac8elbcm] {
    border-top: 1px solid var(--bs-border-color-translucent);
}

.plugin-id[b-v8ac8elbcm] {
    width: 6rem;
    text-align: right;
}

.plugin-present[b-v8ac8elbcm] {
    width: 3rem;
}

/* A composite (parent) module renders its members nested in its body, each an indented sub-block
   with its own toggle + plugin list. A left accent ties the members visually to the parent group. */
.composite-member[b-v8ac8elbcm] {
    border-left: 3px solid var(--bs-primary-border-subtle);
    margin-left: 0.75rem;
}

.composite-member .module-body[b-v8ac8elbcm] {
    margin-left: 1.5rem;
}
/* /Components/Shared/PharmacyPluginsView.razor.rz.scp.css */
/* Plugin tables (flat view + grouped view share the same column layout). */
.plugin-table[b-7hzengbqte] {
    table-layout: fixed;
    min-width: 700px;
}

.plugin-col-name[b-7hzengbqte] {
    width: 220px;
}

.plugin-col-id[b-7hzengbqte] {
    width: 90px;
}

.plugin-col-version[b-7hzengbqte] {
    width: 110px;
}

.plugin-col-flag[b-7hzengbqte] {
    width: 70px;
}

.plugin-col-limited[b-7hzengbqte] {
    width: 96px;
}
/* /Components/Shared/PharmacyRow.razor.rz.scp.css */
/* Scoped styles for PharmacyRow.razor.
   Moved from Pages/Pharmacies.razor.css when the row was extracted into
   its own component (Slice A perf refactor). Blazor CSS isolation is
   per-component, so styles applied to elements rendered by this
   component must live here, not in the parent's css file. */

.pharmacy-row[b-0jdddnk38s] {
    cursor: pointer;
}

/* Vertically center every cell. The row height is driven by its tallest cell
   (name + badges, the licence sub-line, the launch button), so single-line
   cells like IDF / Anschrift / Server would otherwise sit at the top of the
   row and look off-centre. */
.pharmacy-row > td[b-0jdddnk38s] {
    vertical-align: middle;
}

/* Required for `text-truncate` to take effect on a fixed-layout column */
.pharmacy-anschrift-cell[b-0jdddnk38s] {
    max-width: 0;
}

/* Inline badges and helper text */
.badge-xs[b-0jdddnk38s] {
    font-size: 0.65rem;
}

.text-xs[b-0jdddnk38s] {
    font-size: 0.75rem;
}

.text-2xs[b-0jdddnk38s] {
    font-size: 0.7rem;
}

/* Launch button in the row's action cell */
.pharmacy-launch-btn[b-0jdddnk38s] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
/* /Components/Shared/PharmacyTeamsView.razor.rz.scp.css */
/* Stronger, easier-to-notice divider between one team row and the next. Bootstrap's default table
   border is a 1px subtle hairline; a team is a taller row (a name tag + a wrap of member tags), so it
   needs a clearer separator than a hairline. A border stays in px on purpose (see css-rem-scaling.md:
   hairlines/borders are the documented px exception). */
.teams-table > tbody > tr > td[b-lzev1y018e] {
    border-bottom: 2px solid var(--bs-border-color);
}

/* Compact per-branch colour picker in the legend. A native colour input is chrome-heavy by default;
   trim it to a small square swatch. Sizes stay in px on purpose (a control chrome dimension, like a
   scrollbar — the css-rem-scaling.md exception). */
.branch-color-input[b-lzev1y018e] {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: none;
    cursor: pointer;
}

.branch-color-input[b-lzev1y018e]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.branch-color-input[b-lzev1y018e]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

/* The first body row already sits under the header; a top border there doubles the header rule, so
   only the between-rows dividers are strengthened above. Keep the last row's divider — it separates
   the table from the card footer. */
/* /Components/Shared/PharmacyUsersTeamsEditor.razor.rz.scp.css */
/* Team-colour palette swatches. Size/colour come from the inline SwatchStyle (per-swatch); this only
   centres the "selected" check and gives the button a pointer + a subtle hover lift. Borders/sizes stay
   in the inline style and in px on purpose (hairline/geometry exception, see css-rem-scaling.md). */
.color-swatch[b-doq2b1ae92] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.color-swatch:hover[b-doq2b1ae92] {
    filter: brightness(1.05);
}
/* /Components/Shared/PinButton.razor.rz.scp.css */
.pin-star[b-wbeqrkhg15] {
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1;
    text-decoration: none;
    opacity: 0.65;
    transition: color .12s ease, opacity .12s ease, transform .12s ease;
}

.pin-star:hover[b-wbeqrkhg15] {
    color: var(--bs-warning, #ffc107);
    opacity: 1;
    transform: scale(1.12);
}

.pin-star.pinned[b-wbeqrkhg15] {
    color: var(--bs-warning, #ffc107);
    opacity: 1;
}

.pin-star:disabled[b-wbeqrkhg15] {
    opacity: 0.4;
    pointer-events: none;
}
/* /Components/Shared/PrinterProfileFormModal.razor.rz.scp.css */
/* Let a tall create/edit modal scroll at the modal level so the whole form is
   reachable, while the modal-body itself keeps overflow visible so the pharmacy
   search dropdown can extend past the body edge instead of being clipped. */
.printer-profiles-form-modal[b-jqbp7a9rfe] {
    overflow-y: auto;
}

.printer-profiles-pharmacy-search-col[b-jqbp7a9rfe] {
    position: relative;
}

/* Rendered in-flow (not absolutely positioned) so it works reliably inside the modal
   without being clipped by the dialog. Scrolls when the result list is long. */
.printer-profiles-pharmacy-dropdown[b-jqbp7a9rfe] {
    max-height: 240px;
    overflow-y: auto;
}
/* /Components/Shared/RouteAnalysisBatchDetail.razor.rz.scp.css */
/* Legend swatches for the planned-vs-actual chart (the chart itself is now the reusable
   GroupedBarChart / inline SVG). Hairline radii stay in px; see .claude/rules/css-rem-scaling.md. */

.ra-swatch[b-9tkcquxuxu] {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.2rem;
}

.ra-swatch.ra-planned[b-9tkcquxuxu] {
    background-color: var(--bs-primary, #0d6efd);
}

.ra-swatch.ra-actual[b-9tkcquxuxu] {
    background-color: var(--bs-teal, #20c997);
}
/* /Components/Shared/ToolIconPicker.razor.rz.scp.css */
.tool-icon-picker .icon-grid[b-2p0vd06ctc] {
    max-height: 260px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
    background: var(--bs-body-bg);
}

.tool-icon-picker .icon-option[b-2p0vd06ctc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: transparent;
    min-height: 52px;
    padding: 0.35rem;
}

.tool-icon-picker .icon-option:hover[b-2p0vd06ctc] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.tool-icon-picker .icon-option.selected[b-2p0vd06ctc] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.tool-icon-picker .icon-option-name[b-2p0vd06ctc] {
    display: none;
}

.tool-icon-picker .icon-option-custom-image[b-2p0vd06ctc] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.tool-icon-picker .selected-custom-icon[b-2p0vd06ctc] {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.tool-icon-picker .icon-cell[b-2p0vd06ctc] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tool-icon-picker .icon-actions[b-2p0vd06ctc] {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
}

.tool-icon-picker .btn-xs[b-2p0vd06ctc] {
    --bs-btn-padding-y: 0.1rem;
    --bs-btn-padding-x: 0.3rem;
    --bs-btn-font-size: 0.65rem;
}
/* /Components/Shared/ToolStorageNode.razor.rz.scp.css */
.ts-row[b-u2iwria1az] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem .35rem;
    border-radius: .25rem;
    min-height: 1.9rem;
}

.ts-row:hover[b-u2iwria1az] {
    background: var(--bs-secondary-bg);
}

/* Left part: chevron + icon + name + badge. Takes the free space; the size/date/delete hug the right. */
.ts-label[b-u2iwria1az] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 auto;
    min-width: 0; /* allow the name to truncate instead of pushing the row wide */
}

.ts-expandable[b-u2iwria1az] {
    cursor: pointer;
    user-select: none;
}

.ts-toggle[b-u2iwria1az] {
    flex: 0 0 1rem;
    width: 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.ts-name[b-u2iwria1az] {
    font-family: var(--bs-font-monospace);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mapping badge lives in its own aligned column, separate from the name. */
.ts-tag[b-u2iwria1az] {
    flex: 0 0 auto;
    width: 9rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-size[b-u2iwria1az] {
    flex: 0 0 auto;
    min-width: 5.5rem;
    text-align: right;
}

.ts-date[b-u2iwria1az] {
    flex: 0 0 auto;
    min-width: 9rem;
    text-align: right;
}

.ts-delete[b-u2iwria1az] {
    flex: 0 0 auto;
}

.ts-delete-spacer[b-u2iwria1az] {
    flex: 0 0 auto;
    width: 1.9rem;
}

/* Nested children draw a regedit-style vertical guide line down the left. */
.ts-children[b-u2iwria1az] {
    margin-left: .95rem;
    padding-left: .6rem;
    border-left: 1px solid var(--bs-border-color);
}