/* ============================================================================
   bpm-studio.css
   BPM Studio v10 design system - ported from prototype/studio-v10.html.
   Scoped under .bpm-shell so no rules leak into mindzieStudio pages.

   Token strategy: CSS custom properties are declared inside .bpm-shell (NOT :root)
   so they are fully contained. The only :root rules are the font-face import
   done via the layout HeadContent.

   Ant Design is not used in mindzie.BpmStudio (per IMPLEMENTATION_PLAN.md R3/Q-3).
   Tailwind tw- utilities remain available from the shared pipeline for incidental
   layout (tw-flex, tw-grid, etc.). All design-system tokens live here.
   ============================================================================ */

/* ----------------------------------------------------------------
   Global resets inside .bpm-shell only
   ---------------------------------------------------------------- */
.bpm-shell *,
.bpm-shell *::before,
.bpm-shell *::after {
    box-sizing: border-box;
}

/* ----------------------------------------------------------------
   Design tokens (v10 prototype palette + geometry)
   ---------------------------------------------------------------- */
.bpm-shell {
    /* Neutral surfaces */
    --bs-paper:        #F4F7F9;
    --bs-paper-2:      #EEF2F5;
    --bs-surface:      #FFFFFF;
    --bs-ink:          #0F2030;
    --bs-ink-2:        #5A6C7A;
    --bs-ink-3:        #93A3B1;
    --bs-ink-4:        #C6D0D9;
    --bs-line:         #E4E9EE;
    --bs-line-2:       #EEF2F5;

    /* Ink chrome - deep navy sidebar, light header */
    --bs-navy:         #0B1A28;
    --bs-navy-2:       #12283B;
    --bs-navy-line:    #21384C;
    --bs-nt:           #E8EFF4;   /* nav text default */
    --bs-nt2:          #A9BCCB;   /* nav text muted */
    --bs-nt3:          #5D7488;   /* nav text tertiary */

    /* Cyan brand accent */
    --bs-cyan:         #0A8AA0;
    --bs-cyan-deep:    #076B7D;
    --bs-cyan-bright:  #22D3E8;
    --bs-cyan-soft:    #E6FAFD;
    --bs-cyan-line:    #D2F4FA;

    /* Gold - V2 badge only */
    --bs-gold:         #C9A24A;
    --bs-gold-700:     #9A7A2E;
    --bs-gold-tint:    #F7F0DB;
    --bs-gold-line:    #EAD3A8;

    /* Semantic */
    --bs-ok:           #1F9D6B;
    --bs-ok-soft:      #E4F6EE;
    --bs-ok-line:      #C2E7D4;
    --bs-warn:         #C9912A;
    --bs-warn-soft:    #F8EFD9;
    --bs-warn-line:    #ECD9AD;
    --bs-bad:          #D2503E;
    --bs-bad-soft:     #FAE8E4;
    --bs-bad-line:     #F3CDC4;

    /* Typography */
    --bs-font-disp:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --bs-font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --bs-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Geometry */
    --bs-r:            10px;
    --bs-r-lg:         14px;
    --bs-r-xl:         18px;
    --bs-sh1:          0 1px 2px rgba(15,32,48,.06), 0 4px 16px -8px rgba(15,32,48,.07);
    --bs-sh2:          0 2px 8px rgba(15,32,48,.06), 0 20px 48px -16px rgba(15,32,48,.18);

    /* Shell dimensions */
    --bs-sider-w:      250px;
    --bs-head-h:       58px;

    /* Base styles */
    font-family: var(--bs-font-body);
    font-size: 13.5px;
    color: var(--bs-ink);
    background: var(--bs-paper);
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    height: 100%;
}

/* ----------------------------------------------------------------
   Shell layout
   ---------------------------------------------------------------- */
.bpm-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.bpm-shell .bpm-layout-sider {
    width: var(--bs-sider-w);
    flex-shrink: 0;
}

.bpm-shell .bpm-layout-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.bpm-shell .bpm-layout-header {
    height: var(--bs-head-h);
    flex-shrink: 0;
}

.bpm-shell .bpm-layout-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: var(--bs-paper);
}

/* ----------------------------------------------------------------
   Sider
   ---------------------------------------------------------------- */
.bpm-shell .bpm-sider {
    background: var(--bs-navy);
    color: var(--bs-nt);
    display: flex;
    flex-direction: column;
    height: 100%;
    border-right: 1px solid var(--bs-navy-line);
    overflow: hidden;
}

/* Sider top brand bar */
.bpm-shell .bpm-sider-top {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--bs-head-h);
    padding: 0 14px;
    border-bottom: 1px solid var(--bs-navy-line);
    flex-shrink: 0;
}

/* Module switcher - the 9-dot grid icon */
.bpm-shell .bpm-modsq {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--bs-navy-line);
    background: rgba(255,255,255,.06);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    place-content: center;
    padding: 7px;
    flex-shrink: 0;
    cursor: pointer;
    text-decoration: none;
}

.bpm-shell .bpm-modsq:hover {
    border-color: var(--bs-cyan);
}

.bpm-shell .bpm-modsq span {
    width: 3.4px;
    height: 3.4px;
    border-radius: 1px;
    background: var(--bs-nt3);
    display: block;
}

.bpm-shell .bpm-modsq:hover span {
    background: var(--bs-cyan);
}

/* Brand logo box */
.bpm-shell .bpm-brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--bs-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bs-font-disp);
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

.bpm-shell .bpm-brand-name {
    font-family: var(--bs-font-disp);
    font-weight: 650;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--bs-nt);
}

.bpm-shell .bpm-brand-sub {
    font-family: var(--bs-font-mono);
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-nt3);
    margin-top: 2px;
}

/* Nav area */
.bpm-shell .bpm-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 12px;
}

.bpm-shell .bpm-nav-sec {
    font-family: var(--bs-font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bs-nt3);
    padding: 16px 10px 6px;
    font-weight: 600;
}

.bpm-shell .bpm-nav-it {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--bs-nt2);
    font-size: 13.5px;
    margin-bottom: 1px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-nav-it:hover {
    background: rgba(255,255,255,.06);
    color: var(--bs-nt);
}

.bpm-shell .bpm-nav-it.is-active {
    background: var(--bs-navy-2);
    color: #fff;
    font-weight: 600;
}

.bpm-shell .bpm-nav-it.is-active::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--bs-cyan-bright);
}

/* Offline Mode: AI Jobs is shown greyed and non-interactive rather than removed. */
.bpm-shell .bpm-nav-it.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.bpm-shell .bpm-nav-it.is-disabled:hover {
    background: transparent;
    color: var(--bs-nt2);
}

/* Offline Mode: the launcher AI on-ramps are shown greyed and non-interactive, not removed. */
.bpm-ai-row.is-offline-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bpm-shell .bpm-nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* Project banner (shown when in a project) */
.bpm-shell .bpm-proj-banner {
    margin: 12px 10px 2px;
    padding: 12px;
    border-radius: 10px;
    background: var(--bs-navy-2);
    border: 1px solid var(--bs-navy-line);
}

.bpm-shell .bpm-proj-name {
    font-family: var(--bs-font-disp);
    font-size: 14px;
    font-weight: 650;
    color: #fff;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-proj-meta {
    font-family: var(--bs-font-mono);
    font-size: 9.5px;
    color: var(--bs-nt3);
    margin-top: 3px;
    letter-spacing: 0.03em;
}

/* Back to all projects button (change doc C4 - prominent, full-width) */
.bpm-shell .bpm-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 10px 0;
    padding: 11px 12px;
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    border: 1px solid #2C4A63;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.bpm-shell .bpm-back-btn:hover {
    background: rgba(255,255,255,.14);
    border-color: var(--bs-cyan-bright);
    color: var(--bs-cyan-bright);
}

.bpm-shell .bpm-back-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Sider footer - user chip */
.bpm-shell .bpm-sider-foot {
    flex-shrink: 0;
    border-top: 1px solid var(--bs-navy-line);
    padding: 10px;
}

.bpm-shell .bpm-user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    font-family: var(--bs-font-body);
}

.bpm-shell .bpm-user-chip:hover {
    background: rgba(255,255,255,.06);
}

/* Inert chip (nothing to offer, e.g. Desktop single tenant) - no affordance. */
.bpm-shell .bpm-user-chip-static {
    cursor: default;
}

.bpm-shell .bpm-user-chip-static:hover {
    background: none;
}

.bpm-shell .bpm-user-chip-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.bpm-shell .bpm-user-caret {
    width: 12px;
    height: 12px;
    color: var(--bs-nt2);
    flex-shrink: 0;
    transition: transform 0.12s;
}

.bpm-shell .bpm-user-chip[aria-expanded="true"] .bpm-user-caret {
    transform: rotate(180deg);
}

/* Account menu - opens above the chip (footer sits at the bottom of the sider). */
.bpm-shell .bpm-user-wrap {
    position: relative;
}

.bpm-shell .bpm-user-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.bpm-shell .bpm-user-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 61;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-sh2);
    padding: 6px;
    animation: bpm-fade-in 0.12s ease-out;
}

.bpm-shell .bpm-user-menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--bs-line);
}

.bpm-shell .bpm-user-menu-id {
    min-width: 0;
    overflow: hidden;
}

.bpm-shell .bpm-user-menu-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-user-menu-email {
    font-size: 11px;
    color: var(--bs-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-user-menu-tenant {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    color: var(--bs-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--bs-r);
    background: none;
    color: var(--bs-ink-2);
    font-family: var(--bs-font-body);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-user-menu-item:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

.bpm-shell .bpm-user-menu-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--bs-ink-3);
}

.bpm-shell .bpm-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bs-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.bpm-shell .bpm-user-name {
    font-size: 13px;
    color: #fff;
    line-height: 1.15;
}

.bpm-shell .bpm-user-tenant {
    font-family: var(--bs-font-mono);
    font-size: 9.5px;
    color: var(--bs-nt2);
}

/* About button in sider footer */
.bpm-shell .bpm-sider-about-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: 7px;
    font-family: var(--bs-font-body);
    font-size: 12px;
    color: var(--bs-nt3);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
    margin-bottom: 4px;
}

.bpm-shell .bpm-sider-about-btn:hover {
    background: rgba(255,255,255,.06);
    color: var(--bs-nt2);
}

/* About button in sider footer */
.bpm-shell .bpm-sider-about-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 6px 8px;
    border-radius: 7px;
    font-family: var(--bs-font-body);
    font-size: 12px;
    color: var(--bs-nt3);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
    margin-bottom: 4px;
}

.bpm-shell .bpm-sider-about-btn:hover {
    background: rgba(255,255,255,.06);
    color: var(--bs-nt2);
}

