/* ============================================================================
   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);
}

.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;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
}

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

.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-nt3);
}

/* ----------------------------------------------------------------
   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;
}

/* 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;
}

.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);
}

/* ----------------------------------------------------------------
   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);
}

/* ----------------------------------------------------------------
   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);
}

.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 */
.bpm-shell .bpm-proj-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-r-lg);
    overflow: hidden;
    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);
    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;
}

.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) */
.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;
    white-space: nowrap;
    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;
}

/* ----------------------------------------------------------------
   Properties panel (#7722) - right-rail inspector for the selected
   canvas element. Overlays the right edge of the editor canvas
   (z-index 20, same band as the lint panel) and uses the same token
   vocabulary so the two panels read as one family.
   ---------------------------------------------------------------- */
.bpm-shell .bpm-props-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    background: var(--bs-surface);
    border-left: 1px solid var(--bs-line);
    box-shadow: -2px 0 12px rgba(15, 32, 48, 0.08);
    z-index: 20;
    font-size: 13px;
}

/* 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-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;
}