@import "components/data-display.css";
/* ================================================================
   CONNECT / BUSINESS CENTRAL PRIMITIVES
   Globale, wiederverwendbare bc-* Komponenten fuer DigitalReceipt.
   Neue Patterns werden hier schrittweise ergaenzt, nicht pro Seite kopiert.
   ================================================================ */

/* Local result filters: Connect table-utility-bar.css, shared by data-driven lists. */
.bc-table-utility-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-1) var(--space-4);
}

.bc-table-utility-bar[hidden] {
    display: none;
}

.bc-table-utility-bar--stacked {
    align-items: stretch;
    flex-direction: column;
}

.bc-table-utility-bar__tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-block: var(--space-2);
}

/* Shared local result search, following Connect's BcResultSearch. */
.bc-result-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 280px;
    max-width: 100%;
}

.bc-result-search .bc-result-search__input { width: 100%; padding-inline: calc(var(--space-3) + var(--space-4)); }
.bc-result-search__icon {
    position: absolute;
    left: var(--space-2);
    width: 14px;
    height: 14px;
    color: var(--text-tertiary);
    pointer-events: none;
}
.bc-result-search__input::-webkit-search-cancel-button,
.bc-result-search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.bc-result-search__clear {
    position: absolute;
    right: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height-xs);
    height: var(--control-height-xs);
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.bc-result-search__clear svg { width: 14px; height: 14px; }
.bc-result-search__clear:hover { background: var(--bg-hover); }
.bc-result-search__clear:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.bc-result-search__clear[hidden], .bc-table-utility-bar__filters[hidden] { display: none; }

@media (max-width: 768px) {
    .bc-result-search { width: 100%; }
    .bc-result-search__clear { width: var(--control-height-touch); height: var(--control-height-touch); right: 0; }
    .bc-result-search .bc-result-search__input { padding-right: var(--control-height-touch); }
}

.bc-table-utility-bar__filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 100%;
    min-width: 0;
}

.bc-table-utility-bar__label {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.bc-table-utility-bar__options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}

.bc-table-utility-bar__option {
    display: inline-flex;
    align-items: center;
    position: relative;
    gap: var(--space-1-5);
    min-height: var(--control-height-xs);
    padding: var(--space-1) var(--space-2-5);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    cursor: pointer;
}

.bc-table-utility-bar__option:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--color-primary);
}

.bc-table-utility-bar__option + .bc-table-utility-bar__option::before {
    position: absolute;
    inset: var(--space-1-5) auto var(--space-1-5) 0;
    width: 1px;
    background: var(--border-primary);
    content: "";
}

.bc-table-utility-bar__option:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bc-table-utility-bar__option[aria-pressed="true"] {
    background: transparent;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset 0 -2px 0 var(--color-primary);
}