/* ----------------------------------------------------------------
   Header
   ---------------------------------------------------------------- */
.bpm-shell .bpm-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    border-bottom: 1px solid var(--bs-line);
    background: rgba(244,247,249,.92);
    backdrop-filter: blur(6px);
    z-index: 5;
    position: relative;
}

/* Project/page label in header (no breadcrumb per change doc C4) */
.bpm-shell .bpm-header-label {
    font-family: var(--bs-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-ink-2);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    min-width: 0;
}

.bpm-shell .bpm-h-spacer {
    flex: 1;
}

/* Current-tenant chip (Bug #7576) - shows the active tenant in the header.
   Subtle pill that stays out of the way but tells multi-tenant users where they are.
   Shrinks and ellipsizes a long tenant name so it never overlaps the header controls. */
.bpm-shell .bpm-tenant-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 220px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--bs-line);
    background: var(--bs-surface);
    color: var(--bs-ink-2);
    flex-shrink: 1;
    min-width: 0;
}

.bpm-shell .bpm-tenant-ic {
    color: var(--bs-cyan);
    flex-shrink: 0;
}

.bpm-shell .bpm-tenant-name {
    font-family: var(--bs-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Same tenant chip inside the editor's tab strip (Bug #7576) - the editor is a
   full-screen overlay that covers the shared header, so the chip lives here too.
   Sized down to sit on the 36px tab strip and kept clear of the right edge. */
.bpm-shell .bpm-editor-tenant-chip {
    padding: 4px 10px;
    align-self: center;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Feedback button (change doc C2 - dark, calls out clearly) */
.bpm-shell .bpm-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--bs-navy-line);
    background: var(--bs-navy);
    color: var(--bs-nt);
    font-family: var(--bs-font-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -0.006em;
    transition: background 0.14s, border-color 0.14s;
    flex-shrink: 0;
    text-decoration: none;
}

.bpm-shell .bpm-feedback-btn:hover {
    background: var(--bs-navy-2);
    border-color: var(--bs-cyan);
    color: #fff;
}

/* Header icon buttons (help, notifications) */
.bpm-shell .bpm-h-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-ink-2);
    background: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
    flex-shrink: 0;
}

.bpm-shell .bpm-h-ic:hover {
    background: var(--bs-surface);
    border-color: var(--bs-line);
}

/* ----------------------------------------------------------------
   Language switcher (#7815)
   Reuses LanguageHelper's flags + the .AspNetCore.Culture cookie, styled with
   the BPM Studio design tokens to match the header's other icon controls.
   ---------------------------------------------------------------- */
.bpm-shell .bpm-lang {
    position: relative;
    flex-shrink: 0;
}

.bpm-shell .bpm-lang-toggle {
    padding: 0;
}

.bpm-shell .bpm-lang-flag {
    display: inline-flex;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--bs-line);
}

.bpm-shell .bpm-lang-flag-svg {
    width: 22px;
    height: 15px;
    display: block;
}

.bpm-shell .bpm-lang-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.bpm-shell .bpm-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 61;
    width: 220px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-sh2);
    padding: 6px;
    animation: bpm-fade-in 0.12s ease-out;
}

.bpm-shell .bpm-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--bs-r);
    background: none;
    color: var(--bs-ink-2);
    font-family: var(--bs-font-body);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-lang-item:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

.bpm-shell .bpm-lang-item-active {
    color: var(--bs-ink);
    font-weight: 600;
}

.bpm-shell .bpm-lang-item-flag {
    display: inline-flex;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--bs-line);
    flex-shrink: 0;
}

.bpm-shell .bpm-lang-item-code {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--bs-ink-3);
    min-width: 22px;
    flex-shrink: 0;
}

.bpm-shell .bpm-lang-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-lang-item-check {
    color: var(--bs-cyan);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Modal (Feedback and generic)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-modal-mask {
    position: fixed;
    inset: 0;
    background: rgba(12,17,31,.48);
    backdrop-filter: blur(3px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bpm-fade-in 0.15s ease-out;
}

.bpm-shell .bpm-modal {
    width: min(520px, 94vw);
    background: var(--bs-surface);
    border-radius: var(--bs-r-xl);
    box-shadow: var(--bs-sh2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: bpm-rise 0.18s ease-out;
}

.bpm-shell .bpm-modal-h {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--bs-line);
}

.bpm-shell .bpm-modal-title {
    font-family: var(--bs-font-disp);
    font-size: 15px;
    font-weight: 650;
    color: var(--bs-ink);
    flex: 1;
}

.bpm-shell .bpm-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--bs-line);
    background: none;
    color: var(--bs-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
}

.bpm-shell .bpm-modal-close:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

.bpm-shell .bpm-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bpm-shell .bpm-modal-desc {
    font-size: 13.5px;
    color: var(--bs-ink-2);
    line-height: 1.55;
}

.bpm-shell .bpm-modal-foot {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--bs-line);
}

/* About dialog content */
.bpm-shell .bpm-about-section {
    border-radius: var(--bs-r);
    border: 1px solid var(--bs-line);
    overflow: hidden;
}

.bpm-shell .bpm-about-sec-title {
    font-family: var(--bs-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-ink-3);
    font-weight: 600;
    padding: 7px 14px;
    background: var(--bs-paper);
    border-bottom: 1px solid var(--bs-line);
}

.bpm-shell .bpm-about-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    gap: 12px;
}

.bpm-shell .bpm-about-row + .bpm-about-row {
    border-top: 1px solid var(--bs-line-2);
}

.bpm-shell .bpm-about-lbl {
    font-size: 12.5px;
    color: var(--bs-ink-2);
    flex-shrink: 0;
}

.bpm-shell .bpm-about-val {
    font-size: 13px;
    color: var(--bs-ink);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bpm-shell .bpm-about-mono {
    font-family: var(--bs-font-mono);
    font-size: 12px;
    color: var(--bs-ink);
}

.bpm-shell .bpm-about-copy-row {
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    padding: 3px 6px;
    border-radius: 5px;
    cursor: pointer;
    color: var(--bs-ink-2);
    font-family: var(--bs-font-mono);
    font-size: 12px;
    transition: background 0.1s, color 0.1s;
    min-width: 0;
    overflow: hidden;
}

.bpm-shell .bpm-about-copy-row:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

.bpm-shell .bpm-about-copy-ic {
    flex-shrink: 0;
    opacity: 0.45;
    transition: opacity 0.1s;
}

.bpm-shell .bpm-about-copy-row:hover .bpm-about-copy-ic {
    opacity: 1;
}

.bpm-shell .bpm-about-copy-confirm {
    font-size: 12px;
    color: var(--bs-ok);
    padding: 4px 2px;
    text-align: center;
}

/* ----------------------------------------------------------------
   Form primitives (inputs, textareas)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-label {
    font-family: var(--bs-font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-ink-3);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

.bpm-shell .bpm-input {
    width: 100%;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    padding: 8.5px 12px;
    outline: none;
    background: var(--bs-surface);
    font-family: var(--bs-font-body);
    font-size: 13.5px;
    color: var(--bs-ink);
    transition: border-color 0.12s, box-shadow 0.12s;
}

.bpm-shell .bpm-input:focus {
    border-color: var(--bs-cyan);
    box-shadow: 0 0 0 3px var(--bs-cyan-soft);
}

/* Invalid input state (e.g. duplicate project name, #7561). Red border with a soft red
   focus ring so the field that needs attention is obvious without an extra layout shift. */
.bpm-shell .bpm-input.is-invalid {
    border-color: var(--bs-bad-line);
}

.bpm-shell .bpm-input.is-invalid:focus {
    border-color: var(--bs-bad);
    box-shadow: 0 0 0 3px var(--bs-bad-soft);
}

/* Inline field-level validation message shown directly under the offending input. */
.bpm-shell .bpm-field-error {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--bs-bad);
}

.bpm-shell .bpm-textarea {
    width: 100%;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    padding: 8.5px 12px;
    outline: none;
    background: var(--bs-surface);
    font-family: var(--bs-font-body);
    font-size: 13.5px;
    color: var(--bs-ink);
    resize: vertical;
    line-height: 1.55;
    min-height: 110px;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.bpm-shell .bpm-textarea:focus {
    border-color: var(--bs-cyan);
    box-shadow: 0 0 0 3px var(--bs-cyan-soft);
}

/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */
.bpm-shell .bpm-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--bs-line);
    background: var(--bs-surface);
    color: var(--bs-ink);
    font-family: var(--bs-font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: -0.006em;
    white-space: nowrap;
    transition: background 0.14s, border-color 0.14s;
}

.bpm-shell .bpm-btn:hover {
    background: var(--bs-paper-2);
    border-color: var(--bs-ink-4);
}

.bpm-shell .bpm-btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.bpm-shell .bpm-btn.bpm-btn-pri {
    background: var(--bs-ink);
    border-color: var(--bs-ink);
    color: #fff;
}

.bpm-shell .bpm-btn.bpm-btn-pri:hover {
    background: #21384C;
}

.bpm-shell .bpm-btn.bpm-btn-cyan {
    background: var(--bs-cyan);
    border-color: var(--bs-cyan);
    color: #fff;
}

.bpm-shell .bpm-btn.bpm-btn-cyan:hover {
    background: #076B7D;
}

/* ----------------------------------------------------------------
   Status tags / dot-badges
   ---------------------------------------------------------------- */
.bpm-shell .bpm-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 550;
    border-radius: 999px;
    padding: 3px 10px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    color: var(--bs-ink-2);
}

.bpm-shell .bpm-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-ink-4);
    flex-shrink: 0;
}

.bpm-shell .bpm-tag.bpm-tag-draft::before { background: var(--bs-warn); }
.bpm-shell .bpm-tag.bpm-tag-live::before  { background: var(--bs-ok); }
.bpm-shell .bpm-tag.bpm-tag-bad::before   { background: var(--bs-bad); }

/* V2 badge */
.bpm-shell .bpm-v2b {
    font-family: var(--bs-font-mono);
    font-size: 7.5px;
    font-weight: 600;
    border: 1px solid var(--bs-gold-line);
    background: var(--bs-gold-tint);
    border-radius: 5px;
    padding: 1px 5px;
    margin-left: 7px;
    text-transform: uppercase;
    color: var(--bs-gold-700);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: 1px;
}

/* ----------------------------------------------------------------
   Cards
   ---------------------------------------------------------------- */
.bpm-shell .bpm-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    padding: 22px;
}

.bpm-shell .bpm-card.bpm-card-click {
    cursor: pointer;
    transition: box-shadow 0.16s, border-color 0.16s;
}