.bc-table-utility-bar__option:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.bc-table-utility-bar__count {
    min-width: 2ch;
    color: var(--text-tertiary);
    font-size: var(--type-badge);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bc-table-utility-bar__option[aria-pressed="true"] .bc-table-utility-bar__count {
    color: inherit;
}

@media (max-width: 768px) {
    .bc-table-utility-bar__option {
        min-height: var(--control-height-touch);
    }

    .bc-table-utility-bar__filters {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }
}

.bc-section-spacing {
    padding: var(--space-5) var(--space-4) var(--space-8);
}

.bc-content-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.bc-content-container--expanded {
    max-width: none;
    width: 100%;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.bc-section-spacing--expanded {
    padding-top: var(--space-3);
    padding-bottom: var(--space-4);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* DigitalReceipt wraps every page in a width-limited container-fluid.
   Connect pages do not have this additional boundary, so release it only
   while a workspace is explicitly maximized. */
.container-fluid.container-fluid--workspace-expanded {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 32px;
    margin-bottom: var(--space-2);
}

.top-actions__left,
.top-actions__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.top-actions__right {
    margin-left: auto;
}

.bc-card {
    overflow: hidden;
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

/* Edge-to-edge workspaces share their mobile treatment across domains. */
@media (max-width: 768px) {
    .bc-card--mobile-flat {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

.bc-page-header--bc {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.bc-page-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.bc-page-title {
    margin: 0;
    color: var(--text-primary, #1e293b);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.bc-page-subtitle {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary, #475569);
    font-size: var(--type-control);
    line-height: 1.4;
}

.bc-card__content {
    padding: var(--space-4);
}
.bc-card[role="button"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bc-card__content--compact {
    padding: var(--space-2) var(--space-3);
}

/* Canonical loading placeholder. Dimensions stay component-owned so a
   skeleton can mirror the content it replaces without layout shifts. */
.bc-skeleton {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary, #f1f5f9);
}

.bc-skeleton--shimmer {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary, #f1f5f9) 20%,
        color-mix(in srgb, var(--border-primary, #e2e8f0) 72%, var(--bg-primary, #fff)) 50%,
        var(--bg-tertiary, #f1f5f9) 80%
    );
    background-size: 220% 100%;
    animation: var(--skeleton-animation, skeleton-shimmer 1.8s ease-in-out infinite);
}

@media (prefers-reduced-motion: reduce) {
    .bc-skeleton--shimmer {
        animation: none;
    }
}

.bc-skeleton--icon { width: 36px; height: 36px; flex: 0 0 auto; }
.bc-skeleton--circle { border-radius: var(--radius-full); }
.bc-skeleton--pill { border-radius: var(--radius-full); }

/* Compact segmented control for 2–4 mutually exclusive choices. */
.bc-segment {
    display: inline-flex;
    align-items: stretch;
    gap: var(--space-0-5);
    padding: var(--space-0-5);
    height: var(--control-height-sm);
    box-sizing: border-box;
    color: var(--text-primary);
    border: 1px solid var(--border-primary, #e2e8f0);
    border-radius: var(--radius-md);
    background: var(--control-bg);
}

.bc-segment__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 0;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary, #475569);
    font: inherit;
    font-size: var(--type-control);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--bc-interaction-hover) ease,
                color var(--bc-interaction-hover) ease,
                box-shadow var(--bc-interaction-hover) ease;
}

.bc-segment__option:hover:not(:disabled) {
    background: var(--bg-hover, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

.bc-segment input:checked + .bc-segment__option,
.bc-segment__option.is-active,
.bc-segment__option[aria-selected="true"],
.bc-segment__option[aria-pressed="true"] {
    background: color-mix(in srgb, var(--color-primary, #29755b) 12%, var(--bg-primary, #fff));
    color: var(--color-primary, #29755b);
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #29755b) 18%, transparent);
}

.bc-segment input:focus-visible + .bc-segment__option,
.bc-segment__option:focus-visible {
    outline: 2px solid var(--color-primary, #29755b);
    outline-offset: 2px;
}

.bc-segment__option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bc-segment__option svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}
.bc-segment--wrap { height: auto; flex-wrap: wrap; max-width: 100%; }
/* Segment-Optionen als Links (Unterreiter): keine Unterstreichung, gleiche Optik wie Buttons. */
a.bc-segment__option { text-decoration: none; }
a.bc-segment__option:hover { text-decoration: none; }
/* Kennzahl-Kacheln als Schalter (Statuskarten der Wiedervorlagen). */
.bc-metric[role="button"] { cursor: pointer; }
.bc-metric[role="button"]:focus-visible { outline: 2px solid var(--color-primary, #29755b); outline-offset: 2px; }
.bc-metric[role="button"][aria-pressed="true"] { box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary, #29755b) 40%, transparent); }
ul.bc-segment { list-style: none; margin: 0; }
.bc-segment > li { display: contents; }
.bc-segment--wrap .bc-segment__option { min-height: calc(var(--control-height-sm) - 6px); }
/* Tabs use the full control surface as their pointer/keyboard target. */
.bc-segment--tabs { height: auto; padding: 0; border: 0; }
.bc-segment--tabs > .bc-segment__option { min-height: var(--control-height-sm); }
@media (max-width: 768px) {
    .bc-segment { height: var(--control-height-touch); }
    .bc-segment--wrap { height: auto; }
    .bc-segment--wrap .bc-segment__option { min-height: calc(var(--control-height-touch) - 6px); }
    .bc-segment--tabs > .bc-segment__option { min-height: var(--control-height-touch); }
}

@media (max-width: 768px) {
    .bc-section-spacing {
        padding: var(--space-3) 0 var(--space-6);
    }

    .bc-page-header--bc {
        padding: var(--space-4);
    }
}

.bc-kpi-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-height: 36px;
}

.bc-kpi-row__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 28px;
    padding: 0 var(--space-4);
    border-left: 1px solid var(--border-primary, #e2e8f0);
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
}

.bc-kpi-row__item:first-child {
    border-left: 0;
}

.bc-kpi-row__item[hidden] {
    display: none;
}

.bc-kpi-row__icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--text-tertiary, #94a3b8);
}

.bc-kpi-row__label {
    color: var(--text-secondary, #475569);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.bc-kpi-row__value {
    color: var(--text-primary, #1e293b);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.bc-kpi-row__item--warning {
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-warning) 9%, transparent);
}

.bc-kpi-row__item--warning .bc-kpi-row__icon,
.bc-kpi-row__item--warning .bc-kpi-row__value {
    color: var(--color-warning);
}

.bc-kpi-row__item--success .bc-kpi-row__icon,
.bc-kpi-row__item--success .bc-kpi-row__value {
    color: var(--color-primary, #29755b);
}

.bc-kpi-row__item--danger {
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-error) 7%, transparent);
}

.bc-kpi-row__item--danger .bc-kpi-row__icon,
.bc-kpi-row__item--danger .bc-kpi-row__value {
    color: var(--color-error);
}

@media (max-width: 768px) {
    .bc-kpi-row {
        width: 100%;
        justify-content: flex-start;
        row-gap: var(--space-2);
    }

    .bc-kpi-row__item {
        flex: 1 1 auto;
        padding: 0 var(--space-3);
    }

    .bc-kpi-row__item:first-child {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .bc-kpi-row {
        align-items: stretch;
        flex-direction: column;
    }

    .bc-kpi-row__item,
    .bc-kpi-row__item:first-child {
        width: 100%;
        padding: var(--space-1) var(--space-2);
        border-left: 0;
        border-top: 1px solid var(--border-tertiary, #f1f5f9);
    }

    .bc-kpi-row__item:first-child {
        border-top: 0;
    }
}

/* ================================================================
   CONNECT TOP NAVIGATION
   Einzeilige App-Navigation: Marke, globale Suche, Module und Benutzer.
   Die bestehenden navbar__*-Hooks bleiben waehrend der schrittweisen
   Migration fuer Navigation-JS und Mobile-Drawer stabil.
   ================================================================ */

/* Single owner for desktop and mobile navigation. Connect TopNavigation reference. */
.bc-top-nav {
    --nav-radius: 6px;
    --nav-active-bg: color-mix(in srgb, var(--color-primary) 8%, transparent);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky, 1000);
    width: 100%;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-primary);
}
.navbar__container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(240px, 340px) 32px auto;
    grid-template-areas: "brand nav search theme user";
    align-items: center;
    gap: var(--space-1);
    height: 52px;
    padding: 0 var(--space-4);
}
.navbar__brand { grid-area: brand; display: flex; align-items: center; }
.navbar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--nav-radius);
    text-decoration: none;
}
.navbar__logo:hover { background: var(--bg-hover); text-decoration: none; }
.navbar__logo-img { width: 24px; height: 24px; object-fit: contain; }
html:not([data-theme="dark"]) .navbar__logo-img--dark,
html[data-theme="dark"] .navbar__logo-img--light { display: none; }
.navbar__brand-divider { width: 1px; height: 18px; background: var(--border-primary); }
.navbar__brand-text { font-size: var(--type-control); font-weight: var(--font-weight-semibold); letter-spacing: 0.4px; color: var(--text-primary); white-space: nowrap; }
.navbar__title { font-size: var(--type-control); margin: 0; }
.navbar__menu--desktop { grid-area: nav; min-width: 0; margin-left: var(--space-5); }
.navbar__nav { display: flex; align-items: center; gap: var(--space-0-5); list-style: none; padding: 0; margin: 0; }
.navbar__item { position: relative; flex-shrink: 0; }
.navbar__item[hidden] { display: none; }
.navbar__link {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: var(--space-1-5);
    min-height: 32px;
    padding: var(--space-1-5) var(--space-2-5);
    border: 0;
    border-radius: var(--nav-radius, 6px);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--type-control);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar__link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.navbar__link--active,
.navbar__link--active:hover,
.navbar__item--dropdown.active > .navbar__link {
    background: var(--nav-active-bg, var(--bg-selected));
    color: var(--color-primary);
}
.navbar__menu--desktop .navbar__link--active::after {
    content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 2px; border-radius: 1px; background: currentColor;
}
.navbar__link:focus-visible,
.navbar__dropdown-link:focus-visible,
.navbar__toggler:focus-visible,
.bc-top-nav__action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.navbar__icon { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; }
.navbar__dropdown-icon { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; transition: transform 0.2s ease; }
.navbar__item--dropdown.active > .navbar__link > .navbar__dropdown-icon { transform: rotate(180deg); }
.navbar__dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1;
    min-width: 240px; max-width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 72px); overflow-y: auto;
    padding: var(--space-2); margin: 0; list-style: none;
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    background: var(--bg-card); box-shadow: var(--shadow-dropdown);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.navbar__dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.navbar__dropdown-item { margin: 0; }
.navbar__dropdown-link {
    display: flex; align-items: center; gap: var(--space-2-5); min-height: 38px;
    padding: 7px var(--space-2-5); border-radius: var(--nav-radius, 6px);
    color: var(--text-primary); font-size: var(--type-control); font-weight: var(--font-weight-medium);
    text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease;
}
.navbar__dropdown-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.navbar__dropdown-link--active { background: var(--nav-active-bg, var(--bg-selected)); color: var(--color-primary); }
.navbar__dropdown-header { padding: var(--space-2) var(--space-2-5) var(--space-1); margin: 0; color: var(--text-tertiary); font-size: var(--type-table-header); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; }
.navbar__dropdown--overflow { width: 320px; }
.navbar__container > .global-search { grid-area: search; min-width: 0; width: 100%; max-width: 340px; margin: 0; padding-right: var(--space-1-5); }
.bc-top-nav .global-search__launcher { height: 32px; min-height: 32px; gap: var(--space-2); padding: 0 var(--space-2) 0 var(--space-3); background: var(--bg-secondary); border-color: var(--border-primary); box-shadow: none; }
.bc-top-nav .global-search__launcher:hover { background: var(--bg-primary); border-color: var(--input-border); }
.bc-top-nav .global-search__launcher:focus-visible { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.bc-top-nav .global-search__launcher-label { font-size: var(--type-control); }
.bc-top-nav .global-search__launcher svg { width: 16px; height: 16px; }
.bc-top-nav .global-search__shortcut { padding: var(--space-0-5) 7px; background: var(--bg-hover); border-color: var(--border-primary); font-size: var(--type-table-header); line-height: 1.4; }
.bc-top-nav__action-btn { grid-area: theme; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: var(--nav-radius); background: transparent; color: var(--text-secondary); cursor: pointer; }
.bc-top-nav__action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.bc-top-nav__action-btn svg { width: 18px; height: 18px; }
.navbar__user--header { grid-area: user; padding-left: var(--space-2); }
.bc-top-nav .user-avatar__trigger { padding: 0; background: transparent; }
.bc-top-nav .user-avatar__image-wrapper { width: 30px; height: 30px; }
.bc-top-nav .user-avatar__trigger:hover .user-avatar__image-wrapper { transform: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.bc-top-nav .user-avatar__dropdown { top: calc(100% + 6px); width: 300px; padding: var(--space-2-5); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); background: var(--bg-elevated); box-shadow: var(--shadow-md); backdrop-filter: none; }
.navbar__toggler, .navbar__menu--mobile, .navbar__backdrop { display: none; }
@media (max-width: 1100px) and (min-width: 960px) {
    .navbar__container { grid-template-columns: auto minmax(0, 1fr) 40px 32px auto; }
    .bc-top-nav .global-search__launcher { width: 34px; padding: 0; justify-content: center; }
    .bc-top-nav .global-search__launcher-label, .bc-top-nav .global-search__shortcut { display: none; }
}
@media (max-width: 959px) {
    .navbar__container { display: flex; height: 56px; padding: 0 var(--space-3); gap: var(--space-1); }
    .navbar__menu--desktop, .navbar__brand-text, .navbar__brand-divider, .navbar__title { display: none; }
    .navbar__logo { min-width: 44px; min-height: 44px; justify-content: center; }
    .navbar__logo-img { width: 26px; height: 26px; }
    .navbar__toggler { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: var(--nav-radius, 6px); color: var(--text-secondary); background: transparent; cursor: pointer; }
    .navbar__toggler svg { width: 22px; height: 22px; }
    .navbar__toggler:hover { background: var(--bg-hover); }
    .navbar__toggler .navbar__close-icon { display: none; }
    .navbar__toggler.active .navbar__close-icon { display: block; }
    .navbar__toggler.active .navbar__menu-icon { display: none; }
    .navbar__container > .global-search { flex: 0 0 44px; width: 44px; min-width: 0; margin-left: auto; padding: 0; }
    .bc-top-nav .global-search__launcher { width: 44px; height: 44px; padding: 0; justify-content: center; border: 0; background: transparent; }
    .bc-top-nav .global-search__launcher-label, .bc-top-nav .global-search__shortcut { display: none; }
    .bc-top-nav__action-btn { width: 44px; height: 44px; flex: 0 0 44px; }
    .navbar__user--header { padding: 0; }
    .bc-top-nav .user-avatar__trigger { width: 44px; height: 44px; justify-content: center; }
    .navbar__menu--mobile { position: fixed; inset: 56px 0 0; z-index: 999; display: flex; flex-direction: column; background: var(--bg-primary); border-top: 1px solid var(--border-primary); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
    .navbar__menu--mobile.show { visibility: visible; opacity: 1; transition-delay: 0s; }
    .navbar__menu--mobile .navbar__nav { flex-direction: column; align-items: stretch; gap: var(--space-1); padding: var(--space-3); }
    .navbar__menu--mobile .navbar__link { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font-size: var(--type-dialog-title); }
    .navbar__menu--mobile .navbar__dropdown { display: none; position: static; min-width: 0; max-width: none; max-height: none; margin: var(--space-1) 0 var(--space-2) var(--space-5); padding: var(--space-1); border: 0; border-left: 1px solid var(--border-primary); border-radius: 0; background: var(--bg-secondary); box-shadow: none; }
    .navbar__menu--mobile .navbar__dropdown.show { display: block; }
    .navbar__menu--mobile .navbar__dropdown-link { min-height: 44px; }
    .navbar__menu--mobile .navbar__user { padding: var(--space-4); padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-primary); margin-top: auto; }
    .navbar__user-info { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .navbar__link--logout { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--text-secondary); }
    body.bc-mobile-nav-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
    .navbar__link, .navbar__dropdown, .navbar__dropdown-icon, .navbar__menu--mobile { transition: none; }
}

html[data-theme="dark"] .bc-toggle__slider::before { background: var(--text-primary); }

/* ================================================================
   CONNECT FILTER PANEL
   Kompakte Filter- und Anzeigeoptionen nach dem Connect-Pattern.
   ================================================================ */

.bc-filter-panel {
    margin: var(--space-4) calc(var(--space-4) * -1) var(--space-3);
    padding: var(--space-2-5) var(--space-3-5);
    background: var(--bc-bg-filter);
    border-top: 1px solid var(--border-primary, #e2e8f0);
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
}

.bc-filter-panel__search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 520px;
    margin-bottom: var(--space-3);
}

.bc-filter-panel__search-icon {
    position: absolute;
    left: 11px;
    z-index: 1;
    width: 15px;
    height: 15px;
    color: var(--text-tertiary, #94a3b8);
    pointer-events: none;
}

.bc-filter-panel__search-input {
    width: 100%;
    height: var(--control-height-sm);
    padding: 0 36px 0 34px;
    border: 1px solid var(--border-secondary, #cbd5e1);
    border-radius: var(--radius-sm);
    background: var(--bg-input, var(--bg-primary, #fff));
    color: var(--text-primary, #1e293b);
    font: inherit;
    font-size: var(--font-size-sm);
    transition: border-color var(--bc-interaction-hover) ease, box-shadow var(--bc-interaction-hover) ease;
}

.bc-filter-panel__search-input::placeholder {
    color: var(--text-tertiary, #94a3b8);
}

.bc-filter-panel__search-input:hover,
:is(.bc-select, .form-select):hover {
    border-color: var(--text-tertiary, #94a3b8);
}

.bc-filter-panel__search-input:focus,
:is(.bc-select, .form-select):focus {
    outline: none;
    border-color: var(--color-primary, #29755b);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary, #29755b) 16%, transparent);
}

.bc-filter-panel__search-input::-webkit-search-cancel-button {
    appearance: none;
}

.bc-filter-panel__search-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
}

.bc-filter-panel__search-clear:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #1e293b);
}

.bc-filter-panel__search-clear:focus-visible {
    outline: 2px solid var(--color-primary, #29755b);
    outline-offset: 1px;
}

.bc-filter-panel__search-clear svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    .bc-filter-panel__search-input { padding-right: calc(var(--control-height-touch) + var(--space-3)); }
    .bc-filter-panel__search-clear { width: var(--control-height-touch); height: var(--control-height-touch); }
}

.bc-filter-panel__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2-5) var(--space-3);
}

.bc-filter-panel__group {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
}

.bc-filter-panel__group--stacked {
    align-items: stretch;
    flex-direction: column;
    gap: 3px;
}

.bc-filter-panel__group--grow {
    flex: 1 1 200px;
    min-width: 200px;
}

.bc-filter-panel__group--w-xl {
    flex: 0 1 320px;
    min-width: 220px;
}

.bc-filter-panel__label {
    color: var(--text-secondary, #475569);
    font-size: var(--type-table-header);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
}

.bc-filter-panel__count {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.bc-filter-panel__options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 34px;
    gap: var(--space-2) var(--space-5);
}

:is(.bc-select, .form-select) {
    width: 100%;
    height: 34px;
    padding: 0 34px 0 var(--space-2-5);
    border: 1px solid var(--border-secondary, #cbd5e1);
    border-radius: var(--radius-sm);
    appearance: none;
    background-color: var(--bg-input, var(--bg-primary, #fff));
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3e%3cpath d='M7 8l3 3 3-3' stroke='%2364758b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
    color: var(--text-primary, #1e293b);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    cursor: pointer;
    transition: border-color var(--bc-interaction-hover) ease, box-shadow var(--bc-interaction-hover) ease;
}

:is(.bc-input, .form-input)[aria-invalid="true"], :is(.bc-select, .form-select)[aria-invalid="true"] {
    border-color: var(--color-error);
}

.bc-toggle-field {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary, #475569);
    font-size: var(--type-control);
    cursor: pointer;
    user-select: none;
}

.bc-toggle {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 22px;
    flex: 0 0 auto;
}

.bc-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bc-toggle__slider {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: var(--border-secondary, #cbd5e1);
    transition: background-color 0.15s ease;
}

.bc-toggle__slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--btn-primary-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.24);
    transition: transform 0.15s ease;
}

.bc-toggle__input:checked + .bc-toggle__slider {
    background: var(--color-primary, #29755b);
}

.bc-toggle__input:checked + .bc-toggle__slider::before {
    transform: translateX(18px);
}

.bc-toggle__input:focus-visible + .bc-toggle__slider {
    outline: 2px solid var(--color-primary, #29755b);
    outline-offset: 2px;
}

.bc-toggle__input:disabled + .bc-toggle__slider,
.bc-toggle-field:has(.bc-toggle__input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.bc-toggle-field__label {
    font-weight: var(--font-weight-medium);
}

@media (max-width: 600px) {
    .bc-filter-panel__search {
        max-width: none;
    }

    .bc-filter-panel__row {
        align-items: stretch;
    }

    .bc-filter-panel__group--grow,
    .bc-filter-panel__group--w-xl {
        width: 100%;
        min-width: 0;
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bc-filter-panel__search-input,
    :is(.bc-select, .form-select),
    .bc-toggle__slider,
    .bc-toggle__slider::before {
        transition: none;
    }
}

/* ================================================================
   CONNECT TABLES, STATUS AND EMPTY STATES
   Kompakte Datentabellen fuer scanbare operative Listen.
   ================================================================ */

.bc-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: var(--bg-card, var(--bg-primary, #fff));
    box-shadow: none;
}

.bc-table-wrapper--wide {
    min-width: 860px;
}

.bc-table-wrapper--scroll {
    max-height: 60vh;
    overflow-y: auto;
}

.bc-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card, var(--bg-primary, #fff));
    color: var(--text-primary, #1e293b);
}

.bc-table th,
.bc-table td {
    padding: var(--space-1-5) var(--space-2-5);
    text-align: left;
    vertical-align: middle;
}

.bc-table th {
    border-bottom: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-table-header, #f4f7fa);
    color: var(--text-secondary, #475569);
    font-size: var(--type-table-header);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.bc-table td {
    border-bottom: 1px solid var(--border-tertiary, #f1f5f9);
    color: var(--text-primary, #1e293b);
    font-size: var(--type-control);
}

.bc-table tbody tr {
    height: 32px;
    transition: background-color var(--bc-interaction-hover) ease;
}

.bc-table tbody tr:last-child td {
    border-bottom: 0;
}

.bc-table--dense th,
.bc-table--dense td,
.bc-table--compact th,
.bc-table--compact td,
.bc-table--bc th,
.bc-table--bc td {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--type-control);
}

.bc-table--bc th {
    border-bottom-color: var(--border-secondary, #cbd5e1);
    background: var(--bg-table-header, #f4f7fa);
    color: var(--bc-text-secondary, var(--text-secondary, #475569));
    font-size: var(--type-table-header);
    font-weight: var(--font-weight-semibold, 600);
    letter-spacing: normal;
    text-transform: none;
}

.bc-table--bc td {
    border-bottom-color: var(--bc-border-light, var(--border-tertiary, #f1f5f9));
}

.bc-table--striped tbody tr:nth-child(odd),
.bc-table--bc.bc-table--striped tbody tr:nth-child(odd) {
    background: var(--bg-table-odd, rgba(15, 23, 42, 0.012));
}

.bc-table--hover tbody tr:hover {
    background: var(--surface-hover, var(--bg-hover, rgba(0, 0, 0, 0.04)));
}

/* Shared feedback only for rows that actually open details. */
.bc-table--clickable tbody tr:not(:has(.bc-table-empty)) {
    cursor: pointer;
    transition: background-color var(--bc-interaction-hover) ease;
}
.bc-table--clickable tbody tr:not(:has(.bc-table-empty)):is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-primary));
}
.bc-table--clickable tbody tr:not(:has(.bc-table-empty)) > td:first-child {
    transition: box-shadow var(--bc-interaction-hover) ease;
}
.bc-table--clickable tbody tr:not(:has(.bc-table-empty)):is(:hover, :focus-visible) > td:first-child {
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.bc-table--clickable tbody tr:not(:has(.bc-table-empty)):active {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-primary));
    transition-duration: var(--bc-interaction-press);
}
.bc-table--clickable tbody tr:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}
.bc-table__open-icon {
    transition: transform var(--bc-interaction-direction) ease, color var(--bc-interaction-hover) ease;
}
.bc-table--clickable tr:is(:hover, :focus-visible) .bc-table__open-icon {
    transform: translateX(var(--bc-interaction-offset));
    color: var(--color-primary);
}

.bc-table__row--active td,
.bc-table--clickable tbody tr.bc-table__row--active:hover td {
    background: var(--surface-selected, var(--bg-selected, rgba(var(--blume-green-rgb), 0.1))) !important;
}

/* Veraenderbare Spaltenbreiten: Connect table.css (bc-table--resizable).
   Das colgroup ist die einzige Breitenquelle; die Logik liegt in
   static/js/resizableTableColumns.js. */
.bc-table--resizable {
    table-layout: fixed;
    width: max(100%, var(--bc-resizable-table-width, 100%));
}

.bc-table--resizable th,
.bc-table--resizable td {
    overflow: hidden;
    text-overflow: ellipsis;
}

.bc-table--resizable .bc-table-th--resizable {
    position: relative;
    overflow: visible;
}

.bc-table-resize-handle {
    position: absolute;
    z-index: 3;
    top: 0;
    /* Vollstaendig innerhalb des eigenen th halten. Eine ueberstehende
       Trefferflaeche wuerde vom nachfolgenden Tabellenkopf ueberlagert. */
    right: 0;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    background: transparent;
    transition: background-color var(--transition-fast, 0.1s ease);
}

.bc-table-resize-handle::before,
.bc-table-resize-handle::after {
    content: '';
    position: absolute;
    right: 0;
    transition: width var(--transition-fast, 0.1s ease),
                background-color var(--transition-fast, 0.1s ease),
                box-shadow var(--transition-fast, 0.1s ease);
}

.bc-table-resize-handle::before {
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--border-secondary, #c7d1dc);
}

.bc-table-resize-handle::after {
    top: calc(50% - 7px);
    width: 2px;
    height: 14px;
    background: color-mix(in srgb, var(--text-secondary, #475569) 72%, transparent);
}

.bc-table-resize-handle:hover::before,
.bc-table-resize-handle:focus-visible::before,
.bc-table-resize-handle:active::before {
    background: color-mix(in srgb, var(--color-primary) 45%, var(--border-secondary, #c7d1dc));
}

.bc-table-resize-handle:hover::after,
.bc-table-resize-handle:focus-visible::after,
.bc-table-resize-handle:active::after {
    width: 3px;
    background: var(--color-primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.bc-table-resize-handle:hover,
.bc-table-resize-handle:focus-visible,
.bc-table-resize-handle:active {
    background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.bc-table-resize-handle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

html.bc-is-column-resizing,
html.bc-is-column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Tabellenlokale Ansichtsaktion; nur bei angepassten Breiten sichtbar. */
.bc-table-reset-widths[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bc-table-resize-handle,
    .bc-table-resize-handle::before,
    .bc-table-resize-handle::after {
        transition: none;
    }
}

/* Sort buttons own the vertical cell padding, keeping the whole compact header clickable. */
.bc-table th:has(> .bc-table-sort) {
    padding-block: 0;
}
.bc-table-sort {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    min-height: 0;
    padding: var(--space-1-5) 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.bc-table th[aria-sort="ascending"] .bc-table-sort::after { content: '↑'; }
.bc-table th[aria-sort="descending"] .bc-table-sort::after { content: '↓'; }
.bc-table-sort:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.bc-table-th--sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast, 0.1s ease),
                color var(--transition-fast, 0.1s ease);
}

.bc-table-th--sortable:hover,
.bc-table-th--sortable:focus-visible {
    background: var(--surface-hover, var(--bg-hover, rgba(0, 0, 0, 0.04)));
    color: var(--color-primary, #29755b);
}

.bc-table-th--sortable.th--sorted,
.bc-table-th--sortable.bc-table-th--sorted,
.bc-table-th--sortable.bc-table-th--sorted-desc {
    background: var(--surface-selected, var(--bg-selected, rgba(var(--blume-green-rgb), 0.1)));
    color: var(--color-primary, #29755b);
}

.bc-table-th--sortable:focus-visible {
    outline: 2px solid var(--color-primary, #29755b);
    outline-offset: -2px;
}

.bc-table-th__content {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.bc-table-th--sortable .sort-icon,
.bc-table-th__sort-icon {
    display: inline-block;
    margin-left: 3px;
    opacity: 0.55;
    color: var(--text-tertiary, #94a3b8);
    font-size: var(--type-badge);
    transition: opacity var(--transition-fast, 0.1s ease),
                color var(--transition-fast, 0.1s ease);
}

.bc-table-th--sortable:hover .sort-icon,
.bc-table-th--sortable:focus-visible .sort-icon,
.bc-table-th--sortable.th--sorted .sort-icon,
.bc-table-th--sortable.bc-table-th--sorted .sort-icon,
.bc-table-th--sortable.bc-table-th--sorted-desc .sort-icon,
.bc-table-th--sortable:hover .bc-table-th__sort-icon,
.bc-table-th--sortable:focus-visible .bc-table-th__sort-icon,
.bc-table-th--sorted .bc-table-th__sort-icon,
.bc-table-th--sorted-desc .bc-table-th__sort-icon {
    opacity: 1;
}

.bc-table-th--sortable.th--sorted .sort-icon,
.bc-table-th--sortable.bc-table-th--sorted .sort-icon,
.bc-table-th--sortable.bc-table-th--sorted-desc .sort-icon,
.bc-table-th--sorted .bc-table-th__sort-icon,
.bc-table-th--sorted-desc .bc-table-th__sort-icon {
    color: var(--color-primary, #29755b);
}

.bc-table--clickable tbody tr:has(.bc-table-empty),
.bc-table--clickable tbody tr:has(.bc-table-empty):hover,
.bc-table--hover tbody tr:has(.bc-table-empty):hover {
    background: transparent;
    box-shadow: none;
    cursor: default;
}

.bc-table-cell--primary {
    color: var(--text-primary, #1e293b);
    font-weight: var(--font-weight-semibold);
}

.bc-table-secondary,
.bc-text-muted {
    color: var(--text-secondary, #475569);
}

.bc-table-subtext {
    display: flex;
    align-items: center;
    justify-content: inherit;
    gap: var(--space-1);
    margin-top: 1px;
    color: var(--text-tertiary, #94a3b8);
    font-size: var(--type-table-header);
    line-height: 1.3;
}

.bc-text-right {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.bc-table-cell--nowrap {
    white-space: nowrap;
}

.bc-table-td--chevron {
    width: 44px;
    color: var(--text-tertiary, #94a3b8);
    text-align: center;
}

.bc-table__row--child td {
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #475569);
}

.bc-table__row--child td:first-child {
    padding-left: var(--space-8);
}

.bc-inline-warning {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-warning);
    font-size: var(--type-table-header);
    font-weight: var(--font-weight-medium);
}

.bc-table-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 42px;
    padding: var(--space-1-5) var(--space-2-5);
    border-top: 1px solid var(--border-primary, #e2e8f0);
    background: var(--bg-secondary, #f8fafc);
}

.bc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px var(--space-2-5);
    border-radius: var(--radius-md);
    font-size: var(--type-table-header);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.bc-status-pill--released, .bc-status-pill--success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.bc-status-pill--draft {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #475569);
}

.bc-status-pill--urgent, .bc-status-pill--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.bc-status-pill--error {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.bc-status-pill--info { background: var(--color-info-bg); color: var(--color-info); }
.bc-status-pill > svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Connect BcListTable states. Source: Connect src/styles/business-central.css
   and theme-variables.css (bc-spacing-xl = space-5; bc-spacing-md = space-3). */
.bc-table-empty {
    padding: var(--space-5) var(--space-3) !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
}

.bc-table-empty:not(td),
.bc-table-empty__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

/* Compact state for short inline previews, using the same empty-state contract. */
.bc-table-empty.bc-table-empty--compact { padding: var(--space-2) var(--space-3) !important; }
.bc-table-empty--compact .bc-table-empty__content { flex-direction: row; gap: var(--space-2); }
.bc-table-empty--compact .bc-table-empty__icon { width: 20px; height: 20px; }
.bc-table-empty--wide { grid-column: 1 / -1; }
.bc-table-empty--fill { height: 100%; justify-content: center; }
.bc-table-empty[hidden] { display: none; }

.bc-table-empty__icon {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin: 0;
    opacity: 0.72;
    color: var(--text-tertiary);
}
.bc-table-empty__icon > svg { width: 100%; height: 100%; }
.bc-table-empty--success .bc-table-empty__icon { color: var(--color-primary); }
.bc-table-empty--error .bc-table-empty__icon,
.bc-table-empty--error .bc-table-empty__title { color: var(--color-error); }

.bc-table-empty__title {
    display: block;
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.bc-table-empty__hint {
    display: block;
    margin: 0;
    max-width: 360px;
    font-size: var(--type-control);
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: center;
}

.bc-table-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}
.bc-table-empty__actions[hidden] { display: none; }

/* Shared action owner: pages choose modifiers; colors and interaction stay here. */
.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--type-control);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition: background-color var(--bc-motion-button), border-color var(--bc-motion-button), color var(--bc-motion-button);
}
a.bc-btn:hover, a.bc-btn:visited, a.bc-btn:focus { text-decoration: none; }
.bc-btn[hidden] { display: none; }
.bc-btn__icon { width: 14px; height: 14px; flex: 0 0 auto; color: inherit; }
.bc-btn--bc {
    /* Match the host application's 32px inputs in compact action rows. */
    min-height: var(--control-height-sm);
    padding: 0 var(--space-2-5);
    font-size: var(--font-size-xs);
}
.bc-btn--small { min-height: var(--control-height-xs); padding: 0 var(--space-2); font-size: var(--font-size-xs); }
.bc-btn--large { min-height: var(--control-height); padding: 0 var(--space-4); font-size: var(--font-size-sm); }
.bc-btn--block { width: 100%; }
.bc-btn.bc-btn--sign-in {
    min-height: var(--control-height-touch);
    padding: 0.8125rem var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-semibold);
    line-height: normal;
    white-space: normal;
    text-align: center;
    gap: var(--space-3);
    transition: background-color 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.bc-btn--sign-in .bc-btn__icon { width: 18px; height: 18px; }
.bc-btn--sign-in:hover { box-shadow: 0 4px 14px rgba(var(--blume-green-rgb), 0.15); }
.bc-btn.bc-btn--sign-in:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--auth-surface), 0 0 0 4px var(--btn-primary-bg);
}
.bc-btn.bc-btn--sign-in:active { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .bc-btn.bc-btn--sign-in { transition: none; }
}
.bc-btn--primary {
    border-color: var(--btn-primary-bg);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}
.bc-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--btn-primary-hover-bg);
    background: var(--btn-primary-hover-bg);
    color: var(--btn-primary-text);
}
.bc-btn--destructive {
    border-color: var(--btn-danger-bg);
    background: var(--btn-danger-bg);
    color: var(--text-on-accent);
}
.bc-btn--destructive:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--btn-danger-hover-bg);
    background: var(--btn-danger-hover-bg);
    color: var(--text-on-accent);
}
.bc-btn--success {
    border-color: var(--btn-success-bg);
    background: var(--btn-success-bg);
    color: var(--text-on-accent);
}
.bc-btn--success:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--btn-success-hover-bg);
    background: var(--btn-success-hover-bg);
    color: var(--text-on-accent);
}
.bc-btn--secondary { border-color: var(--control-border); background: var(--control-bg); color: var(--text-primary); }
.bc-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--color-primary); background: var(--bg-hover); color: var(--color-primary); }
.bc-btn--destructive-outline { border-color: var(--color-error-border); color: var(--color-error); background: transparent; }
.bc-btn--destructive-outline:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--color-error); color: var(--color-error); background: var(--color-error-bg); }
.bc-btn--text { border-color: transparent; background: transparent; color: var(--color-primary); box-shadow: none; }
.bc-btn--text:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-primary-subtle); color: var(--color-primary); }
.bc-btn--ghost { border-color: transparent; background: transparent; color: var(--text-secondary); box-shadow: none; }
.bc-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--bg-hover); color: var(--text-primary); }
.bc-btn--destructive-text { border-color: transparent; background: transparent; color: var(--color-error); box-shadow: none; }
.bc-btn--destructive-text:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-error-bg); color: var(--color-error); }
.bc-btn--on-image { background: var(--control-bg); border-color: var(--control-border); box-shadow: var(--shadow-sm); }
.bc-btn--icon, .bc-btn--icon-only { width: var(--control-height-sm); min-width: var(--control-height-sm); padding: 0; }
.bc-btn--small.bc-btn--icon, .bc-btn--small.bc-btn--icon-only { width: var(--control-height-xs); min-width: var(--control-height-xs); padding: 0; }
.bc-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bc-btn:disabled, .bc-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.bc-btn-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); grid-column: 1 / -1; }
.bc-btn-group--end { justify-content: flex-end; }
.bc-btn-group--center { justify-content: center; }
.bc-btn-group--stack { flex-direction: column; align-items: stretch; }
.bc-spin { animation: bc-spin 1s linear infinite; }
@keyframes bc-spin { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
    .modal-content--mobile-fullscreen > .modal-footer > .bc-btn {
        font-size: var(--font-size-sm);
    }
    .bc-btn, :is(.bc-input, .form-input), :is(.bc-select, .form-select), .bc-toggle-field {
        min-height: var(--control-height-touch);
        min-width: var(--control-height-touch);
    }
    :is(.bc-input, .form-input), :is(.bc-select, .form-select), .bc-filter-panel__search-input {
        /* Avoid iOS focus zoom and keep every page bundle consistent. */
        font-size: var(--font-size-base) !important;
        min-height: var(--control-height-touch);
    }
    .bc-btn.bc-btn--icon, .bc-btn.bc-btn--icon-only {
        width: var(--control-height-touch);
        min-width: var(--control-height-touch);
    }
}
@media (max-width: 640px) {
    .bc-btn-group { width: 100%; }
    .bc-btn-group > .bc-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .bc-spin { animation: none; } }

.bc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--type-table-header);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}
.bc-badge--sm { padding: var(--space-0-5) var(--space-1-5); font-size: var(--type-badge); }
.bc-badge--on-image {
    background: var(--control-bg);
    color: var(--text-primary);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    box-shadow: var(--shadow-sm);
}
.bc-badge__icon { width: 12px; height: 12px; flex: 0 0 auto; }
.bc-badge--success { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.bc-badge--error { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error-border); }
.bc-badge--warning { color: var(--color-warning); background: var(--color-warning-bg); border-color: var(--color-warning-border); }
.bc-badge--info { color: var(--color-info); background: var(--color-info-bg); border-color: var(--color-info-border); }

@media (prefers-reduced-motion: reduce) {
    .bc-table tbody tr,
    .bc-btn {
        transition: none;
    }
}

/* ================================================================
   CONNECT SLIDE PANEL
   Kanonischer rechter Detail- und Bearbeitungsbereich.
   ================================================================ */

.bc-slide-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity var(--bc-motion-panel), visibility var(--bc-motion-panel);
}

.bc-slide-panel-overlay[hidden] {
    display: none;
}

.bc-slide-panel-overlay--active {
    visibility: visible;
    opacity: 1;
}

.bc-slide-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    width: 90%;
    max-width: 1000px;
    flex-direction: column;
    transform: translateX(100%);
    background: var(--bg-primary, #fff);
    box-shadow: var(--shadow-panel);
    transition: transform var(--bc-motion-panel);
    will-change: transform;
}

.bc-slide-panel--active {
    transform: translateX(0);
}

.bc-slide-panel--size-sm { max-width: 480px; }
.bc-slide-panel--size-md { max-width: 720px; }
.bc-slide-panel--size-lg { max-width: 1000px; }

.bc-slide-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border-secondary, #cbd5e1);
    background: linear-gradient(135deg, var(--bg-primary, #fff), var(--bg-secondary, #f8fafc));
}

.bc-slide-panel__title-group {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--space-3);
}

.bc-slide-panel__icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-primary, #29755b) 10%, transparent);
    color: var(--color-primary, #29755b);
}

.bc-slide-panel__icon svg {
    width: 18px;
    height: 18px;
}

.bc-slide-panel__title {
    margin: 0;
    color: var(--text-primary, #1e293b);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.bc-slide-panel__close {
    transition: background-color var(--bc-interaction-hover) ease, color var(--bc-interaction-hover) ease;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary, #475569);
    cursor: pointer;
}

.bc-slide-panel__close:hover {
    background: var(--bg-hover, rgba(15, 23, 42, 0.04));
    color: var(--text-primary, #1e293b);
}

.bc-slide-panel__close:focus-visible {
    outline: 2px solid var(--color-primary, #29755b);
    outline-offset: 2px;
}

.bc-slide-panel__close svg {
    width: 20px;
    height: 20px;
}

.bc-slide-panel__content {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

.bc-slide-panel__content--padded {
    padding: var(--space-6);
}

body.bc-dialog-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .bc-slide-panel {
        width: 100%;
        max-width: 100%;
    }

    .bc-slide-panel__header,
    .bc-slide-panel__content--padded {
        padding: var(--space-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bc-slide-panel,
    .bc-slide-panel *,
    .bc-slide-panel-overlay {
        /* Override the legacy global 0.01ms rule: inherited visibility must
           settle immediately before a reduced-motion panel receives focus. */
        transition: none !important;
    }
}

/* Compact Connect form primitives, shared by incremental page migrations. */
.bc-form-section { min-width: 0; }
.bc-form-section__title {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-block: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
}
.bc-form-section__content { padding: var(--space-3) var(--space-4); }
.nf-form-group { min-width: 0; }
:is(.nf-form-label, .form-label) {
    display: block;
    margin-bottom: var(--space-1, 4px);
    color: var(--text-secondary, #475569);
    font-size: var(--type-label, 12px);
    font-weight: var(--font-weight-medium, 500);
}
.nf-required { color: var(--color-error, #dc2626); }
:is(.nf-form-hint, .form-hint, .form-label__hint) {
    margin: var(--space-2, 8px) 0 0;
    color: var(--text-secondary, #475569);
    font-size: var(--font-size-xs, 12px);
    line-height: 1.5;
}
.nf-form-hint--icon {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
}
.nf-form-hint--icon > :is(svg, i[data-lucide]) {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin-top: var(--space-0-5);
}
.bc-slide-panel__footer {
    color: var(--text-primary);
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}
@media (max-width: 768px) {
    .bc-slide-panel__footer { padding: var(--space-3) var(--space-4); }
}

:is(.bc-input, .form-input) {
    transition: border-color var(--bc-interaction-hover) ease, box-shadow var(--bc-interaction-hover) ease, background-color var(--bc-interaction-hover) ease;
    box-sizing: border-box;
    width: 100%;
    height: var(--control-height-sm);
    padding: 0 var(--space-2, 8px);
    border: 1px solid var(--control-border, #d2d0ce);
    border-radius: var(--radius-sm, 4px);
    background: var(--control-bg, #fff);
    color: var(--control-text, #1e293b);
    font: inherit;
    font-size: var(--type-control, 13px);
}
:is(.bc-input, .form-input):focus {
    border-color: var(--color-primary, #29755b);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #29755b) 16%, transparent);
    outline: 2px solid transparent;
    outline-offset: 2px;
}
:is(.bc-input, .form-input)[readonly] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    :is(.bc-input, .form-input) { height: var(--control-height-touch); }
}

/* Connect process/error status, with a full semantic border and tint. */
.bc-process-status { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); color: var(--text-primary); text-align: left; }
.bc-process-status__icon { width: 22px; height: 22px; flex: 0 0 auto; margin-top: var(--space-0-5); color: var(--color-primary); }
.bc-process-status__body { min-width: 0; display: grid; gap: var(--space-2); }
.bc-process-status__title { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); line-height: 1.4; }
.bc-process-status__description, .bc-process-status__support { margin: 0; font-size: var(--type-control); line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.bc-process-status__support a { color: inherit; text-decoration: underline; }
.bc-process-status--error { border: 1px solid var(--color-error-border); border-radius: var(--radius-md); background: var(--color-error-bg); }
.bc-process-status--error .bc-process-status__icon { color: var(--color-error); }

/* Shared presentation roles. Feature classes may arrange these components,
   but typography, surfaces and interaction states belong to these owners. */
.bc-heading {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: normal;
}
.bc-heading--spaced { margin-bottom: var(--space-4); }
.bc-caption {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: 1.4;
}
.bc-label {
    color: var(--text-secondary);
    font-size: var(--type-control);
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}
.bc-value {
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.bc-surface { background: var(--bg-primary); color: var(--text-primary); }
.bc-metric {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: none;
}
.bc-metric-value {
    color: var(--text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.bc-metric-value--hero { font-size: clamp(2rem, 9vw, 2.5rem); color: var(--color-primary); }
.bc-metric-value.positive, .bc-value.positive { color: var(--color-success); }
.bc-metric-value.negative, .bc-value.negative { color: var(--color-error); }
.bc-update-status { color: var(--text-secondary); font-size: var(--font-size-xs); }
.bc-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: none;
}
.bc-icon-tile > svg { width: 20px; height: 20px; }
.bc-comparison-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-sm);
    color: var(--color-warning);
    background: var(--color-warning-bg);
    font-size: var(--type-control);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}
.bc-comparison-value.positive { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.bc-stepper {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    gap: 0;
    min-height: var(--control-height-touch);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--control-bg);
}
.bc-stepper > .bc-btn { width: var(--control-height-touch); min-height: var(--control-height-touch); border: 0; border-radius: 0; }
.bc-stepper__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    border-right: 1px solid var(--border-primary);
    border-left: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: var(--type-control);
    font-weight: var(--font-weight-medium);
}
.bc-choice {
    transition: border-color var(--bc-interaction-hover) ease, background-color var(--bc-interaction-hover) ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--control-bg);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--type-control);
    line-height: 1.4;
    cursor: pointer;
}
.bc-choice svg { width: 14px; height: 14px; flex-shrink: 0; }
.bc-choice__label { color: inherit; font: inherit; }
.bc-choice input { accent-color: var(--color-primary); }
.bc-choice:hover { background: var(--bg-hover); }
.bc-choice[aria-pressed="true"], .bc-choice[aria-selected="true"],
.bc-choice.is-active, .bc-choice.active, .bc-choice.selected,
.bc-choice:has(input:checked) {
    background: var(--bg-selected);
    color: var(--color-primary);
    border-color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}
.bc-choice:focus-visible, .bc-list-option:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.bc-choice:disabled { opacity: 0.5; cursor: not-allowed; }
.bc-list-option {
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.bc-list-option:hover { background: var(--bg-hover); }
.bc-list-option[aria-selected="true"], .bc-list-option.is-active { background: var(--bg-selected); color: var(--color-primary); }
.bc-notice {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: var(--type-control);
    line-height: 1.4;
    box-shadow: none;
}
.bc-notice--error { background: var(--color-error-bg); border-color: var(--color-error-border); color: var(--color-error); }
.bc-notice--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning); }
.bc-notice--flat { border: 0; border-radius: 0; }
.bc-field-error { color: var(--color-error); font-size: var(--font-size-xs); line-height: 1.4; }

/* Content utilities share the same finite palette as controls and cards.
   No domain-specific color values or generated one-off recipes. */
.bc-ink-primary { color: var(--text-primary); }
.bc-ink-secondary { color: var(--text-secondary); }
.bc-ink-accent { color: var(--color-primary); }
.bc-ink-inverse { color: var(--text-inverse); }
.bc-ink-success { color: var(--color-success); }
.bc-ink-warning { color: var(--color-warning); }
.bc-ink-error { color: var(--color-error); }
.bc-ink-info { color: var(--color-info); }
.bc-fill-raised { background: var(--bg-primary); }
.bc-fill-muted { background: var(--bg-secondary); }
.bc-fill-selected { background: var(--bg-selected); }
.bc-fill-inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.bc-fill-success { background: var(--color-success-bg); color: var(--color-success); }
.bc-fill-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.bc-fill-error { background: var(--color-error-bg); color: var(--color-error); }
.bc-fill-info { background: var(--color-info-bg); color: var(--color-info); }
.bc-type-caption { font-size: var(--font-size-xs); line-height: 1.4; }
.bc-type-control { font-size: var(--type-control); line-height: 1.4; }
.bc-type-body { font-size: var(--font-size-base); line-height: 1.4; }
.bc-type-heading { font-size: var(--font-size-xl); line-height: 1.3; }
.bc-weight-semibold { font-weight: var(--font-weight-semibold); }
.bc-rounded { border-radius: var(--radius-sm); }
.bc-rounded-full { border-radius: var(--radius-full); }
.bc-elevation { box-shadow: var(--shadow-card); }
.bc-outline { border: 1px solid var(--border-primary); }

@media (max-width: 768px) {
    .bc-choice, .bc-btn--icon { min-width: var(--control-height-touch); min-height: var(--control-height-touch); }
}
.bc-btn--selected { color: var(--color-primary); background: var(--bg-selected); }
.bc-metric-value--error { color: var(--color-error); font-size: var(--font-size-base); line-height: 1.4; }
textarea:is(.bc-input, .form-input) { height: auto; min-height: 96px; padding: var(--space-2) var(--space-2-5); line-height: 1.5; resize: vertical; }
:is(.form-input--error, .form-select--error) { border-color: var(--color-error); }
:is(.form-input--success, .form-select--success) { border-color: var(--color-success); }

/* Read-only key/value groups, shared by result and detail views. */
.bc-detail-grid { gap: 1px; padding: 1px; background: var(--border-primary); border-radius: var(--radius-sm); }
.bc-detail-grid__field { background: var(--bg-primary); color: var(--text-primary); }

/* File selection surface: the native input owns click/touch/keyboard handling. */
.bc-file-dropzone {
    position: relative;
    min-height: 112px;
    padding: var(--space-4);
    border: 1px dashed var(--control-border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-align: center;
}
.bc-file-dropzone:hover,
.bc-file-dropzone.upload-dropzone--dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-subtle);
}
.bc-file-dropzone:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.bc-file-dropzone__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.bc-file-dropzone__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    pointer-events: none;
}
.bc-file-dropzone__icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: var(--color-primary);
}
.bc-file-dropzone__action {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.bc-file-dropzone__hint { font-size: var(--font-size-xs); }
.bc-file-dropzone--compact { min-height: var(--control-height-touch); padding: var(--space-2); }
.bc-file-dropzone--compact .bc-file-dropzone__content {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2);
}
.bc-file-dropzone--compact .bc-file-dropzone__hint { display: none; }
.bc-file-dropzone--compact .bc-file-dropzone__icon { width: 20px; height: 20px; }
.bc-file-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: var(--space-2);
}
.bc-file-list__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.bc-file-list__header > .bc-btn { margin-left: auto; }

/* Inline search/filter tools and selectable navigation rows. */
.bc-filter-panel__search--inline { margin-bottom: 0; max-width: none; }
.bc-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.bc-toolbar__search { flex: 1 1 240px; min-width: 0; }
.bc-nav-item {
    min-height: var(--control-height-touch);
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.bc-nav-item:hover { background: var(--bg-hover); }
.bc-nav-item[aria-current="true"] {
    border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}
.bc-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Shared chart placeholder: all loading entry points use the same surface. */
.bc-chart-loading { position: relative; }
.bc-chart-loading canvas { visibility: hidden; }
.bc-chart-loading__placeholder {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Compact KPI cards share typography and icon surfaces with other summaries. */
.bc-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}
.bc-metric--icon {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.bc-metric__content { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bc-metric__content > .bc-caption { margin-top: var(--space-0-5); }
@media (max-width: 1024px) {
    .bc-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .bc-metric-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Microsoft brand mark retains its official colors in both themes. */
.bc-microsoft-mark__red { fill: var(--microsoft-red); }
.bc-microsoft-mark__green { fill: var(--microsoft-green); }
.bc-microsoft-mark__blue { fill: var(--microsoft-blue); }
.bc-microsoft-mark__yellow { fill: var(--microsoft-yellow); }

@media (prefers-reduced-motion: reduce) {
    .bc-table--clickable tbody tr > td:first-child,
    .bc-table__open-icon,
    .bc-segment__option,
    .bc-choice,
    .bc-slide-panel__close,
    :is(.bc-input, .form-input),
    .bc-filter-panel__search-input,
    :is(.bc-select, .form-select) {
        transition: none;
    }
    .bc-table--clickable tr:is(:hover, :focus-visible) .bc-table__open-icon {
        transform: none;
    }
}

/* Reusable image preview with an optional data annotation; asset geometry stays local. */
.bc-media-preview {
    margin: 0;
    min-width: 0;
    text-align: center;
}
.bc-media-preview__surface {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    border-radius: var(--radius-lg);
}
.bc-media-preview__image {
    display: block;
    width: 100%;
    height: auto;
}
.bc-media-preview__annotation {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--black);
    overflow: hidden;
}
.bc-media-preview__value {
    max-width: 100%;
    font-size: clamp(11px, 3.5cqw, 15px);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bc-media-preview > figcaption { margin-top: var(--space-2); }

/* Machine-readable symbols always use dark ink on white, independent of theme. */
.bc-barcode { shape-rendering: crispEdges; display: block; max-width: 100%; flex: 1; min-height: 0; background: var(--text-inverse); color: var(--black); }
.bc-barcode--hidden { display: none; }
.bc-media-preview__annotation--barcode { gap: 0; background: var(--text-inverse); }

.bc-media-preview__image--crop { height: 100%; object-fit: cover; }

.bc-media-preview__annotation--tight { padding: 0; }