.bpm-shell .bpm-card.bpm-card-click:hover {
    box-shadow: var(--bs-sh1);
    border-color: var(--bs-ink-4);
}

/* ----------------------------------------------------------------
   Page chrome
   ---------------------------------------------------------------- */
.bpm-shell .bpm-page {
    padding: 30px 38px 14px;
}

.bpm-shell .bpm-page-body {
    padding: 6px 38px 60px;
}

.bpm-shell .bpm-eyebrow {
    font-family: var(--bs-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bs-ink-3);
    margin-bottom: 11px;
}

.bpm-shell .bpm-page-title {
    font-family: var(--bs-font-disp);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0;
    color: var(--bs-ink);
}

.bpm-shell .bpm-page-subtitle {
    font-size: 14px;
    color: var(--bs-ink-2);
    margin-top: 10px;
    max-width: 740px;
    line-height: 1.55;
}

/* ----------------------------------------------------------------
   Loading spinner + error state
   ---------------------------------------------------------------- */
.bpm-shell .bpm-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--bs-cyan-soft);
    border-top-color: var(--bs-cyan-bright);
    animation: bpm-spin 0.8s linear infinite;
}

.bpm-shell .bpm-error-box {
    padding: 16px 20px;
    border-radius: var(--bs-r-lg);
    border: 1px solid var(--bs-bad-line);
    background: var(--bs-bad-soft);
    color: var(--bs-bad);
    font-size: 13.5px;
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   Overview page components
   ---------------------------------------------------------------- */

/* KPI counts row - four equal stat cards (work item #7693) */
.bpm-shell .bpm-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 720px) {
    .bpm-shell .bpm-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bpm-shell .bpm-kpi {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-sh1);
    padding: 18px 20px 16px;
}

.bpm-shell .bpm-kpi-label {
    font-size: 12px;
    color: var(--bs-ink-3);
    font-weight: 450;
}

.bpm-shell .bpm-kpi-value {
    font-family: var(--bs-font-disp);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--bs-ink);
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
}

/* Overview card: white surface, shadow, consistent radius */
.bpm-shell .bpm-overview-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-sh1);
    overflow: hidden;
}

.bpm-shell .bpm-overview-card-head {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--bs-line-2);
}

.bpm-shell .bpm-overview-card-title {
    font-family: var(--bs-font-disp);
    font-size: 14px;
    font-weight: 650;
    color: var(--bs-ink);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Empty state */
.bpm-shell .bpm-overview-empty {
    padding: 28px 20px;
    color: var(--bs-ink-3);
    font-size: 13px;
    text-align: center;
    margin: 0;
}

/* Data table inside a card */
.bpm-shell .bpm-overview-table {
    width: 100%;
    border-collapse: collapse;
}

.bpm-shell .bpm-overview-table thead tr {
    background: var(--bs-paper);
}

.bpm-shell .bpm-overview-table th {
    padding: 8px 20px;
    font-family: var(--bs-font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bs-ink-3);
    text-align: left;
    border-bottom: 1px solid var(--bs-line);
}

.bpm-shell .bpm-overview-table td {
    padding: 10px 20px;
    font-size: 13.5px;
    color: var(--bs-ink);
    border-bottom: 1px solid var(--bs-line-2);
    vertical-align: middle;
}

.bpm-shell .bpm-overview-table tbody tr:last-child td {
    border-bottom: none;
}

.bpm-shell .bpm-overview-table tbody tr:hover {
    background: var(--bs-paper);
}

/* Date column - fixed right-aligned, muted mono */
.bpm-shell .bpm-overview-col-date {
    text-align: right;
    white-space: nowrap;
    color: var(--bs-ink-3);
    font-family: var(--bs-font-mono);
    font-size: 12px;
}

/* Row link - full cell, no underline, primary ink on hover */
.bpm-shell .bpm-overview-link {
    color: var(--bs-ink);
    text-decoration: none;
    font-weight: 500;
}

.bpm-shell .bpm-overview-link:hover {
    color: var(--bs-cyan);
    text-decoration: underline;
}

/* Secondary row link - muted project link in the project column */
.bpm-shell .bpm-overview-sublink {
    color: var(--bs-ink-3);
    text-decoration: none;
    font-size: 13px;
}

.bpm-shell .bpm-overview-sublink:hover {
    color: var(--bs-cyan);
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   All Projects page
   ---------------------------------------------------------------- */

/* Section header with collapse toggle */
.bpm-shell .bpm-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 14px;
    cursor: pointer;
    user-select: none;
}

.bpm-shell .bpm-section-header:first-child {
    margin-top: 0;
}

.bpm-shell .bpm-section-title {
    font-family: var(--bs-font-disp);
    font-size: 14px;
    font-weight: 650;
    color: var(--bs-ink);
    letter-spacing: -0.01em;
}

.bpm-shell .bpm-section-count {
    font-family: var(--bs-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bs-ink-3);
    background: var(--bs-paper-2);
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    padding: 1px 8px;
    flex-shrink: 0;
}

.bpm-shell .bpm-section-chevron {
    margin-left: auto;
    width: 14px;
    height: 14px;
    color: var(--bs-ink-3);
    transition: transform 0.18s;
    flex-shrink: 0;
}

.bpm-shell .bpm-section-chevron.is-collapsed {
    transform: rotate(-90deg);
}

.bpm-shell .bpm-section-divider {
    flex: 1;
    height: 1px;
    background: var(--bs-line);
    margin: 0 0 0 8px;
}

/* Project card grid */
.bpm-shell .bpm-proj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

/* Individual project card */
.bpm-shell .bpm-proj-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    padding: 20px;
    position: relative;
    transition: box-shadow 0.16s, border-color 0.16s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bpm-shell .bpm-proj-card:hover {
    box-shadow: var(--bs-sh1);
    border-color: var(--bs-ink-4);
}

.bpm-shell .bpm-proj-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.bpm-shell .bpm-proj-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--bs-cyan-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bs-cyan);
}

.bpm-shell .bpm-proj-card-title {
    font-family: var(--bs-font-disp);
    font-size: 14.5px;
    font-weight: 650;
    color: var(--bs-ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    text-decoration: none;
}

.bpm-shell .bpm-proj-card-title:hover {
    color: var(--bs-cyan);
}

.bpm-shell .bpm-proj-card-desc {
    font-size: 12.5px;
    color: var(--bs-ink-2);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 0;
}

.bpm-shell .bpm-proj-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
}

.bpm-shell .bpm-proj-card-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-3);
}

.bpm-shell .bpm-proj-card-stat svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Kebab menu button on the card */
.bpm-shell .bpm-proj-kebab-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: none;
    color: var(--bs-ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    flex-shrink: 0;
}

.bpm-shell .bpm-proj-kebab-btn:hover,
.bpm-shell .bpm-proj-kebab-btn.is-open {
    background: var(--bs-paper-2);
    border-color: var(--bs-line);
    color: var(--bs-ink);
}

/* In-row kebab variant: sits in normal flow inside its row cell (flex-aligned by
   the row) instead of being absolutely positioned against a card. Used by list
   rows (e.g. the project Members page) where the card offsets would place the
   button outside its row (work item #7682). */
.bpm-shell .bpm-proj-kebab-btn.bpm-proj-kebab-btn--row {
    position: static;
}

/* Kebab dropdown menu */
.bpm-shell .bpm-kebab-menu {
    position: absolute;
    top: 44px;
    right: 10px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-sh2);
    min-width: 160px;
    z-index: 50;
    overflow: hidden;
    animation: bpm-fade-in 0.12s ease-out;
}

.bpm-shell .bpm-kebab-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--bs-ink);
    cursor: pointer;
    transition: background 0.1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.bpm-shell .bpm-kebab-item:hover {
    background: var(--bs-paper);
}

.bpm-shell .bpm-kebab-item.bpm-kebab-item-danger {
    color: var(--bs-bad);
}

.bpm-shell .bpm-kebab-item.bpm-kebab-item-danger:hover {
    background: var(--bs-bad-soft);
}

.bpm-shell .bpm-kebab-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* Whole-card / whole-row click: the title link is stretched to cover the entire
   card (or row) via an ::after overlay, so clicking anywhere opens the project
   while the single real <a> keeps the accessible name. The kebab button + menu
   sit above the overlay so they stay independently clickable. */
.bpm-shell .bpm-proj-card,
.bpm-shell .bpm-model-card,
.bpm-shell .bpm-model-list-row {
    cursor: pointer;
}

.bpm-shell .bpm-proj-card-title::after,
.bpm-shell .bpm-proj-row-title::after,
.bpm-shell .bpm-model-card-name::after,
.bpm-shell .bpm-model-list-name::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bpm-shell .bpm-proj-kebab-btn {
    z-index: 1;
}

/* List (row) view */
.bpm-shell .bpm-proj-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.bpm-shell .bpm-proj-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    cursor: pointer;
    transition: box-shadow 0.16s, border-color 0.16s;
}

.bpm-shell .bpm-proj-row:hover {
    box-shadow: var(--bs-sh1);
    border-color: var(--bs-ink-4);
}

.bpm-shell .bpm-proj-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--bs-cyan-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bs-cyan);
}

.bpm-shell .bpm-proj-row-title {
    font-family: var(--bs-font-disp);
    font-size: 13.5px;
    font-weight: 650;
    color: var(--bs-ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    text-decoration: none;
}

.bpm-shell .bpm-proj-row:hover .bpm-proj-row-title {
    color: var(--bs-cyan);
}

.bpm-shell .bpm-proj-row-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* Card / List view toggle (All Projects header) */
.bpm-shell .bpm-view-toggle {
    display: inline-flex;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    overflow: hidden;
    flex-shrink: 0;
}

.bpm-shell .bpm-view-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-surface);
    color: var(--bs-ink-3);
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-view-btn + .bpm-view-btn {
    border-left: 1px solid var(--bs-line);
}

.bpm-shell .bpm-view-btn:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

.bpm-shell .bpm-view-btn.is-active {
    background: var(--bs-cyan-soft);
    color: var(--bs-cyan);
}

/* Empty state inside a section */
.bpm-shell .bpm-section-empty {
    padding: 20px 0 8px;
    color: var(--bs-ink-3);
    font-size: 13.5px;
    text-align: center;
}

/* ----------------------------------------------------------------
   Admin "Show All Projects" toggle + all-projects table (#7726)
   ---------------------------------------------------------------- */

/* Show All Projects checkbox in the All Projects header (admin only) */
.bpm-shell .bpm-showall-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bs-ink-2);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.bpm-shell .bpm-showall-toggle input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--bs-cyan);
    cursor: pointer;
}

.bpm-shell .bpm-showall-toggle:hover {
    color: var(--bs-ink);
}

/* All Projects table - mimics the main Studio Projects list layout:
   Name / Description / Created By / Date Created / Users / actions */
/* No overflow:hidden on this container (work item #8259). The row kebab dropdown is
   absolutely positioned against its row and extends below it, so an overflow:hidden here
   clipped it away - and z-index cannot escape an ancestor clip rect, which is why the menu
   appeared to render behind the list. The rounded corners are achieved by rounding the head
   and the last row instead, which looks identical without creating a clipping context. */
.bpm-shell .bpm-proj-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    background: var(--bs-surface);
    margin-bottom: 8px;
}

.bpm-shell .bpm-proj-table-head,
.bpm-shell .bpm-proj-table-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 96px;
    gap: 12px;
    align-items: center;
    padding: 11px 16px;
}

.bpm-shell .bpm-proj-table-head {
    background: var(--bs-paper-2);
    border-bottom: 1px solid var(--bs-line);
    border-radius: calc(var(--bs-r-lg) - 1px) calc(var(--bs-r-lg) - 1px) 0 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--bs-ink-3);
}

.bpm-shell .bpm-proj-table-row {
    position: relative;
    border-bottom: 1px solid var(--bs-line-2);
    font-size: 13px;
    color: var(--bs-ink-2);
    transition: background 0.12s;
}

.bpm-shell .bpm-proj-table-row:last-child {
    border-bottom: none;
    border-radius: 0 0 calc(var(--bs-r-lg) - 1px) calc(var(--bs-r-lg) - 1px);
}

.bpm-shell .bpm-proj-table-row:hover {
    background: var(--bs-paper);
}

.bpm-shell .bpm-proj-table-name {
    font-weight: 650;
    color: var(--bs-ink);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-proj-table-name:hover {
    color: var(--bs-cyan);
    text-decoration: underline;
}

.bpm-shell .bpm-proj-table-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-proj-table-users {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Member avatar chip (initials), matching the Studio Projects "Users" column */
.bpm-shell .bpm-avatar-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--bs-ink-4);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--bs-ink-2);
    background: var(--bs-surface);
    flex-shrink: 0;
}

.bpm-shell .bpm-avatar-chip.bpm-avatar-chip--more {
    border-color: var(--bs-line);
    color: var(--bs-ink-3);
}

/* Per-row action area (add-me / edit / kebab) */
.bpm-shell .bpm-proj-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.bpm-shell .bpm-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border-radius: var(--bs-r);
    color: var(--bs-ink-3);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-icon-btn:hover,
.bpm-shell .bpm-icon-btn.is-open {
    background: var(--bs-paper-2);
    color: var(--bs-cyan);
}

/* ----------------------------------------------------------------
   Project Models page - filter chips + view toggle
   ---------------------------------------------------------------- */

/* Filter chips bar */
.bpm-shell .bpm-filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bpm-shell .bpm-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--bs-line);
    background: var(--bs-surface);
    color: var(--bs-ink-2);
    font-family: var(--bs-font-body);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.bpm-shell .bpm-filter-chip:hover {
    border-color: var(--bs-ink-4);
    color: var(--bs-ink);
}

.bpm-shell .bpm-filter-chip.is-active {
    background: var(--bs-ink);
    border-color: var(--bs-ink);
    color: #fff;
    font-weight: 600;
}

.bpm-shell .bpm-filter-chip-count {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    font-weight: 600;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 0 6px;
}

.bpm-shell .bpm-filter-chip:not(.is-active) .bpm-filter-chip-count {
    background: var(--bs-paper-2);
    color: var(--bs-ink-3);
}

/* View toggle (grid/list) */
.bpm-shell .bpm-view-toggle {
    display: flex;
    align-items: center;
    border: 1px solid var(--bs-line);
    border-radius: 9px;
    overflow: hidden;
    flex-shrink: 0;
}

.bpm-shell .bpm-view-btn {
    width: 34px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-surface);
    color: var(--bs-ink-3);
    border: none;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-view-btn + .bpm-view-btn {
    border-left: 1px solid var(--bs-line);
}

.bpm-shell .bpm-view-btn:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

.bpm-shell .bpm-view-btn.is-active {
    background: var(--bs-ink);
    color: #fff;
}

/* ----------------------------------------------------------------
   Project Models page - model cards (grid view)
   ---------------------------------------------------------------- */

.bpm-shell .bpm-model-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

/* No overflow:hidden here - it would clip the kebab dropdown menu that opens
   inside the card, hiding its bottom actions (work item #7686; same pattern as
   the list view, #7682). The rounded corners are preserved by explicit top
   radii on the thumbnail below. */
.bpm-shell .bpm-model-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.16s, border-color 0.16s;
}

.bpm-shell .bpm-model-card:hover {
    box-shadow: var(--bs-sh1);
    border-color: var(--bs-ink-4);
}

/* Dotted thumbnail placeholder (V1 - real thumbnails come in V2). Explicit top
   radii because the card no longer clips its children (work item #7686). */
.bpm-shell .bpm-model-thumbnail {
    height: 120px;
    background: var(--bs-paper);
    border-bottom: 1px solid var(--bs-line-2);
    border-top-left-radius: calc(var(--bs-r-xl) - 1px);
    border-top-right-radius: calc(var(--bs-r-xl) - 1px);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.bpm-shell .bpm-model-thumbnail-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--bs-line) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.8;
}

/* AI badge (floating on thumbnail). Bottom-left per the v10 design contract
   (studio-v10.html) - the card's top-right slot belongs to the hover kebab
   button, and the two must never overlap (work item #7686). */
.bpm-shell .bpm-ai-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: var(--bs-ink);
    color: #fff;
    font-family: var(--bs-font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 5px;
    padding: 2px 7px;
}

/* AI badge (small, inline in list view) */
.bpm-shell .bpm-ai-badge-sm {
    background: var(--bs-ink);
    color: #fff;
    font-family: var(--bs-font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 4px;
    padding: 1px 6px;
    flex-shrink: 0;
}

/* Card body */
.bpm-shell .bpm-model-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.bpm-shell .bpm-model-card-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bpm-shell .bpm-model-card-name {
    font-family: var(--bs-font-disp);
    font-size: 14px;
    font-weight: 650;
    color: var(--bs-ink);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bpm-shell .bpm-model-card-name:hover {
    color: var(--bs-cyan);
}

.bpm-shell .bpm-model-card-desc {
    font-size: 12px;
    color: var(--bs-ink-2);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0;
}

.bpm-shell .bpm-model-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   Project Models page - list view
   ---------------------------------------------------------------- */

/* No overflow:hidden here - it would clip the kebab dropdown menus that open
   inside the list (work item #7682). The rounded corners are preserved by
   explicit radii on the header and the last row below. */
.bpm-shell .bpm-model-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    background: var(--bs-surface);
}

.bpm-shell .bpm-model-list-header {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--bs-paper);
    border-bottom: 1px solid var(--bs-line);
    border-top-left-radius: calc(var(--bs-r-xl) - 1px);
    border-top-right-radius: calc(var(--bs-r-xl) - 1px);
    font-family: var(--bs-font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bs-ink-3);
    font-weight: 600;
}

.bpm-shell .bpm-model-list-row {
    display: flex;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid var(--bs-line-2);
    transition: background 0.1s;
    gap: 8px;
}

.bpm-shell .bpm-model-list-row:last-child {
    border-bottom: none;
    border-bottom-left-radius: calc(var(--bs-r-xl) - 1px);
    border-bottom-right-radius: calc(var(--bs-r-xl) - 1px);
}

.bpm-shell .bpm-model-list-row:hover {
    background: var(--bs-paper);
}

.bpm-shell .bpm-model-list-name {
    font-size: 13.5px;
    font-weight: 550;
    color: var(--bs-ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.bpm-shell .bpm-model-list-name:hover {
    color: var(--bs-cyan);
}

/* Divider inside kebab menu */
.bpm-shell .bpm-kebab-divider {
    height: 1px;
    background: var(--bs-line);
    margin: 4px 0;
}

/* ----------------------------------------------------------------
   Back navigation link (used on launcher, import, and detail pages)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-ink-2);
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.12s;
}

.bpm-shell .bpm-back-link:hover {
    color: var(--bs-ink);
}

/* ----------------------------------------------------------------
   AI badge pill (inline in launcher option card titles)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-ai-badge-pill {
    display: inline-flex;
    align-items: center;
    background: var(--bs-ink);
    color: #fff;
    font-family: var(--bs-font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 5px;
    padding: 2px 7px;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------
   Inline text link (ported from prototype .link; --mag maps to --bs-cyan)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-link {
    color: var(--bs-cyan);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bpm-shell .bpm-link:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------
   Import model page - dropzone + file row
   ---------------------------------------------------------------- */
.bpm-shell .bpm-import-form {
    max-width: 580px;
}

/* Dropzone outer container - positions the hidden file input */
.bpm-shell .bpm-import-dropzone {
    position: relative;
    border: 2px dashed var(--bs-line);
    border-radius: var(--bs-r-xl);
    background: var(--bs-surface);
    padding: 40px 32px;
    text-align: center;
    transition: border-color 0.14s, background 0.14s;
}

.bpm-shell .bpm-import-dropzone:hover,
.bpm-shell .bpm-import-dropzone.is-drag-over {
    border-color: var(--bs-cyan);
    background: var(--bs-cyan-soft);
}

/* The actual file input - covers the whole dropzone so clicking anywhere works */
.bpm-shell .bpm-import-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.bpm-shell .bpm-import-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.bpm-shell .bpm-import-icon {
    color: var(--bs-ink-3);
    margin-bottom: 4px;
}

.bpm-shell .bpm-import-dropzone-title {
    font-family: var(--bs-font-disp);
    font-size: 16px;
    font-weight: 650;
    color: var(--bs-ink);
    letter-spacing: -0.01em;
    margin: 0;
}

.bpm-shell .bpm-import-dropzone-hint {
    font-size: 13px;
    color: var(--bs-ink-3);
    line-height: 1.5;
    max-width: 380px;
    margin: 0;
}

/* "Choose file" label - needs pointer-events so clicks work above the file input */
.bpm-shell .bpm-import-dropzone .bpm-btn {
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

/* Selected file info row */
.bpm-shell .bpm-import-file-row {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bs-cyan-soft);
    border: 1px solid var(--bs-cyan-line);
    border-radius: var(--bs-r);
}

.bpm-shell .bpm-import-file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--bs-cyan);
    font-size: 13px;
}

.bpm-shell .bpm-import-file-clear {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--bs-cyan-line);
    background: none;
    color: var(--bs-ink-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-import-file-clear:hover {
    background: var(--bs-line);
    color: var(--bs-ink);
}

.bpm-shell .bpm-import-file-clear:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Editor page (/bpm/{tenantId}/project/{projectId}/editor/{diagramId})
   The editor fills the main content area (bpm-layout-main) with a
   vertical flex layout: toolbar + optional banner + canvas.
   Chrome reskin to v9 tokens is a separate later task
   (IMPLEMENTATION_PLAN.md section 4 ground rules).
   ---------------------------------------------------------------- */

/* Full-height flex container occupying bpm-layout-main.
   Uses calc so the editor fills the viewport minus the header
   regardless of whether bpm-layout-main reports a height. */
.bpm-shell .bpm-editor-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--bs-head-h));
    min-height: 0;
    overflow: hidden;
}

/* Toolbar strip.
   No overflow:hidden here - it would clip the Export/Arrange dropdown popups that
   open below the bar (same reason the Models list/cards avoid it for their kebab
   menus). Horizontal overflow is prevented by flex-wrap:nowrap + flex-shrink on
   the controls instead. */
.bpm-shell .bpm-editor-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 46px;
    padding: 0 14px;
    border-bottom: 1px solid var(--bs-line);
    background: var(--bs-surface);
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Back link styled as a small text button */
.bpm-shell .bpm-editor-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bs-ink-2);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
}

.bpm-shell .bpm-editor-back-btn:hover {
    color: var(--bs-ink);
    background: var(--bs-paper-2);
}

/* Vertical separator */
.bpm-shell .bpm-editor-bar-sep {
    width: 1px;
    height: 18px;
    background: var(--bs-line);
    flex-shrink: 0;
    margin: 0 2px;
}

/* Diagram name label */
.bpm-shell .bpm-editor-diagram-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    min-width: 0;
    letter-spacing: -0.01em;
}

/* Dirty-state dot after the diagram name */
.bpm-shell .bpm-editor-dirty-dot {
    color: var(--bs-warn);
    margin-left: 4px;
    font-size: 16px;
    line-height: 1;
}

/* Grows to push save/zoom buttons to the right */
.bpm-shell .bpm-editor-bar-spacer {
    flex: 1;
    min-width: 8px;
}

/* Save status text (live region) */
.bpm-shell .bpm-editor-save-status {
    font-size: 11.5px;
    color: var(--bs-ink-3);
    font-family: var(--bs-font-mono);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Toolbar icon/text buttons (zoom, undo, redo, download) */
.bpm-shell .bpm-editor-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--bs-line);
    background: var(--bs-surface);
    color: var(--bs-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    font-family: var(--bs-font-body);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.bpm-shell .bpm-editor-tool-btn:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
    border-color: var(--bs-ink-4);
}

.bpm-shell .bpm-editor-tool-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Published read-only notice banner */
.bpm-shell .bpm-editor-readonly-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--bs-warn-soft);
    border-bottom: 1px solid var(--bs-warn-line);
    font-size: 12.5px;
    color: var(--bs-warn);
    font-weight: 500;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.bpm-shell .bpm-editor-readonly-link {
    font-weight: 600;
    color: var(--bs-warn);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.bpm-shell .bpm-editor-readonly-link:hover {
    color: var(--bs-ink);
}

/* Editor canvas - grows to fill remaining height */
.bpm-shell .bpm-editor-canvas {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* The MindzieBpmnEditorHost renders a div with class bpmn-host;
   we need it to fill the canvas container. */
.bpm-shell .bpm-editor-canvas .bpmn-host {
    width: 100%;
    height: 100%;
}

/* Canvas-level error overlay (editor host JS errors, and a save that did not
   persist - #8256). Wraps rather than clipping: a save failure has to state the
   reason and the recovery step, which is longer than one toolbar-width line. */
.bpm-shell .bpm-editor-canvas-error {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bs-bad-soft);
    border: 1px solid var(--bs-bad-line);
    color: var(--bs-bad);
    border-radius: var(--bs-r);
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 500;
    pointer-events: none;
    max-width: min(560px, calc(100% - 32px));
    text-align: center;
    z-index: 10;
}

/* Canvas-level notice overlay: an Arrange action that legitimately moved
   nothing (#8232). Informational, not a failure, so it uses the neutral
   surface rather than the error palette - but it MUST be visible, because a
   refusal the user cannot see is indistinguishable from a dead menu item.

   Sits ABOVE the error overlay's bottom:16px rather than on top of it. The
   component already suppresses the notice whenever an error is showing, so
   the two should never coexist; this offset means that if a future change
   ever lets them, the error stays readable instead of being painted over by
   this opaque box. An error the user cannot see is the failure mode we are
   most trying to avoid, so it gets two independent guards. */
.bpm-shell .bpm-editor-canvas-notice {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    color: var(--bs-text);
    border-radius: var(--bs-r);
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 500;
    pointer-events: none;
    max-width: min(560px, calc(100% - 32px));
    text-align: center;
    z-index: 10;
}

/* Full-screen editor (Bug #7696): the editor page becomes a fixed overlay that
   covers the navy sider + header so the diagram canvas uses the full browser
   viewport. The explicit Close control in the toolbar returns to the Models page. */
.bpm-shell .bpm-editor-page.bpm-editor-page-full {
    position: fixed;
    inset: 0;
    z-index: 120;
    height: 100vh;
    background: var(--bs-surface);
}

/* Close (X) control - sits at the far right of the toolbar */
.bpm-shell .bpm-editor-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--bs-line);
    background: var(--bs-surface);
    color: var(--bs-ink-2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.bpm-shell .bpm-editor-close-btn:hover {
    background: var(--bs-bad-soft);
    color: var(--bs-bad);
    border-color: var(--bs-bad-line);
}

/* Toolbar dropdown trigger wrapper (Export / Arrange) - anchors the popup */
.bpm-shell .bpm-editor-menu {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* Open-state tint for the dropdown trigger button */
.bpm-shell .bpm-editor-tool-btn.is-open {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
    border-color: var(--bs-ink-4);
}

/* Dropdown popup - reuses .bpm-kebab-menu chrome, positioned under the trigger */
.bpm-shell .bpm-editor-menu-popup {
    position: absolute;
    top: 36px;
    right: 0;
    min-width: 180px;
}

/* Dropdown items in the editor menus are <button> elements - reset their chrome
   so they read like the anchor/button kebab items elsewhere */
.bpm-shell .bpm-editor-menu-popup .bpm-kebab-item {
    font-family: var(--bs-font-body);
    font-size: 13px;
}

/* Selection-dependent Arrange items grey out and stop accepting clicks */
.bpm-shell .bpm-editor-menu-popup .bpm-kebab-item.bpm-editor-menu-item-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Click-away backdrop that closes an open toolbar dropdown */
.bpm-shell .bpm-editor-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

/* Full-height loading / error states in the editor page */
.bpm-shell .bpm-editor-loading {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--bs-ink-3);
    font-size: 13px;
}

.bpm-shell .bpm-editor-error {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 440px;
    margin: auto;
    text-align: center;
    color: var(--bs-bad);
    font-size: 13.5px;
    padding: 24px;
}

/* ----------------------------------------------------------------
   Multi-tab editor shell (#7723)
   The shell page (.bpm-editor-page) is a flex column: tab strip on top,
   then the pane stack. Each open tab's content renders concurrently; only
   the active pane is shown (.is-active) while the rest are display:none but
   stay mounted, so each editor host keeps its unsaved edits + undo history.
   ---------------------------------------------------------------- */

/* Tab strip above the editor canvases */
.bpm-shell .bpm-editor-tab-strip {
    display: flex;
    align-items: stretch;
    height: 36px;
    padding: 0 8px;
    gap: 4px;
    border-bottom: 1px solid var(--bs-line);
    background: var(--bs-paper-2);
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* One tab in the strip */
.bpm-shell .bpm-editor-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    align-self: center;
    padding: 0 8px 0 12px;
    border-radius: 7px 7px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--bs-ink-3);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    max-width: 220px;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-editor-tab:hover {
    background: var(--bs-surface);
    color: var(--bs-ink-2);
}

.bpm-shell .bpm-editor-tab.is-active {
    background: var(--bs-surface);
    color: var(--bs-ink);
    border-color: var(--bs-line);
    font-weight: 600;
}

.bpm-shell .bpm-editor-tab-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Unsaved-changes dot */
.bpm-shell .bpm-editor-tab-dirty {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-warn);
    flex-shrink: 0;
}

/* Per-tab close (X) */
.bpm-shell .bpm-editor-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: none;
    background: none;
    color: var(--bs-ink-3);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}

.bpm-shell .bpm-editor-tab-close:hover {
    background: var(--bs-bad-soft);
    color: var(--bs-bad);
}

.bpm-shell .bpm-editor-tab-spacer {
    flex: 1;
    min-width: 0;
}

/* The pane stack fills the remaining height under the tab strip */
.bpm-shell .bpm-editor-tab-panes {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Each pane fills the stack. Inactive panes stay mounted but hidden, so the
   editor host inside keeps its state across tab switches. */
.bpm-shell .bpm-editor-tab-pane {
    position: absolute;
    inset: 0;
    display: none;
}

.bpm-shell .bpm-editor-tab-pane.is-active {
    display: block;
}

/* Per-tab editor content is itself a flex column (bar + canvas) filling its pane */
.bpm-shell .bpm-editor-tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

/* ----------------------------------------------------------------
   Lint panel - overlay inside .bpm-editor-canvas (#7721)
   ---------------------------------------------------------------- */

/* Lint panel anchored to the bottom of the canvas. Sits above the diagram
   canvas (z-index 20) so it is always readable without covering the toolbar. */
.bpm-shell .bpm-lint-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    background: var(--bs-surface);
    border-top: 1px solid var(--bs-line);
    box-shadow: 0 -2px 12px rgba(15, 32, 48, 0.08);
    z-index: 20;
    font-size: 13px;
}

/* Header row: title + counts + close button */
.bpm-shell .bpm-lint-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bs-line);
    flex-shrink: 0;
    background: var(--bs-paper);
}

.bpm-shell .bpm-lint-header-title {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--bs-ink);
    letter-spacing: 0.01em;
}

.bpm-shell .bpm-lint-header-counts {
    font-size: 12px;
    color: var(--bs-ink-3);
}

.bpm-shell .bpm-lint-header-spacer {
    flex: 1;
}

.bpm-shell .bpm-lint-close-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--bs-line);
    border-radius: 4px;
    background: none;
    color: var(--bs-ink-2);
    font-size: 12px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.1s, color 0.1s;
}

.bpm-shell .bpm-lint-close-btn:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

/* Scrollable list of issues */
.bpm-shell .bpm-lint-list {
    overflow-y: auto;
    flex: 1;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

/* One lint issue row */
.bpm-shell .bpm-lint-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-line-2);
    transition: background 0.1s;
}

.bpm-shell .bpm-lint-item:last-child {
    border-bottom: none;
}

.bpm-shell .bpm-lint-item:hover {
    background: var(--bs-paper);
}

/* Severity-coloured left indicator dot */
.bpm-shell .bpm-lint-item::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.bpm-shell .bpm-lint-item.bpm-lint-error::before   { background: var(--bs-bad); }
.bpm-shell .bpm-lint-item.bpm-lint-warning::before { background: var(--bs-warn); }
.bpm-shell .bpm-lint-item.bpm-lint-info::before    { background: var(--bs-cyan); }

/* Rule ID - monospace, muted */
.bpm-shell .bpm-lint-rule {
    font-family: var(--bs-font-mono);
    font-size: 11px;
    color: var(--bs-ink-3);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Issue message text */
.bpm-shell .bpm-lint-message {
    flex: 1;
    color: var(--bs-ink);
    font-size: 12.5px;
    line-height: 1.45;
}

/* Quick-fix button */
.bpm-shell .bpm-lint-fix-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--bs-line);
    border-radius: 4px;
    background: none;
    color: var(--bs-cyan-deep);
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.1s, border-color 0.1s;
}

.bpm-shell .bpm-lint-fix-btn:hover {
    background: var(--bs-cyan-soft);
    border-color: var(--bs-cyan);
}

/* Empty-state message when no issues */
.bpm-shell .bpm-lint-empty {
    padding: 18px 16px;
    font-size: 12.5px;
    color: var(--bs-ink-3);
    text-align: center;
}

/* ----------------------------------------------------------------
   #7824 - Suppress the engine library's built-in floating property
   box inside BPM Studio. The @mindzie/bpmn-editor library mounts its
   own read-only "mz-property-panel" overlay (top-right, 220px) on
   single-element selection. In BPM Studio the host never wires the
   library's editing callbacks, so that box is read-only decoration
   that duplicates - and is hidden behind - the richer Razor
   Properties panel added in #7722 (and extended in #7758). Showing
   both is the redundant-two-panels defect customers reported; the
   small box peeks out behind the large one on smaller resolutions.
   This re-applies the #7655/#7451 resolution (keep the right panel,
   remove the floating one) to the new editor. Scoped to .bpm-shell so
   the standalone read-only BPMN viewer keeps its built-in box.
   ---------------------------------------------------------------- */
.bpm-shell .mz-property-panel {
    display: none !important;
}

/* ----------------------------------------------------------------
   Properties panel (#7722, #7824) - inspector for the selected canvas
   element. Rendered as a COMPACT FLOATING CARD docked near the
   top-right of the editor canvas rather than a full-height right rail
   (#7824 direction change): the properties on an element are few
   (Type / ID / Name), so a content-height card that overlays the
   canvas is less intrusive and leaves room to later position it near
   the selected element. Sits in the same z-index band as the lint
   panel and uses the same token vocabulary. All editing is unchanged
   (this is a styling-only change); the engine library's read-only
   floating box stays suppressed above.
   ---------------------------------------------------------------- */
.bpm-shell .bpm-props-panel {
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: auto;
    width: 264px;
    max-height: calc(100% - 24px);
    display: flex;
    flex-direction: column;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(15, 32, 48, 0.16);
    z-index: 20;
    font-size: 13px;
    overflow: hidden;
}

/* Header row: title + close button */
.bpm-shell .bpm-props-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--bs-line);
    flex-shrink: 0;
    background: var(--bs-paper);
}

.bpm-shell .bpm-props-header-title {
    font-weight: 600;
    font-size: 12.5px;
    color: var(--bs-ink);
    letter-spacing: 0.01em;
}

.bpm-shell .bpm-props-header-spacer {
    flex: 1;
}

.bpm-shell .bpm-props-close-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--bs-line);
    border-radius: 4px;
    background: none;
    color: var(--bs-ink-2);
    font-size: 12px;
    cursor: pointer;
    line-height: 1.4;
    transition: background 0.1s, color 0.1s;
}

.bpm-shell .bpm-props-close-btn:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
}

/* Scrollable inspector body */
.bpm-shell .bpm-props-body {
    overflow-y: auto;
    flex: 1;
    padding: 14px 14px 18px;
}

/* One labelled field block */
.bpm-shell .bpm-props-field {
    margin-bottom: 14px;
}

.bpm-shell .bpm-props-field:last-child {
    margin-bottom: 0;
}

.bpm-shell .bpm-props-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-ink-3);
    margin-bottom: 5px;
}

/* Read-only type badge */
.bpm-shell .bpm-props-typebadge {
    display: inline-block;
    padding: 3px 10px;
    border: 1px solid var(--bs-cyan-line);
    border-radius: 999px;
    background: var(--bs-cyan-soft);
    color: var(--bs-cyan-deep);
    font-size: 12px;
    font-weight: 500;
}

/* Read-only element id - monospace, muted, truncates */
.bpm-shell .bpm-props-id {
    font-family: var(--bs-font-mono);
    font-size: 11.5px;
    color: var(--bs-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Editable name input */
.bpm-shell .bpm-props-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--bs-line);
    border-radius: 6px;
    background: var(--bs-paper);
    color: var(--bs-ink);
    font-size: 13px;
    font-family: var(--bs-font-body);
    transition: border-color 0.12s, box-shadow 0.12s;
}

.bpm-shell .bpm-props-input:focus {
    outline: none;
    border-color: var(--bs-cyan);
    box-shadow: 0 0 0 2px var(--bs-cyan-soft);
}

.bpm-shell .bpm-props-input:disabled {
    background: var(--bs-paper-2);
    color: var(--bs-ink-3);
    cursor: not-allowed;
}

/* "Saving..." status line under the name field */
.bpm-shell .bpm-props-status {
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--bs-ink-3);
}

/* Empty / multi-selection state */
.bpm-shell .bpm-props-empty {
    padding: 18px 4px;
    font-size: 12.5px;
    color: var(--bs-ink-3);
    line-height: 1.5;
}

/* ----------------------------------------------------------------
   Model detail page (/bpm/{tenantId}/project/{projectId}/models/{diagramId})
   ---------------------------------------------------------------- */

/* Detail page header - model name + lifecycle tag + action buttons */
.bpm-shell .bpm-detail-header {
    padding: 28px 38px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bpm-shell .bpm-detail-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.bpm-shell .bpm-detail-title {
    font-family: var(--bs-font-disp);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.032em;
    line-height: 1.1;
    color: var(--bs-ink);
    margin: 0;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.bpm-shell .bpm-detail-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}

/* Meta row - version number, modified date, owner */
.bpm-shell .bpm-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bpm-shell .bpm-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--bs-font-mono);
    font-size: 11.5px;
    color: var(--bs-ink-3);
}

/* Tab strip */
.bpm-shell .bpm-detail-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    padding: 18px 38px 0;
    border-bottom: 1px solid var(--bs-line);
    margin: 0;
    list-style: none;
}

.bpm-shell .bpm-detail-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px 10px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bs-ink-3);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
    letter-spacing: -0.006em;
}

.bpm-shell .bpm-detail-tab:hover {
    color: var(--bs-ink);
}

.bpm-shell .bpm-detail-tab.is-active {
    color: var(--bs-ink);
    font-weight: 600;
    border-bottom-color: var(--bs-cyan-bright);
}

/* Tab content area */
.bpm-shell .bpm-detail-body {
    padding: 28px 38px 60px;
}

/* Overview tab: description block + chips */
.bpm-shell .bpm-detail-description {
    font-size: 14px;
    color: var(--bs-ink-2);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 0 22px;
    white-space: pre-wrap;
}

.bpm-shell .bpm-detail-no-description {
    font-size: 13.5px;
    color: var(--bs-ink-4);
    font-style: italic;
    margin: 0 0 22px;
}

/* Chips row (BPMN 2.0 badge + elements) */
.bpm-shell .bpm-detail-chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.bpm-shell .bpm-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--bs-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 6px;
    padding: 3px 9px;
    background: var(--bs-paper-2);
    border: 1px solid var(--bs-line);
    color: var(--bs-ink-2);
    text-transform: uppercase;
}

.bpm-shell .bpm-detail-chip.bpm-detail-chip-std {
    background: var(--bs-cyan-soft);
    border-color: var(--bs-cyan-line);
    color: var(--bs-cyan);
}

.bpm-shell .bpm-detail-chip.bpm-detail-chip-ai {
    background: var(--bs-ink);
    border-color: var(--bs-ink);
    color: #fff;
}

/* Overview tab: hero diagram-preview card (v10 design contract).
   Spans the full content width like the prototype hero thumbnail. */
.bpm-shell .bpm-detail-hero-card {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    overflow: hidden;
    margin-bottom: 18px;
}

/* Canvas area hosting the read-only BPMN preview */
.bpm-shell .bpm-detail-hero-canvas {
    position: relative;
    height: 320px;
    background: var(--bs-surface);
}

/* The MindzieBpmnEditorHost canvas (.bpmn-host) has no intrinsic size -
   every host must size it (same rule the editor page uses). */
.bpm-shell .bpm-detail-hero-canvas .bpmn-host {
    width: 100%;
    height: 100%;
}

/* Placeholder shown when the diagram has no content yet or the preview failed */
.bpm-shell .bpm-detail-hero-placeholder {
    position: relative;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bs-paper);
    color: var(--bs-ink-3);
    font-size: 13px;
}

.bpm-shell .bpm-detail-hero-placeholder > span,
.bpm-shell .bpm-detail-hero-placeholder > svg {
    position: relative;
    z-index: 1;
}

/* Overview tab: About this process card */
.bpm-shell .bpm-detail-about-card {
    max-width: 680px;
}

.bpm-shell .bpm-detail-about-card > :last-child {
    margin-bottom: 0;
}

.bpm-shell .bpm-detail-about-title {
    font-family: var(--bs-font-disp);
    font-size: 14px;
    font-weight: 650;
    color: var(--bs-ink);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

/* Publish lock notice inside the About card */
.bpm-shell .bpm-detail-publish-lock {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--bs-r);
    background: var(--bs-warn-soft);
    border: 1px solid var(--bs-warn-line);
    font-size: 13px;
    color: var(--bs-warn);
}

/* Versions tab: revision table */
.bpm-shell .bpm-detail-rev-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    overflow: hidden;
}

.bpm-shell .bpm-detail-rev-table thead tr {
    background: var(--bs-paper);
}

.bpm-shell .bpm-detail-rev-table th {
    padding: 9px 18px;
    font-family: var(--bs-font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bs-ink-3);
    text-align: left;
    border-bottom: 1px solid var(--bs-line);
}

.bpm-shell .bpm-detail-rev-table td {
    padding: 11px 18px;
    font-size: 13px;
    color: var(--bs-ink);
    border-bottom: 1px solid var(--bs-line-2);
    vertical-align: middle;
}

.bpm-shell .bpm-detail-rev-table tbody tr:last-child td {
    border-bottom: none;
}

.bpm-shell .bpm-detail-rev-table tbody tr:hover td {
    background: var(--bs-paper);
}

.bpm-shell .bpm-detail-rev-num {
    font-family: var(--bs-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-ink-2);
}

.bpm-shell .bpm-detail-rev-comment {
    font-size: 13px;
    color: var(--bs-ink-2);
}

.bpm-shell .bpm-detail-rev-author {
    font-size: 13px;
    color: var(--bs-ink-2);
    white-space: nowrap;
}

.bpm-shell .bpm-detail-rev-date {
    font-family: var(--bs-font-mono);
    font-size: 11.5px;
    color: var(--bs-ink-3);
    white-space: nowrap;
}

/* Download button row in versions table */
.bpm-shell .bpm-detail-rev-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bs-ink-2);
    background: none;
    border: 1px solid var(--bs-line);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
}

.bpm-shell .bpm-detail-rev-dl-btn:hover {
    background: var(--bs-paper-2);
    color: var(--bs-ink);
    border-color: var(--bs-ink-4);
}

.bpm-shell .bpm-detail-rev-dl-btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Empty revisions state (shouldn't happen in practice, but defensive) */
.bpm-shell .bpm-detail-rev-empty {
    padding: 28px 18px;
    text-align: center;
    color: var(--bs-ink-3);
    font-size: 13px;
}

/* ----------------------------------------------------------------
   Members page - avatar chip
   ---------------------------------------------------------------- */
.bpm-shell .bpm-members-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bs-font-disp);
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0;
    user-select: none;
}

/* ----------------------------------------------------------------
   Members page - role pill tags
   ---------------------------------------------------------------- */
.bpm-shell .bpm-members-role-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--bs-font-mono);
    letter-spacing: 0.03em;
    padding: 3px 9px;
    white-space: nowrap;
}

.bpm-shell .bpm-members-role-tag--owner {
    background: var(--bs-cyan-soft);
    color: var(--bs-cyan);
    border: 1px solid var(--bs-cyan-line);
}

.bpm-shell .bpm-members-role-tag--editor {
    background: var(--bs-ok-soft);
    color: var(--bs-ok);
    border: 1px solid var(--bs-ok-line);
}

.bpm-shell .bpm-members-role-tag--viewer {
    background: var(--bs-paper-2);
    color: var(--bs-ink-3);
    border: 1px solid var(--bs-line);
}

/* ----------------------------------------------------------------
   Members page - info banner
   ---------------------------------------------------------------- */
.bpm-shell .bpm-members-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 16px;
    border-radius: var(--bs-r);
    background: var(--bs-cyan-soft);
    border: 1px solid var(--bs-cyan-line);
    font-size: 13px;
    color: var(--bs-ink-2);
    line-height: 1.5;
}

.bpm-shell .bpm-members-info-banner svg {
    color: var(--bs-cyan);
    margin-top: 1px;
}

/* ----------------------------------------------------------------
   Members page - Add Member picker list
   ---------------------------------------------------------------- */
.bpm-shell .bpm-member-picker {
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    overflow: hidden;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bs-surface);
}

.bpm-shell .bpm-member-pick-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    border-bottom: 1px solid var(--bs-line-2);
}

.bpm-shell .bpm-member-pick-row:last-child {
    border-bottom: none;
}

.bpm-shell .bpm-member-pick-row:hover {
    background: var(--bs-paper);
}

.bpm-shell .bpm-member-pick-row.is-selected {
    background: var(--bs-cyan-soft);
}

/* ----------------------------------------------------------------
   Comments tab - composer (contained card, bounded width, attached
   Post button; v10 .composer pattern - #7685)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-comment-composer {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    overflow: hidden;
}

.bpm-shell .bpm-comment-composer-input {
    width: 100%;
    display: block;
    padding: 12px 14px;
    border: none;
    background: transparent;
    font-family: var(--bs-font-sans);
    font-size: 13px;
    color: var(--bs-ink);
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

.bpm-shell .bpm-comment-composer-input:focus {
    outline: none;
}

.bpm-shell .bpm-comment-composer-input:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.bpm-shell .bpm-comment-composer:focus-within {
    border-color: var(--bs-cyan);
    box-shadow: 0 0 0 2px var(--bs-cyan-soft);
}

.bpm-shell .bpm-comment-composer-foot {
    display: flex;
    justify-content: flex-end;
    padding: 9px 13px;
    border-top: 1px solid var(--bs-line-2);
}

/* ----------------------------------------------------------------
   Comments tab - reply textarea
   ---------------------------------------------------------------- */
.bpm-shell .bpm-comment-input {
    width: 100%;
    display: block;
    padding: 10px 14px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    background: var(--bs-surface);
    font-family: var(--bs-font-sans);
    font-size: 13px;
    color: var(--bs-ink);
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.bpm-shell .bpm-comment-input:focus {
    outline: none;
    border-color: var(--bs-cyan);
    box-shadow: 0 0 0 2px var(--bs-cyan-soft);
}

.bpm-shell .bpm-comment-input:disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   Comments tab - thread list card (v10 "card tight" + .cmt rows)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-comment-card {
    padding: 0 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bpm-shell .bpm-comment-thread {
    padding: 16px 0;
    border-bottom: 1px solid var(--bs-line-2);
}

.bpm-shell .bpm-comment-thread:last-child {
    border-bottom: none;
}

.bpm-shell .bpm-comment-thread.is-resolved {
    opacity: 0.6;
}

/* ----------------------------------------------------------------
   Comments tab - comment metadata row (v10 .cmt-h: avatar + name +
   time + open/resolved chip)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-comment-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.bpm-shell .bpm-comment-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bs-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.bpm-shell .bpm-comment-author {
    font-family: var(--bs-font-sans);
    font-size: 12.5px;
    font-weight: 650;
    color: var(--bs-ink);
}

.bpm-shell .bpm-comment-time {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    color: var(--bs-ink-3);
}

/* Open/resolved chip pushed to the right edge of the meta row */
.bpm-shell .bpm-comment-status {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 8px;
}

/* ----------------------------------------------------------------
   Comments tab - comment body
   ---------------------------------------------------------------- */
.bpm-shell .bpm-comment-body {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--bs-ink);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ----------------------------------------------------------------
   Comments tab - action button row (styled pill controls, not bare
   text links - #7685)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-comment-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bpm-shell .bpm-comment-action-btn {
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: 999px;
    padding: 3px 11px;
    cursor: pointer;
    font-family: var(--bs-font-sans);
    font-size: 11.5px;
    font-weight: 550;
    color: var(--bs-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.bpm-shell .bpm-comment-action-btn:hover {
    color: var(--bs-ink);
    border-color: var(--bs-ink-4);
    background: var(--bs-paper);
}

.bpm-shell .bpm-comment-action-btn:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.bpm-shell .bpm-comment-action-btn-danger:hover {
    color: var(--bs-bad);
    border-color: var(--bs-bad);
}

/* ----------------------------------------------------------------
   Comments tab - replies indent
   ---------------------------------------------------------------- */
.bpm-shell .bpm-comment-replies {
    margin-top: 12px;
    padding-left: 20px;
    border-left: 2px solid var(--bs-line-2);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bpm-shell .bpm-comment-reply {
    padding: 12px 0;
    border-bottom: 1px solid var(--bs-line-2);
}

.bpm-shell .bpm-comment-reply:last-child {
    border-bottom: none;
}

/* ----------------------------------------------------------------
   AI launcher rows (wizard "What do you want to create?")
   Ported from prototype/studio-v10.html .ai-row family (work item #7683).
   The prototype's --mag accent maps to --bs-cyan in this palette.
   ---------------------------------------------------------------- */
.bpm-shell .bpm-ai-rows {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 920px;
}

/* One launch option. Rendered as a <button> so it needs the text/font resets. */
.bpm-shell .bpm-ai-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 19px 24px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-xl);
    background: var(--bs-surface);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-align: left;
    font-family: var(--bs-font-body);
    color: var(--bs-ink);
    width: 100%;
}

.bpm-shell .bpm-ai-row:hover:not(:disabled) {
    border-color: var(--bs-ink-4);
    box-shadow: var(--bs-sh1);
}

.bpm-shell .bpm-ai-row:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* The recommended option gets the accent border + "Start here" pill. */
.bpm-shell .bpm-ai-row.is-hero {
    border: 2px solid var(--bs-cyan);
}

.bpm-shell .bpm-starthere {
    position: absolute;
    top: -10px;
    left: 20px;
    font-family: var(--bs-font-mono);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--bs-cyan);
    color: #fff;
    border-radius: 7px;
    padding: 3px 10px;
}

/* Illustration box at the left of each row */
.bpm-shell .bpm-ai-thumb {
    flex-shrink: 0;
    width: 208px;
    height: 96px;
    border-radius: 10px;
    border: 1px solid var(--bs-line-2);
    background: var(--bs-paper);
    padding: 6px;
    overflow: hidden;
}

.bpm-shell .bpm-ai-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Inline SVG thumbs (e.g. the "Start from scratch" illustration) fill the box
   the same way the PNG thumbs do. */
.bpm-shell .bpm-ai-thumb svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bpm-shell .bpm-ai-rt {
    font-family: var(--bs-font-disp);
    font-size: 16.5px;
    font-weight: 650;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bpm-shell .bpm-ai-rd {
    font-size: 13px;
    color: var(--bs-ink-2);
    line-height: 1.55;
    max-width: 520px;
}

/* Right-hand info column: formats, expectation, CTA */
.bpm-shell .bpm-ai-side {
    flex-shrink: 0;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
}

.bpm-shell .bpm-ai-fmt {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    color: var(--bs-ink-3);
}

.bpm-shell .bpm-ai-meta {
    font-size: 11.5px;
    color: var(--bs-ink-3);
}

.bpm-shell .bpm-ai-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 650;
    color: var(--bs-cyan);
    margin-top: 5px;
}

.bpm-shell .bpm-ai-go svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Empty state (ported from prototype .empty / .empty-t / .empty-ic)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: var(--bs-ink-3);
    padding: 56px 20px;
}

.bpm-shell .bpm-empty-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--bs-cyan);
}

.bpm-shell .bpm-empty-icon svg {
    width: 24px;
    height: 24px;
}

.bpm-shell .bpm-empty-title {
    font-family: var(--bs-font-disp);
    font-size: 19px;
    font-weight: 650;
    color: var(--bs-ink);
}

.bpm-shell .bpm-empty-desc {
    max-width: 430px;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ----------------------------------------------------------------
   Status tag variants for AI jobs (running = cyan dot)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-tag.bpm-tag-run::before {
    background: var(--bs-cyan-bright);
}

/* ----------------------------------------------------------------
   Destructive button (modal confirm actions)
   ---------------------------------------------------------------- */
.bpm-shell .bpm-btn.bpm-btn-danger {
    background: var(--bs-bad);
    border-color: var(--bs-bad);
    color: #fff;
}

.bpm-shell .bpm-btn.bpm-btn-danger:hover {
    background: #B8432F;
    border-color: #B8432F;
}

/* ----------------------------------------------------------------
   Agent workspace theme bridge (Bug #7687c)

   The shared AgentJobWorkspace (mindzie.Agent.Components) is themed entirely
   through CSS custom properties; without host values it falls back to its
   purple/green defaults. This block maps EVERY token the workspace consumes
   onto the v10 design-system tokens above, so the AI Job run page renders in
   the BPM Studio palette (cyan actions, ink/navy user bubble - matching the
   studio-v10.html contract: .msg.me .bubble uses --ink, buttons use the cyan
   signature). Scoped to .bpm-agent-theme so nothing leaks beyond the pages
   that host the workspace.
   ---------------------------------------------------------------- */
.bpm-shell .bpm-agent-theme {
    /* typography */
    --font-sans:            var(--bs-font-body);
    --font-display:         var(--bs-font-disp);
    --font-mono:            var(--bs-font-mono);

    /* text */
    --text-primary:         var(--bs-ink);
    --text-secondary:       var(--bs-ink-2);
    --text-tertiary:        var(--bs-ink-2);
    --text-quaternary:      var(--bs-ink-3);

    /* surfaces + lines */
    --bg-layout:            var(--bs-paper);
    --bg-container:         var(--bs-surface);
    --border:               var(--bs-line);
    --border-secondary:     var(--bs-line);
    --gray-2:               var(--bs-paper);
    --gray-3:               var(--bs-paper-2);
    --gray-4:               var(--bs-line);
    --gray-5:               var(--bs-line);
    --gray-7:               var(--bs-ink-3);

    /* primary / accent -> cyan signature */
    --primary:              var(--bs-cyan);
    --ant-primary:          var(--bs-cyan);
    --ant-primary-hover:    var(--bs-cyan-deep);
    --ant-primary-active:   var(--bs-cyan-deep);
    --ant-primary-bg:       var(--bs-cyan-soft);
    --ant-primary-border:   var(--bs-cyan-line);
    --accent-display:       var(--bs-cyan);
    --accent-display-bg:    var(--bs-cyan-soft);
    --accent-display-border: var(--bs-cyan-line);
    --ring:                 0 0 0 3px var(--bs-cyan-soft);

    /* user chat bubble = ink/navy per the v10 contract (NOT the primary cyan) */
    --ajw-bubble-user-bg:   var(--bs-ink);
    --ajw-bubble-user-text: var(--bs-paper);

    /* the Dictate affordance rides the cyan action accent (no bright green) */
    --success:              var(--bs-cyan);
    --success-hover:        var(--bs-cyan-deep);

    /* semantic */
    --ant-success:          var(--bs-ok);
    --ant-success-bg:       var(--bs-ok-soft);
    --ant-success-border:   var(--bs-ok-line);
    --ant-warning:          var(--bs-warn);
    --ant-error:            var(--bs-bad);
    --ant-error-bg:         var(--bs-bad-soft);
    --ant-error-border:     var(--bs-bad-line);
    --danger:               var(--bs-bad);
    --danger-hover:         var(--bs-bad);
    --danger-color:         var(--bs-bad);
    --danger-bg:            var(--bs-bad-soft);

    /* geometry */
    --radius:               var(--bs-r);
    --radius-lg:            var(--bs-r-lg);
    --radius-sm:            6px;
    --shadow-1:             var(--bs-sh1);
    --shadow-3:             var(--bs-sh2);
}

/* ----------------------------------------------------------------
   Files page uploader theme bridge (Bug #7688)

   The shared MindzieFileUpload (mindzie.Uploader) is themed through --mzu-*
   CSS custom properties; without host values it falls back to its neutral
   indigo defaults. This block maps them onto the v10 design tokens and ports
   the prototype's .dropzone details (studio-v10.html: r-xl radius, cyan
   hover, mono accept line, ink-3 icon). Scoped to .bpm-files-upload so
   nothing leaks beyond the Files page.
   ---------------------------------------------------------------- */
.bpm-shell .bpm-files-upload {
    --mzu-font:       var(--bs-font-body);
    --mzu-text:       var(--bs-ink);
    --mzu-accent:     var(--bs-cyan);
    --mzu-border:     var(--bs-line);
    --mzu-bg:         var(--bs-surface);
    --mzu-bg-active:  var(--bs-cyan-soft);
    --mzu-muted:      var(--bs-ink-3);
    --mzu-icon:       var(--bs-ink-3);
    --mzu-radius:     var(--bs-r);
    --mzu-error:      var(--bs-bad);
    --mzu-error-bg:   var(--bs-bad-soft);
    --mzu-error-border: var(--bs-bad-line);
    --mzu-success:    var(--bs-ok);
    --mzu-bar-bg:     var(--bs-line-2);
    --mzu-item-bg:    var(--bs-surface);
}

/* Prototype .dropzone geometry + hover (studio-v10.html line 546) */
.bpm-shell .bpm-files-upload .mzu-dropzone {
    border-radius: var(--bs-r-xl);
    padding: 26px 16px;
    transition: border-color 0.15s, background 0.15s;
}

.bpm-shell .bpm-files-upload .mzu-dropzone:hover,
.bpm-shell .bpm-files-upload .mzu-dropzone.mzu-drag-active {
    border-color: var(--bs-cyan-bright);
    background: var(--bs-cyan-soft);
}

.bpm-shell .bpm-files-upload .mzu-dropzone:hover .mzu-dropzone-icon,
.bpm-shell .bpm-files-upload .mzu-dropzone.mzu-drag-active .mzu-dropzone-icon {
    color: var(--bs-cyan);
}

/* Prototype .dz-t: ink title, not accent-colored */
.bpm-shell .bpm-files-upload .mzu-dropzone-title {
    color: var(--bs-ink);
}

/* Prototype .dz-accept: mono accepted-formats line */
.bpm-shell .bpm-files-upload .mzu-dropzone-accepts {
    font-family: var(--bs-font-mono);
    font-size: 10px;
    letter-spacing: 0.03em;
}

/* ----------------------------------------------------------------
   Animations
   ---------------------------------------------------------------- */
@keyframes bpm-spin {
    to { transform: rotate(360deg); }
}

@keyframes bpm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes bpm-rise {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ----------------------------------------------------------------
   Share link button + copy-link popover + confirmation toast (#7749)
   ---------------------------------------------------------------- */

/* Click-away backdrop behind an open share popover (mirrors the kebab backdrop). */
.bpm-shell .bpm-share-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
}

.bpm-shell .bpm-share-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 61;
    width: 360px;
    max-width: min(360px, calc(100vw - 32px));
    background: var(--bs-surface);
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    box-shadow: var(--bs-sh2);
    padding: 14px;
    animation: bpm-fade-in 0.12s ease-out;
}

/* In a kebab menu the trigger is full-width, so anchor the popover to the left edge. */
.bpm-shell .bpm-share-inmenu .bpm-share-popover {
    right: auto;
    left: 0;
}

.bpm-shell .bpm-share-popover-title {
    font-family: var(--bs-font-disp);
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-ink);
    margin-bottom: 10px;
}

.bpm-shell .bpm-share-url-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.bpm-shell .bpm-share-url-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r);
    background: var(--bs-paper);
    color: var(--bs-ink-2);
    font-family: var(--bs-font-mono);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bpm-shell .bpm-share-url-input:focus {
    outline: none;
    border-color: var(--bs-cyan);
    background: var(--bs-surface);
}

.bpm-shell .bpm-share-copy-btn {
    flex-shrink: 0;
    padding: 7px 14px;
}

.bpm-shell .bpm-share-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--bs-ink-3);
}

/* Confirmation toast. Fixed bottom-center so it reads the same from every surface. */
.bpm-shell .bpm-share-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 300;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--bs-ink);
    color: var(--bs-surface);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--bs-sh2);
    animation: bpm-rise 0.18s ease-out;
}

.bpm-shell .bpm-share-toast svg {
    color: var(--bs-ok);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   New Project card / row (always first in the My Projects section)
   ---------------------------------------------------------------- */

/* Card view - dark background to make it stand out (#7786) */
.bpm-shell .bpm-proj-new-card {
    background: var(--bs-navy);
    border: 1px solid var(--bs-navy-line);
    border-radius: var(--bs-r-xl);
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-align: center;
    min-height: 120px;
    transition: background 0.16s, border-color 0.16s;
    outline: none;
    width: 100%;
    font-family: inherit;
}

.bpm-shell .bpm-proj-new-card:hover {
    background: var(--bs-navy-2);
    border-color: var(--bs-cyan);
}

.bpm-shell .bpm-proj-new-card:focus-visible {
    outline: 2px solid var(--bs-cyan);
    outline-offset: 2px;
}

.bpm-shell .bpm-proj-new-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bs-cyan-bright);
}

.bpm-shell .bpm-proj-new-card-label {
    font-family: var(--bs-font-disp);
    font-size: 13.5px;
    font-weight: 650;
    color: #fff;
    letter-spacing: -0.01em;
}

/* List view - dark row, always first */
.bpm-shell .bpm-proj-new-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bs-navy);
    border: 1px solid var(--bs-navy-line);
    border-radius: var(--bs-r-lg);
    cursor: pointer;
    transition: background 0.16s, border-color 0.16s;
    outline: none;
    width: 100%;
    font-family: inherit;
    text-align: left;
}

.bpm-shell .bpm-proj-new-row:hover {
    background: var(--bs-navy-2);
    border-color: var(--bs-cyan);
}

.bpm-shell .bpm-proj-new-row:focus-visible {
    outline: 2px solid var(--bs-cyan);
    outline-offset: 2px;
}

.bpm-shell .bpm-proj-new-row-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bs-cyan-bright);
}

.bpm-shell .bpm-proj-new-row-label {
    font-family: var(--bs-font-disp);
    font-size: 13.5px;
    font-weight: 650;
    color: #fff;
    letter-spacing: -0.01em;
}