/* MinTrack LIMS — Component Styles
   Extracted from inline styles for consistency and maintainability.
   Patterns used 20+ times across benchstamp.views.js */

/* ── Dashboard ── */
.bs-dash-view-all {
    font-size: var(--ui-text-xs, 0.7rem);
    color: var(--bs-brand, #2563eb);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}
.bs-dash-view-all:hover { text-decoration: underline; }

.bs-dash-alert-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
    font-size: var(--ui-text-xs, 0.7rem);
    color: var(--bs-text, #1e293b);
}
.bs-dash-alert-row:hover { background: var(--ui-gray-50, #f8fafc); border-radius: var(--ui-radius-sm, 4px); }
.bs-dash-alert-row i { flex-shrink: 0; width: 14px; text-align: center; }

/* ── Cards ── */
.bs-card {
    background: var(--bs-white, white);
    border-radius: var(--bs-radius-lg, 8px);
    padding: 0.75rem;
    box-shadow: var(--bs-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}

/* ── Section titles ── */
.bs-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-text);
    margin-bottom: 0.5rem;
}

.bs-section-title i {
    margin-right: 0.4rem;
}

/* ── KPI grids ── */
.bs-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bs-kpi-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.bs-kpi-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* ── 2/3-column layouts ── */
.bs-cols-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.bs-cols-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

/* ── Tag chips ── */
.bs-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    font-weight: 600;
}

/* ── Discussion messages ── */
.bs-msg-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--bs-border-light);
}

.bs-msg-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bs-brand-light);
    color: var(--bs-info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Work queue ── */
.bs-work-queue {
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--bs-brand-gradient, linear-gradient(135deg, #1e3a5f 0%, #0d1b2a 100%));
    color: white;
}

/* ── Compact stat card (mirrors _compactStat helper) ── */
.bs-stat {
    background: white;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bs-stat-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bs-stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bs-text);
    line-height: 1.1;
}

.bs-stat-label {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Staff grid ── */
.bs-staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}

.bs-staff-card {
    background: white;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid var(--bs-border-light);
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.bs-staff-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: var(--bs-border);
}

.bs-staff-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-purple-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bs-skill-badge {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 600;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* ── Resource section styling ── */
.bs-resource-metric {
    background: white;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid var(--bs-border-light);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.bs-resource-metric:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ── Demand heatmap ── */
.bs-demand-row {
    display: grid;
    gap: 1px;
    background: var(--bs-border);
}

.bs-demand-cell {
    padding: 0.15rem;
    font-size: 0.5rem;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.1s;
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--_cell-bg, white);
    color: var(--_cell-color, inherit);
}

.bs-demand-cell:hover {
    opacity: 0.7;
}

/* ── Bottleneck card ── */
.bs-bottleneck-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--bs-border-light);
    font-size: 0.65rem;
    cursor: pointer;
}

.bs-bottleneck-item:hover {
    background: var(--bs-bg-hover);
}

.bs-bottleneck-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    flex-shrink: 0;
}

/* ── Process tab: accordion badges ── */
.ctrl-badge {
    font-size: 10px; font-weight: 500; padding: 1px 6px;
    border-radius: 8px; background: rgba(0,0,0,0.08); color: #86868b;
}

/* ── Process tab: package status badges ── */
.pkg-badge {
    display: inline-block; padding: 1px 6px; border-radius: 8px;
    font-size: 0.65rem; color: white; font-weight: 500;
}
.pkg-badge.active { background: var(--bs-info); }
.pkg-badge.completed { background: var(--bs-success); }
.pkg-badge.pending { background: var(--bs-warning); }
.pkg-badge.paused { background: var(--bs-gray); }
.pkg-badge.cancelled { background: var(--bs-danger); }
.pkg-badge.split { background: var(--bs-purple); }

/* ── Process tab: next-action cards ── */
.next-action {
    margin-top: 0.75rem; padding: 0.6rem 0.75rem;
    border-radius: 6px; border: 1.5px dashed #ccc;
    background: var(--bs-bg); cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.next-action:hover {
    border-color: var(--bs-brand); background: var(--bs-brand-light);
    box-shadow: 0 1px 4px rgba(21,101,192,0.15);
}
.next-action .na-label {
    font-size: 0.7rem; color: var(--bs-text-muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 0.2rem;
}
.next-action .na-target {
    font-size: 0.85rem; font-weight: 600; color: var(--bs-brand);
    display: flex; align-items: center; gap: 0.35rem;
}
.next-action .na-target i { font-size: 0.7rem; }
.next-action .na-hint { font-size: 0.65rem; color: #aaa; margin-top: 0.15rem; }
.next-action.split-action { border-color: #CE93D8; background: var(--bs-purple-bg); }
.next-action.split-action:hover {
    border-color: var(--bs-purple); background: #E1BEE7;
    box-shadow: 0 1px 4px rgba(156,39,176,0.15);
}
.next-action.split-action .na-target { color: var(--bs-purple); }
.next-action-group { display: flex; flex-direction: column; gap: 0.4rem; }
.next-status {
    margin-top: 0.75rem; font-size: 0.75rem; padding: 0.5rem 0.75rem;
    border-radius: 6px; display: flex; align-items: center; gap: 0.35rem;
}

/* ── Process tab: graph container ── */
.graph-container { width: 100%; height: 900px; position: relative; border: 1px solid var(--bs-border-light); border-radius: 6px; }

/* ── Process tab: compact accordion lists ── */
.ui-accordion .ui-list-header { padding: 0.35rem 0.5rem; gap: 0.35rem; }
.ui-accordion .ui-list-search-input { padding: 0.25rem 0.5rem; font-size: 0.75rem; height: 28px; }
.ui-accordion .ui-btn-sm { padding: 0.2rem 0.5rem; font-size: 0.7rem; }
.ui-accordion .ui-list-item { padding: 0.3rem 0.5rem; gap: 0.35rem; }
.ui-accordion .ui-list-item-title { font-size: 0.8rem; }
.ui-accordion .ui-list-item-subtitle { font-size: 0.65rem; margin-top: 1px; }
.ui-accordion .ui-avatar-sm { width: 20px; height: 20px; font-size: 0.55rem; }
.ui-accordion .ui-tree-node { padding: 0.15rem 0; }
.ui-accordion .ui-tree-label { font-size: 0.8rem; padding: 0.2rem 0.3rem; }
.ui-accordion .ui-tree-badge { font-size: 0.55rem !important; padding: 0.1em 0.5em !important; }

/* Avatar variant colors */
.ui-avatar-success { background: var(--bs-success-bg); color: var(--bs-success); }
.ui-avatar-danger { background: var(--bs-danger-bg); color: var(--bs-danger); }
.ui-avatar-primary { background: var(--bs-brand-light); color: var(--bs-info); }
.ui-avatar-warning { background: var(--bs-warning-bg); color: var(--bs-warning); }
.ui-avatar-secondary { background: var(--bs-purple-bg); color: var(--bs-purple); }
.ui-avatar-info { background: #E0F7FA; color: var(--bs-info); }

/* ═══════════════════════════════════════════════════════════════════
   AUTO-GENERATED: Extracted inline styles (L3 upgrade)
   ═══════════════════════════════════════════════════════════════════ */

.bs-s1 { color:var(--bs-brand);font-size:0.75rem; }
.bs-s2 { display: flex; align-items: center; gap: 1rem; font-size: 0.75rem; color:var(--bs-text-secondary); }
.bs-s3 { font-size: 0.7rem; padding: 0.2rem 0.4rem; border: 1px solid var(--bs-border); border-radius:var(--bs-radius-sm); }
.bs-s4 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.bs-s5 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.25rem; font-size: 0.6rem; margin-bottom: 0.5rem; padding: 0.4rem; background:var(--bs-bg-hover); border-radius:var(--bs-radius); }
.bs-s6 { font-size: 0.6rem; color:var(--bs-text-secondary); margin-bottom: 0.5rem; }
.bs-s7 { margin-bottom: 0.35rem; }
.bs-s8 { font-size: 0.75rem; font-weight: 700; color:var(--bs-text); margin-bottom: 0.5rem; margin-top: 0.5rem; }
.bs-s9 { display: flex; justify-content: space-between; font-size: 0.65rem; font-weight: 700; color:var(--bs-text); padding-top: 0.4rem; border-top: 1px solid var(--bs-border); margin-top: 0.3rem; }
.bs-s10 { margin-bottom: 0.4rem; }
.bs-s11 { margin-top: 0.5rem; padding-top: 0.4rem; border-top: 1px solid #fecaca; }
.bs-s12 { font-size: 0.55rem; color:var(--bs-text-secondary); padding: 0.15rem 0; }
.bs-s13 { margin-top: 0.5rem; padding: 0.3rem; background:var(--bs-success-bg); border-radius:var(--bs-radius-sm); font-size: 0.6rem; color:var(--bs-success); text-align: center; }
.bs-s14 { font-size: 0.7rem; font-weight: 600; color:var(--bs-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.bs-s15 { display: flex; border-radius:var(--bs-radius); overflow: hidden; height: 32px; }
.bs-s16 { font-size: 0.75rem; font-weight: 700; color:var(--bs-text); margin-bottom: 0.75rem; }
.bs-s17 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.bs-s18 { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom:1px solid var(--bs-border-light); }
.bs-s19 { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.bs-s20 { font-size: 0.75rem; color:var(--bs-text-secondary); margin-bottom: 0.75rem; line-height: 1.4; }
.bs-s21 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.bs-s22 { display: flex; justify-content: space-between; padding: 0.25rem 0; border-bottom:1px solid var(--bs-border-light); font-size: 0.65rem; }
.bs-s23 { font-size: 0.65rem; font-weight: 600; color:var(--bs-text-secondary); margin-top: 0.5rem; margin-bottom: 0.25rem; }
.bs-s24 { font-size: 0.6rem; color:var(--bs-text-secondary); padding: 0.2rem 0; border-bottom:1px solid var(--bs-border-light); }
.bs-s25 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bs-s26 { display: grid; grid-template-columns: 2fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.bs-s27 { height: 600px; }
.bs-s28 { font-size: 0.7rem; color:var(--bs-text-muted); padding: 2rem; text-align: center; }
.bs-s29 { background: #fff3cd; border-left: 4px solid var(--bs-warning); border-radius:var(--bs-radius-sm); padding: 0.75rem; margin-bottom: 0.75rem; cursor: pointer; transition: background 0.15s; }
.bs-s30 { font-size: 0.65rem; font-weight: 700; color:var(--bs-brand); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.4rem; }
.bs-s31 { font-size: 0.6rem; color:var(--bs-text-secondary); margin-bottom: 0.15rem; }
.bs-s32 { width: 100%; font-size: 0.7rem; padding: 0.25rem 0.3rem; border: 1px solid var(--bs-border); border-radius:var(--bs-radius-sm); margin-bottom: 0.4rem; }
.bs-s33 { width: 100%; font-size: 0.7rem; padding: 0.25rem 0.3rem; border: 1px solid var(--bs-border); border-radius:var(--bs-radius-sm); }
.bs-s34 { margin-top:0.5rem;padding:0.35rem 0.5rem;background:var(--bs-danger-bg);border-radius:var(--bs-radius-sm);font-size:0.65rem;color:var(--bs-danger); }
.bs-s35 { font-size: 0.75rem; font-weight: 700; color:var(--bs-text); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; }
.bs-s36 { background: linear-gradient(135deg, #1e3a5f 0%, #1565C0 100%); border-radius:var(--bs-radius-lg); padding: 0.75rem; margin-bottom: 0.75rem; color: white; max-height: 320px; overflow-y: auto; }
.bs-s37 { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; background: rgba(255,255,255,0.1); border-radius:var(--bs-radius-sm); cursor: pointer; transition: background 0.15s; }
.bs-s38 { font-size: 0.6rem; text-align: center; opacity: 0.6; padding-top: 0.3rem; }
.bs-s39 { padding:0.2rem 0;border-bottom:1px solid var(--bs-border);display:flex;justify-content:space-between; }
.bs-s40 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.4rem;margin-bottom:0.5rem; }
.bs-s41 { padding:0.3rem 0;border-bottom:1px solid var(--bs-border-light);cursor:pointer;transition:background 0.15s; }
.bs-s42 { font-size:0.65rem;font-weight:700;color:var(--bs-text);margin-top:0.5rem;margin-bottom:0.25rem; }
.bs-s43 { font-size:0.6rem;color:var(--bs-text-secondary);padding:0.15rem 0;cursor:pointer;transition:background 0.15s; }
.bs-s44 { display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.4rem;border-bottom:1px solid var(--bs-border-light);cursor:pointer;transition:background 0.15s;border-radius:var(--bs-radius-sm); }
.bs-s45 { margin-top:0.75rem; }
.bs-s46 { font-size:0.65rem;color:var(--bs-text-secondary);padding:0.2rem 0;border-bottom:1px solid var(--bs-border-light);display:flex;justify-content:space-between; }
.bs-s47 { font-size: 1rem; font-weight: 700; color:var(--bs-brand); margin-bottom: 1rem; }
.bs-s48 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.bs-s49 { margin-top: 0.5rem; }
.bs-s50 { font-size: 0.7rem; padding: 0.4rem 1rem; }
.bs-s51 { padding:0.25rem 0;border-bottom:1px solid var(--bs-border);display:flex;justify-content:space-between;align-items:center;cursor:pointer; }
.bs-s52 { margin-top: 0.5rem; padding: 0.5rem; background:var(--bs-bg-hover); border-radius:var(--bs-radius); border:1px solid var(--bs-border); }
.bs-s53 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.bs-s54 { font-size: 0.85rem; font-weight: 700; color:var(--bs-text); }
.bs-s55 { font-size: 0.7rem; color:var(--bs-text-secondary); }
.bs-s56 { display: flex; gap: 1rem; margin-bottom: 0.5rem; font-size: 0.65rem; color: var(--bs-text-muted); }
.bs-s57 { display:flex;height:28px;border-radius:var(--bs-radius);overflow:auto;background:var(--bs-bg-subtle); }
.bs-s58 { display:flex;gap:1rem;margin-top:0.5rem;flex-wrap:wrap; }
.bs-s59 { display:flex;align-items:center;gap:0.3rem;font-size:0.65rem;color:var(--bs-text-dark); }
.bs-s60 { padding:0.4rem 0.5rem;background:var(--bs-warning-bg);border-radius:var(--bs-radius-sm);font-size:0.7rem;color:#92400e;margin-bottom:0.3rem;display:flex;align-items:center;gap:0.3rem;cursor:pointer;transition:background 0.15s; }
.bs-s61 { display:flex;align-items:center;gap:0.5rem;padding:0.35rem 0;border-bottom:1px solid var(--bs-border-light);font-size:0.7rem; }
.bs-s62 { flex: 1; min-height: 0; overflow-y: auto; }
.bs-s63 { margin-top:0.3rem; }
.bs-s64 { font-size:0.65rem;background:var(--bs-brand);color:#fff;border:none; }
.bs-s65 { margin-top:0.5rem; }
.bs-s66 { color:var(--bs-text-muted); font-size:0.8rem; padding:2rem; text-align:center; }
.bs-s67 { margin-top:0.75rem;display:inline-block;padding:0.4rem 1rem;background:var(--bs-brand);color:white;border-radius:var(--bs-radius-sm);font-size:0.7rem;cursor:pointer;font-weight:600; }
.bs-s68 { display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:1px solid var(--bs-border-light); }
.bs-s69 { display:flex; gap:1rem; margin-top:0.75rem; }
.bs-s70 { flex:0 0 280px; }
.bs-s71 { font-size:0.8rem; font-weight:600; color:var(--bs-text); margin-bottom:0.5rem; }
.bs-s72 { flex:1; min-width:0; }
.bs-s73 { font-size:0.7rem; color:var(--bs-text-muted); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.25rem; flex-wrap:wrap; }
.bs-s74 { color:var(--bs-brand); text-decoration:none; }
.bs-s75 { font-size:0.7rem; color:var(--bs-text-muted); margin-left:auto; }
.bs-s76 { display:flex; align-items:center; gap:0.5rem; background:var(--bs-bg-subtle); border-radius:var(--bs-radius); padding:0.5rem 0.75rem; margin-bottom:1rem; font-size:0.8rem; }
.bs-s77 { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:0.75rem; }
.bs-s78 { display:flex; align-items:center; gap:0.5rem; padding:0.5rem; background:var(--bs-bg); border-radius:var(--bs-radius); border:1px solid var(--bs-border-light); }
.bs-s79 { flex:0 0 100px; font-size:0.8rem; font-weight:600; color:var(--bs-text); }
.bs-s80 { flex:1; padding:0.3rem 0.5rem; border:1px solid var(--bs-border); border-radius:var(--bs-radius-sm); font-size:0.8rem; }
.bs-s81 { flex:0 0 80px; padding:0.3rem 0.5rem; border:1px solid var(--bs-border); border-radius:var(--bs-radius-sm); font-size:0.8rem; text-align:right; }
.bs-s82 { font-size:0.75rem; color:var(--bs-text-muted); flex:0 0 25px; }
.bs-s83 { font-size:0.8rem; padding:0.5rem 0.75rem; border-radius:var(--bs-radius); margin-bottom:0.75rem; }
.bs-s84 { width:100%; padding:0.5rem; font-size:0.85rem; background:var(--bs-brand); color:white; border:none; border-radius:var(--bs-radius-sm); cursor:pointer; font-weight:500; }
.bs-s85 { margin-top: 1rem; background: white; border-radius:var(--bs-radius-lg); padding: 0.75rem; box-shadow:var(--bs-shadow-sm); }
.bs-s86 { padding: 0.15rem; }
.bs-s87 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.bs-s88 { padding:0.2rem 0;border-bottom:1px solid var(--bs-border);cursor:pointer;display:flex;justify-content:space-between; }
.bs-s89 { width: 100%; padding: 0.4rem; font-size: 0.7rem; font-weight: 600; color: white; background: var(--bs-brand); border: none; border-radius:var(--bs-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-bottom: 0.5rem; }
.bs-s90 { font-size: 0.8rem; font-weight: 700; color:var(--bs-text); margin-bottom: 0.4rem; }
.bs-s91 { display: flex; justify-content: space-between; padding: 0.2rem 0; border-bottom:1px solid var(--bs-border-light); }
.bs-s92 { width: 100%; padding: 0.4rem; font-size: 0.7rem; font-weight: 600; color: white; background: var(--bs-purple); border: none; border-radius:var(--bs-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-bottom: 0.5rem; }
.bs-s93 { font-size:0.6rem;color:var(--bs-text-muted);padding-top:0.3rem; }
.bs-s94 { font-weight:600;padding:0.2rem 0; }
.bs-s95 { padding:0.15rem 0 0.15rem 0.5rem;border-bottom:1px solid var(--bs-border);cursor:pointer; }
.bs-s96 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
.bs-s97 { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom:1px solid var(--bs-border-light); cursor: pointer; transition: background 0.1s; }
.bs-s98 { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-bottom:1px solid var(--bs-border-light); cursor: pointer; transition: background 0.1s; }
.bs-s99 { display: grid; grid-template-columns: 60px 1fr 90px 80px 80px; gap: 0.3rem; padding: 0.3rem 0; border-bottom: 2px solid var(--bs-border); font-size: 0.55rem; font-weight: 600; color:var(--bs-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.bs-s100 { display: grid; grid-template-columns: 60px 1fr 90px 80px 80px; gap: 0.3rem; padding: 0.3rem 0; border-bottom:1px solid var(--bs-border-light); align-items: center; cursor: pointer; transition: background 0.1s; }
.bs-s101 { font-size:0.6rem;font-weight:600;color:var(--bs-danger);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:0.25rem; }
.bs-s102 { font-size:0.6rem;font-weight:600;color:var(--bs-warning);text-transform:uppercase;letter-spacing:0.03em;margin-top:0.4rem;margin-bottom:0.25rem; }
.bs-s103 { font-size:0.6rem;font-weight:600;color:var(--bs-purple);text-transform:uppercase;letter-spacing:0.03em;margin-top:0.4rem;margin-bottom:0.25rem; }
.bs-s104 { font-size:0.65rem;color:var(--bs-success);padding:0.5rem;text-align:center; }
.bs-s105 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
.bs-s106 { margin-left:auto;font-size:0.45rem;opacity:0.6; }
.bs-s107 { display:flex;justify-content:space-between;padding:0.15rem 0;border-bottom:1px solid var(--bs-border-light); }
.bs-s108 { background:white;border-radius:var(--bs-radius);box-shadow:0 1px 2px rgba(0,0,0,0.06);padding:0.5rem; }
.bs-s109 { display:flex;align-items:center;gap:0.4rem;margin-bottom:0.3rem; }
.bs-s110 { font-size:0.5rem;color:var(--bs-text-muted);margin-top:0.2rem; }
.bs-s111 { font-size:0.58rem;color:var(--bs-text-secondary);padding:0.2rem 0;line-height:1.4; }
.bs-s112 { margin-top:0.4rem; }
.bs-s113 { background: var(--bs-brand); color: white; padding: 0.75rem; border-radius:var(--bs-radius); margin-bottom: 0.75rem; }
.bs-s114 { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; font-size: 0.7rem; color:var(--bs-text-secondary); cursor: pointer; border-radius:var(--bs-radius-sm); transition: background 0.15s; }
.bs-s115 { font-size: 0.85rem; font-weight: 700; color:var(--bs-brand); margin-bottom: 0.75rem; }
.bs-s116 { margin-top:1rem; }
.bs-s117 { font-size:0.7rem;color:var(--bs-text-dark);margin-bottom:0.4rem; }
.bs-s118 { font-size:0.65rem; }
.bs-s119 { display:flex;align-items:center;gap:0.3rem;padding:0.2rem 0;border-top:1px solid #fecaca40; }
.bs-s120 { background:var(--bs-success-bg);border:1px solid #bbf7d0;border-radius:var(--bs-radius-lg);padding:0.6rem; }
.bs-s121 { display:flex;align-items:center;gap:0.4rem;font-size:0.75rem;font-weight:700;color:var(--bs-success);margin-bottom:0.3rem; }
.bs-s122 { font-size:0.7rem;color:var(--bs-text-dark); }
.bs-s123 { padding:0.15rem 0; }
.bs-s124 { font-size:0.6rem;color:var(--bs-text-muted);margin-top:0.3rem;font-style:italic;border-top:1px solid #bbf7d040;padding-top:0.3rem; }
.bs-s125 { display:grid;grid-template-columns:1fr 2fr;gap:1rem; }
.bs-s126 { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.bs-s127 { font-size:0.85rem;font-weight:700;color:var(--bs-brand);margin-bottom:0.75rem; }
.bs-s128 { font-size:0.7rem;color:var(--bs-text-secondary);margin-bottom:0.75rem; }
.bs-s129 { font-size:0.75rem;margin-bottom:0.5rem; }
.bs-s130 { text-align:center;margin:0.75rem 0;cursor:pointer; }
.bs-s131 { font-size:0.75rem;font-weight:600;color:var(--bs-text);margin-top:0.75rem;margin-bottom:0.4rem;border-top:1px solid var(--bs-border);padding-top:0.5rem; }
.bs-s132 { font-size:0.7rem; }
.bs-s133 { display:flex;justify-content:space-between;padding:0.2rem 0;border-bottom:1px solid var(--bs-border-light); }
.bs-s134 { font-size:0.7rem;color:var(--bs-text-muted);margin-top:0.75rem;border-top:1px solid var(--bs-border);padding-top:0.5rem; }
.bs-s135 { font-size:0.7rem;color:var(--bs-text-secondary);margin-bottom:0.75rem;line-height:1.4; }
.bs-s136 { width:100%;border-collapse:collapse;font-size:0.75rem; }
.bs-s137 { padding:0.4rem 0.5rem;color:var(--bs-text-muted);font-family:monospace;font-size:0.65rem; }
.bs-s138 { padding:0.3rem 0.5rem; }
.bs-s139 { width:100%;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm);padding:0.3rem 0.5rem;font-size:0.75rem;outline:none;transition:border-color 0.15s; }
.bs-s140 { padding:0.3rem 0.5rem;text-align:center; }
.bs-s141 { background:var(--bs-brand);color:white;border:none;border-radius:var(--bs-radius-sm);padding:0.25rem 0.5rem;font-size:0.6rem;cursor:pointer; }
.bs-s142 { margin-top:0.75rem;display:flex;justify-content:flex-end; }
.bs-s143 { background:var(--bs-brand);color:white;border:none;border-radius:var(--bs-radius);padding:0.4rem 1rem;font-size:0.7rem;cursor:pointer;font-weight:600; }
.bs-s144 { background: white; border-radius:var(--bs-radius); overflow: visible; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.bs-s145 { width:100%;display:flex;align-items:center;gap:0.4rem;padding:0.35rem 0.5rem;border:none;background:var(--bs-bg-hover);color:var(--bs-brand);font-size:0.65rem;font-weight:600;cursor:pointer;border-radius:var(--bs-radius) 6px 0 0;border-bottom:1px solid var(--bs-border);transition:background 0.15s; }
.bs-s146 { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; background: var(--bs-brand); color: white; font-size: 0.7rem; font-weight: 600; }
.bs-s147 { padding: 0.25rem; }
.bs-s148 { border:none;background:none;color:var(--bs-brand);cursor:pointer;font-size:0.6rem;padding:0.15rem 0.3rem;border-radius:3px; }
.bs-s149 { background: white; border-radius:var(--bs-radius); overflow: visible; box-shadow: 0 1px 2px rgba(0,0,0,0.06); margin-top: 0.25rem; }
.bs-s150 { background: none; border: none; color: white; cursor: pointer; font-size: 0.65rem; opacity: 0.8; padding: 0; }
.bs-s151 { display: none; padding: 0.3rem 0.5rem; background: #f0fdfa; border-top: 1px solid #e0f2f1; font-size: 0.65rem; color: #0d9488; }
.bs-s152 { margin-bottom: 0.4rem; display: none; }
.bs-s153 { display: none; width: 100%; padding: 0.35rem; font-size: 0.7rem; font-weight: 600; border-radius:var(--bs-radius-sm); cursor: pointer; border: 1px solid #0d9488; background: #0d9488; color: white; transition: all 0.15s; }
.bs-s154 { display: flex; gap: 0.25rem; }
.bs-s155 { border:none;background:var(--bs-danger);color:#fff;font-size:0.6rem;font-weight:600;padding:0.2rem 0.5rem;border-radius:3px;cursor:pointer; }
.bs-s156 { display:flex;flex-wrap:wrap;gap:0.3rem;margin-bottom:0.4rem;min-height:0; }
.bs-s157 { cursor:pointer; }
.bs-s158 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid var(--bs-brand);background:var(--bs-brand)15;color:var(--bs-brand);font-weight:600;transition:background 0.15s;margin-top:0.35rem; }
.bs-s159 { display:flex;align-items:baseline;justify-content:space-between;padding:0.2rem 0;font-size:0.75rem;gap:0.5rem; }
.bs-s160 { color:var(--bs-text-secondary);flex-shrink:0; }
.bs-s161 { font-weight:600;color:var(--bs-text-dark);text-align:right;overflow-wrap:break-word;word-break:break-word;min-width:0; }
.bs-s162 { border-top:1px solid var(--bs-border);margin-top:0.5rem;padding-top:0.4rem; }
.bs-s163 { font-size:0.65rem;color:var(--bs-purple);font-weight:600;display:flex;align-items:center;gap:0.25rem;text-decoration:none; }
.bs-s164 { border:none;background:var(--bs-purple);color:white;border-radius:var(--bs-radius-sm);padding:0.15rem 0.4rem;font-size:0.6rem;cursor:pointer;display:flex;align-items:center;gap:0.2rem; }
.bs-s165 { display:flex;align-items:center;gap:0.4rem;padding:0.3rem 0.25rem;border-bottom:1px solid var(--bs-border-light);font-size:0.7rem;cursor:pointer;transition:background 0.1s; }
.bs-s166 { font-size:0.6rem;color:var(--bs-text-faint); }
.bs-s167 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid var(--bs-danger);background:color-mix(in srgb, var(--bs-danger) 8%, transparent);color:var(--bs-danger);font-weight:600;transition:background 0.15s;margin-top:0.35rem; }
.bs-s168 { display:flex;align-items:center;gap:0.4rem;margin-top:0.5rem;font-size:0.7rem;color:var(--bs-brand);font-weight:600; }
.bs-s169 { margin-top:0.4rem;padding:0.4rem;background:#f0f9ff;border-radius:var(--bs-radius);border:1px solid #bfdbfe; }
.bs-s170 { font-size:0.6rem;font-weight:700;color:#1e40af;margin-bottom:0.25rem; }
.bs-s171 { display:flex;gap:0.35rem;margin-top:0.5rem;flex-wrap:wrap; }
.bs-s172 { border-top:1px solid var(--bs-border);margin:0.5rem 0 0.4rem;padding-top:0.4rem; }
.bs-s173 { font-size:0.65rem;font-weight:700;color:var(--bs-info);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.3rem;display:flex;align-items:center;gap:0.3rem; }
.bs-s174 { display:flex;gap:0.35rem;flex-wrap:wrap; }
.bs-s175 { font-size:0.7rem;background:#e65100;color:#fff;border:none; }
.bs-s176 { font-size:0.7rem;background:#9C27B0;color:#fff;border:none; }
.bs-s177 { font-size:0.65rem;color:var(--bs-text-muted);margin-bottom:0.4rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em; }
.bs-s178 { margin-bottom:0.3rem; }
.bs-s179 { font-size:0.55rem;width:0.7rem;text-align:center;transition:transform 0.15s; }
.bs-s180 { display:flex;gap:1rem;align-items:flex-start; }
.bs-s181 { flex-shrink:0;cursor:pointer; }
.bs-s182 { flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0.15rem 1.5rem; }
.bs-s183 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid var(--bs-brand);background:var(--bs-brand)15;color:var(--bs-brand);font-weight:600;transition:background 0.15s;margin-top:0.4rem; }
.bs-s184 { background:white;border-radius:var(--bs-radius);box-shadow:var(--bs-shadow-sm);padding:0.6rem;margin-bottom:0.5rem; }
.bs-s185 { margin-bottom:0.4rem; }
.bs-s186 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid var(--bs-purple);background:var(--bs-purple)15;color:var(--bs-purple);font-weight:600;transition:background 0.15s;margin-bottom:0.4rem; }
.bs-s187 { padding:1rem;display:flex;flex-direction:column;gap:0.5rem; }
.bs-s188 { border-left:2px solid var(--bs-border);margin-left:0.5rem;padding-left:0.75rem; }
.bs-s189 { position:relative;padding:0.25rem 0;font-size:0.65rem;color:var(--bs-text-secondary); }
.bs-s190 { display: flex; gap: 1rem; padding: 0.4rem 0.5rem; margin-bottom: 0.5rem; font-size: 0.65rem; color:var(--bs-text-secondary); }
.bs-s191 { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; background: var(--bs-purple); color: white; font-size: 0.7rem; font-weight: 600; }
.bs-s192 { padding: 0.25rem; max-height: 200px; overflow: auto; }
.bs-s193 { display:flex;gap:0.2rem;padding:0.15rem 0.4rem 0.3rem; }
.bs-s194 { font-size:0.5rem;padding:0.1rem 0.3rem;border-radius:3px;cursor:pointer;border:1px solid var(--bs-border);background:white;color:var(--bs-text-secondary); }
.bs-s195 { width:100%;border-collapse:collapse;font-size:0.65rem; }
.bs-s196 { padding:0.3rem;text-align:left;border-bottom:2px solid var(--bs-border);color:var(--bs-text-secondary); }
.bs-s197 { padding:0.3rem;text-align:center;border-bottom:2px solid var(--bs-border);color:var(--bs-text-secondary);white-space:nowrap; }
.bs-s198 { padding:0.3rem;border-bottom:1px solid var(--bs-border-light);font-weight:500; }
.bs-s199 { padding:0.3rem;text-align:center;border-bottom:1px solid var(--bs-border-light);cursor:pointer;transition:background 0.1s; }
.bs-s200 { color:var(--bs-danger);font-size:0.5rem; }
.bs-s201 { display:flex;gap:0.75rem;margin-top:0.5rem;font-size:0.6rem; }
.bs-s202 { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.bs-s203 { font-size: 0.65rem; font-weight: 600; color:var(--bs-text-secondary); }
.bs-s204 { font-size:0.65rem;padding:0.25rem 0.6rem;border:1px solid color-mix(in srgb, var(--bs-success) 25%, transparent);border-radius:var(--bs-radius-sm);background:color-mix(in srgb, var(--bs-success) 6%, transparent);color:var(--bs-success);cursor:pointer;font-weight:600;margin-left:auto;transition:background 0.15s; }
.bs-s205 { display:flex;justify-content:flex-end;margin-top:0.5rem; }
.bs-s206 { margin-top:0.75rem;padding-top:0.5rem;border-top:1px solid var(--bs-border); }
.bs-s207 { font-size: 1rem; font-weight: 700; color:var(--bs-brand); }
.bs-s208 { font-size: 0.65rem; padding: 0.25rem 0.6rem; border: 1px solid var(--bs-border); border-radius:var(--bs-radius-sm); background: white; cursor: pointer; color:var(--bs-text-secondary); display: flex; align-items: center; gap: 0.3rem; }
.bs-s209 { display:flex;gap:0.5rem;margin-bottom:0.75rem; }
.bs-s210 { font-size:0.7rem;color:var(--bs-success);padding:1rem;text-align:center;display:none; }
.bs-s211 { display:flex;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;align-items:center; }
.bs-s212 { font-size:0.7rem;padding:0.25rem 0.5rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm); }
.bs-s213 { font-size:0.7rem;padding:0.25rem 0.5rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm);flex:1;min-width:120px; }
.bs-s214 { font-size:0.65rem;padding:0.25rem 0.5rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm);background:var(--bs-bg-hover);cursor:pointer; }
.bs-s215 { margin-top:1rem;display:flex;flex-direction:column;gap:0.75rem; }
.bs-s216 { font-size:0.7rem;color:var(--bs-text-dark);display:grid;grid-template-columns:1fr 1fr;gap:0.3rem 1rem; }
.bs-s217 { grid-column:1/-1;margin-top:0.3rem;padding:0.2rem 0.4rem;background:var(--bs-warning-bg);border-radius:var(--bs-radius-sm);color:#92400e;font-size:0.65rem;font-weight:600; }
.bs-s218 { background:#f0f9ff;border:1px solid #bae6fd;border-radius:var(--bs-radius-lg);padding:0.75rem; }
.bs-s219 { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem; }
.bs-s220 { width:100%;border-collapse:collapse;font-size:0.65rem;margin-top:0.3rem; }
.bs-s221 { background:#fefce8;border:1px solid #fde68a;border-radius:var(--bs-radius-lg);padding:0.75rem; }
.bs-s222 { background:#faf5ff;border:1px solid #e9d5ff;border-radius:var(--bs-radius-lg);padding:0.75rem; }
.bs-s223 { display:inline-flex;align-items:center;gap:0.4rem;padding:0.3rem 0.6rem;background:#e0f2fe;border:1px solid #7dd3fc;border-radius:var(--bs-radius);font-size:0.7rem;color:#0369a1;font-weight:600;cursor:pointer; }
.bs-s224 { font-size:0.75rem;color:var(--bs-text-dark);padding:0.5rem;background:var(--bs-bg-subtle);border-radius:var(--bs-radius); }
.bs-s225 { font-size:0.7rem;font-weight:700;color:var(--bs-brand);text-transform:uppercase;letter-spacing:0.04em; }
.bs-s226 { font-size:0.7rem;font-weight:600;color:var(--bs-text-dark); }
.bs-s227 { font-size:0.75rem;padding:0.3rem 0.5rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm);background:white; }
.bs-s228 { font-size:0.75rem;padding:0.3rem 0.5rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm); }
.bs-s229 { font-size:0.7rem;font-weight:700;color:var(--bs-brand);text-transform:uppercase;letter-spacing:0.04em;margin-top:0.25rem; }
.bs-s230 { font-size:0.65rem;color:var(--bs-text-muted);margin-top:0.25rem; }
.bs-s231 { font-family:serif; }
.bs-s232 { margin-bottom:0.75rem; }
.bs-s233 { width:100%;padding:0.4rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius);font-size:0.8rem; }
.bs-s234 { max-height:250px;overflow:auto; }
.bs-s235 { display:flex;align-items:center;gap:0.4rem;padding:0.25rem 0;border-bottom:1px solid var(--bs-border-light);font-size:0.7rem; }
.bs-s236 { font-size:0.6rem;color:var(--bs-danger);padding:0.2rem 0.4rem;background:var(--bs-danger-bg);border-radius:var(--bs-radius-sm);display:none;margin-top:0.25rem; }
.bs-s237 { font-size:0.65rem;padding:0.2rem 0.5rem;background:var(--bs-border);border:none;border-radius:var(--bs-radius-sm);cursor:pointer;align-self:flex-start; }
.bs-s238 { border-top:1px solid var(--bs-border);margin:0.5rem 0; }
.bs-s239 { font-size: 0.7rem; font-weight: 700; color:var(--bs-text); margin-bottom: 0.4rem; display:flex; align-items:center; gap:0.3rem; }
.bs-s240 { font-size: 0.65rem; color:var(--bs-text-secondary); }
.bs-s241 { margin-top:0.5rem;background:var(--bs-bg-subtle);border-radius:var(--bs-radius-sm);height:16px;position:relative;display:flex; }
.bs-s242 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid var(--bs-warning);background:color-mix(in srgb, var(--bs-warning) 8%, transparent);color:#92400e;font-weight:600;transition:background 0.15s;margin-top:0.35rem; }
.bs-s243 { font-size:0.75rem; }
.bs-s244 { width:100%;padding:0.4rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm);font-size:0.75rem;margin-bottom:0.5rem; }
.bs-s245 { width:100%;padding:0.4rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm);font-size:0.75rem;resize:vertical; }
.bs-s246 { padding:0.6rem 0.75rem;border-radius:var(--bs-radius);font-size:0.8rem;font-weight:600;margin-bottom:0.5rem; }
.bs-s247 { display:flex;align-items:center;gap:0.4rem;padding:0.4rem 0.75rem;background:white;border-radius:var(--bs-radius);box-shadow:0 1px 2px rgba(0,0,0,0.06);margin-bottom:0.5rem;font-size:0.75rem;color:var(--bs-text-dark); }
.bs-s248 { position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity 0.15s;border-radius:var(--bs-radius-lg); }
.bs-s249 { padding:0.75rem 1rem;font-size:1.5rem;font-weight:700;text-align:center;min-height:3rem;display:flex;align-items:center;justify-content:center;border-radius:var(--bs-radius-lg);background:var(--bs-bg-hover);color:var(--bs-text-muted); }
.bs-s250 { flex:1;min-height:200px;margin:0.5rem 0;border-radius:var(--bs-radius-lg);overflow:hidden;background:#111;position:relative; }
.bs-s251 { width:100%;height:100%; }
.bs-s252 { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--bs-text-faint);font-size:0.85rem; }
.bs-s253 { max-height:120px;overflow:auto;font-size:0.7rem;color:var(--bs-text-muted);padding:0.25rem 0; }
.bs-s254 { font-size: 0.75rem; font-weight: 700; color:var(--bs-text); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.3rem; }
.bs-s255 { display: flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0; border-bottom:1px solid var(--bs-border-light); }
.bs-s256 { font-size:0.6rem;font-weight:700;color:var(--bs-text-secondary);margin-top:0.5rem;margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.03em; }
.bs-s257 { display:flex;align-items:center;gap:0.4rem;padding:0.15rem 0;font-size:0.6rem; }
.bs-s258 { display:flex;gap:1rem;padding:0.3rem 0;margin-bottom:0.5rem;font-size:0.6rem;color:var(--bs-text-secondary); }
.bs-s259 { display:flex;margin-left:160px;margin-bottom:0.25rem;position:relative;height:20px; }
.bs-s260 { display:flex;align-items:stretch;margin-bottom:2px;min-height:22px; }
.bs-s261 { width:160px;flex-shrink:0;font-size:0.6rem;font-weight:600;color:var(--bs-text);padding:0.2rem 0.4rem;display:flex;align-items:center;gap:0.3rem;background:var(--bs-bg-hover);border-radius:var(--bs-radius-sm) 0 0 4px; }
.bs-s262 { flex:1;position:relative;background:var(--bs-bg);border-radius:0 4px 4px 0;border-left:1px solid var(--bs-border); }
.bs-s263 { font-size:1rem;font-weight:700;color:var(--bs-brand);margin-bottom:0.75rem; }
.bs-s264 { display:flex;gap:0.75rem;font-size:0.6rem;color:var(--bs-text-secondary);margin-bottom:0.5rem; }
.bs-s265 { background:white;border-radius:var(--bs-radius-lg);box-shadow:var(--bs-shadow-sm);overflow-x:auto; }
.bs-schedule-grid-row { display:grid;grid-template-columns:140px repeat(var(--_grid-cols, 14), 1fr);gap:1px;background:var(--bs-border); }
.bs-schedule-grid-header { border-radius:var(--bs-radius-lg) 8px 0 0; }
.bs-schedule-grid-last { border-radius:0 0 8px 8px; }
.bs-s266 { background:var(--bs-bg-hover);padding:0.3rem;font-size:0.6rem;font-weight:700;color:var(--bs-text-secondary); }
.bs-s267 { background:white;padding:0.25rem 0.4rem;font-size:0.6rem;font-weight:500;color:var(--bs-text);display:flex;align-items:center; }
.bs-s268 { font-size:0.8rem;font-weight:700;color:var(--bs-text);margin-top:1rem;margin-bottom:0.5rem; }
.bs-s269 { font-size:0.65rem;color:var(--bs-text-muted);padding:0.5rem; }
.bs-s270 { display:grid;grid-template-columns:1fr 1fr;gap:0.5rem; }
.bs-s271 { font-size:0.8rem;font-weight:700;color:var(--bs-text);margin-top:1.25rem;margin-bottom:0.5rem; }
.bs-s272 { display:flex;gap:0.75rem;font-size:0.55rem;color:var(--bs-text-secondary);margin-bottom:0.4rem; }
.bs-s273 { background:white;border-radius:var(--bs-radius-lg);box-shadow:var(--bs-shadow-sm);overflow-x:auto;margin-bottom:1rem; }
.bs-s274 { padding:0.4rem;margin-top:0.5rem;text-align:center;font-size:0.65rem;color:var(--bs-brand);cursor:pointer;border:1px dashed var(--bs-brand);border-radius:var(--bs-radius); }
.bs-s275 { font-size:0.8rem;font-weight:700;color:var(--bs-text);margin-bottom:0.5rem; }
.bs-s276 { background:var(--bs-bg-hover);border-radius:var(--bs-radius-lg);padding:0.75rem;border:1px solid var(--bs-border); }
.bs-s277 { font-size:0.75rem;font-weight:700;color:var(--bs-text);margin-bottom:0.5rem;display:flex;align-items:center;gap:0.3rem; }
.bs-s278 { display:flex;align-items:center;gap:0.4rem;padding:0.3rem 0;border-bottom:1px solid var(--bs-border-light);cursor:pointer;transition:background 0.1s; }
.bs-s279 { display:flex;gap:0.4rem;margin-top:0.4rem;align-items:stretch; }
.bs-s280 { flex:1;padding:0.3rem;text-align:center;font-size:0.6rem;color:var(--bs-brand);cursor:pointer;border:1px dashed var(--bs-text-muted);border-radius:var(--bs-radius-sm);display:flex;align-items:center;justify-content:center;gap:0.2rem;transition:background 0.1s; }
.bs-s281 { flex:1;padding:0.3rem;text-align:center;font-size:0.6rem;color:var(--bs-purple);cursor:pointer;border:1px dashed var(--bs-text-muted);border-radius:var(--bs-radius-sm);display:flex;align-items:center;justify-content:center;gap:0.2rem;transition:background 0.1s; }
.bs-s282 { background:white;border:2px solid var(--bs-text);border-radius:var(--bs-radius-sm);padding:0.5rem;max-width:280px;font-family:monospace; }
.bs-s283 { display:flex;gap:0.5rem;align-items:flex-start; }
.bs-s284 { flex-shrink:0; }
.bs-s285 { flex:1; }
.bs-s286 { margin-top:0.3rem;padding-top:0.2rem;border-top:1px dashed var(--bs-text-muted);display:flex;justify-content:space-between;font-size:0.45rem;color:var(--bs-text-muted); }
.bs-s287 { background:white;border-radius:var(--bs-radius-lg);box-shadow:var(--bs-shadow-sm);overflow:auto; }
.bs-s288 { display:grid;grid-template-columns:1fr repeat(4, 80px);gap:1px;background:var(--bs-border); }
.bs-s289 { background:var(--bs-bg-hover);padding:0.35rem 0.5rem;font-size:0.6rem;font-weight:700;color:var(--bs-text-secondary);text-align:center; }
.bs-s290 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;margin-bottom:0.75rem; }
.bs-s291 { display:grid;grid-template-columns:1fr 100px 100px 60px;gap:0.5rem;padding:0.3rem 0;border-bottom:1px solid var(--bs-border-light);font-size:0.6rem;align-items:center; }
.bs-s292 { display:grid;grid-template-columns:50px 1fr 80px;gap:0.5rem;padding:0.3rem 0;border-bottom:1px solid var(--bs-border-light);font-size:0.6rem;align-items:center; }
.bs-s293 { font-size:0.75rem;font-weight:700;color:var(--bs-text);margin-top:1rem;margin-bottom:0.5rem; }
.bs-s376 { display: flex; gap: 1rem; flex: 1; min-height: 0; }
.bs-s377 { flex: 0 0 auto; max-width: 280px; display: flex; flex-direction: column; gap: 0.5rem; }
.bs-s378 { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bs-s379 { background: white; border-radius:var(--bs-radius); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.bs-s380 { margin-left: auto; background: rgba(255,255,255,0.25); padding: 0.1rem 0.35rem; border-radius:var(--bs-radius-lg); font-size: 0.6rem; }
.bs-s381 { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; }
.bs-s382 { width:100%;min-height:250px;border-radius:var(--bs-radius);overflow:hidden;background:#000; }
.bs-s383 { font-size:0.75rem;color:var(--bs-text-secondary);text-align:center;min-height:1.5rem; }
.bs-s384 { display:flex;gap:0.5rem;align-items:center; }
.bs-s385 { flex:1;padding:0.4rem 0.6rem;font-size:0.75rem;border:1px solid var(--bs-border);border-radius:var(--bs-radius-sm); }
.bs-s386 { padding:0.4rem 0.75rem;font-size:0.75rem; }
.bs-s387 { display:flex;align-items:center;gap:0.4rem;padding:0.5rem 0.75rem;background:#f0f9ff;border-radius:var(--bs-radius);font-size:0.75rem;color:var(--bs-brand); }
.bs-s388 { max-height:250px;overflow:auto;border:1px solid var(--bs-border);border-radius:var(--bs-radius);padding:0.25rem; }
.bs-s389 { font-size:0.65rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid #6b7280;background:var(--bs-bg-hover);color:var(--bs-text-dark);font-weight:600; }
.bs-s390 { font-size:0.7rem;color:var(--bs-text-secondary); }
.bs-s391 { display:none; }
.bs-s392 { width:100%;min-height:200px;border-radius:var(--bs-radius);overflow:hidden;background:#000; }
.bs-s393 { font-size:0.75rem;color:var(--bs-text-dark);min-height:1.5rem;padding:0.35rem 0.75rem;background:var(--bs-bg-hover);border-radius:var(--bs-radius); }
.bs-s394 { font-size:0.75rem;padding:0.45rem 1rem;border-radius:var(--bs-radius);cursor:pointer;border:none;background:var(--bs-brand);color:white;font-weight:600;opacity:0.5;pointer-events:none; }
.bs-s395 { display:flex;gap:0.75rem;flex:1;min-height:0; }
.bs-s396 { flex:0 0 auto;max-width:250px; }
.bs-s397 { font-size:0.75rem;font-weight:700;color:var(--bs-brand);margin-bottom:0.4rem; }
.bs-s398 { flex:1;min-width:0; }
.bs-s399 { font-size:0.65rem;padding:0.3rem 0.6rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid var(--bs-success);background:color-mix(in srgb, var(--bs-success) 8%, transparent);color:var(--bs-success);font-weight:600;transition:background 0.15s; }
.bs-s400 { padding:1rem; }
.bs-s401 { display:grid;grid-template-columns:80px 1fr 80px 60px 100px 80px 100px;gap:0.3rem;padding:0.3rem 0.4rem;background:var(--bs-bg-subtle);border-radius:var(--bs-radius-sm);font-weight:600;color:var(--bs-text-secondary);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.03em; }
.bs-s402 { display:flex;gap:0.2rem; }
.bs-s403 { grid-column:1/-1;font-size:0.55rem;color:var(--bs-danger);padding:0.15rem 0.4rem;background:var(--bs-danger-bg);font-style:italic; }
.bs-bg1 { background: #fef3c7; }
.bs-bg2 { background: #fff3cd; }
.bs-bg3 { background: rgba(255,255,255,0.2); }
.bs-bg4 { background: rgba(255,255,255,0.1); }
.bs-bg5 { background: #fde68a; }
.bs-bg6 { background: var(--bs-success-bg); }
.bs-bg7 { background: var(--bs-danger-bg); }
.bs-bg8 { background: var(--bs-warning-bg); }
.bs-bg9 { background: var(--bs-bg-subtle); }
.bs-bg10 { background: var(--bs-bg-hover); }
.bs-bg11 { background: var(--bs-brand-light); }
.bs-bg12 { background: var(--bs-success); }
.bs-bg13 { background: var(--bs-brand); }
.bs-bg14 { background: #e8f0fe; }
.bs-bg15 { background: white; }
.bs-bg16 { background: #0f766e; }
.bs-bg17 { background: #0d9488; }
.bs-bg18 { background: var(--bs-brand)30; }
.bs-bg19 { background: var(--bs-brand)15; }
.bs-bg20 { background: #fef2f2; }
.bs-bg21 { background: transparent; }
.bs-bg22 { background: color-mix(in srgb, var(--bs-danger) 19%, transparent); }
.bs-bg23 { background: color-mix(in srgb, var(--bs-danger) 8%, transparent); }
.bs-bg24 { background: var(--bs-purple)30; }
.bs-bg25 { background: var(--bs-purple)15; }
.bs-bg26 { background: color-mix(in srgb, var(--bs-success) 12%, transparent); }
.bs-bg27 { background: color-mix(in srgb, var(--bs-success) 6%, transparent); }
.bs-bg28 { background: color-mix(in srgb, var(--bs-warning) 19%, transparent); }
.bs-bg29 { background: color-mix(in srgb, var(--bs-warning) 8%, transparent); }
.bs-bg30 { background: #eff6ff; }
.bs-bg31 { background: #f5f3ff; }
.bs-bg32 { background: var(--bs-brand-hover); }
.bs-bg33 { background: #f0fdf4; }
.bs-bg34 { background: var(--bs-border); }
.bs-c1 { color: var(--bs-text-muted); }
.bs-c2 { color: #2E7D32; }
.bs-c3 { color: #C62828; }
.bs-c4 { color: #E65100; }
.bs-c5 { color: var(--bs-border); }
.bs-c6 { color: #1e40af; }
.bs-c7 { color: #92400e; }
.bs-c8 { color: #dc2626; }
.bs-c9 { color: #d97706; }
.bs-c10 { color: #16a34a; }
.bs-c11 { color: var(--bs-danger); }
.bs-c12 { color: var(--bs-text-faint); }
.bs-c13 { color: var(--bs-text-secondary); }
.bs-c14 { color: white; }
.bs-pos-rel { position: relative; }
.bs-fw-bold { font-weight: 700; }
.bs-s435 { flex: 1; min-height: 0; }
.bs-s436 { display: flex; align-items: center; justify-content: center; color: white; font-size: 0.65rem; font-weight: 600; min-width: 30px; transition: width 0.3s, opacity 0.15s; cursor: pointer; background: var(--_bar-c); width: var(--_bar-w, 0%); }
.bs-s437 { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom:1px solid var(--bs-border-light); font-size: 0.65rem; cursor: pointer; transition: background 0.15s; }
.bs-s438 { text-align:center;padding:0.3rem;border-radius:var(--bs-radius-sm); }
.bs-s439 { height:100%;display:flex;align-items:center;justify-content:center;font-size:0.55rem;color:white;font-weight:700;min-width:30px;background:var(--_bar-c);width:var(--_bar-w, 0%); }
.bs-s440 { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.4rem; border-radius:var(--bs-radius); cursor: pointer; transition: transform 0.1s; }
.bs-s441 { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.5rem; border-radius: 10px; font-size: 0.65rem; font-weight: 600; margin-bottom: 0.5rem; }
.bs-s442 { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.4rem; border-radius:var(--bs-radius); cursor: pointer; transition: transform 0.1s; }
.bs-s443 { padding: 0.4rem; font-size: 0.6rem; text-align: center; border-radius:var(--bs-radius-sm); cursor: pointer; border:1px solid var(--bs-border); transition: background 0.15s; }
.bs-s444 { display:flex;align-items:center;gap:0.3rem;padding:0.25rem 0;margin-top:0.4rem;font-size:0.6rem;font-weight:700;text-transform:uppercase;letter-spacing:0.03em; }
.bs-s445 { border-radius:var(--bs-radius-lg);padding:0.75rem;border:1px solid var(--bs-border); }
.bs-s446 { display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:700;margin-bottom:0.4rem; }
.bs-s447 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;border:1px solid var(--bs-border);font-weight:600; }
.bs-s448 { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.4rem 0.6rem; margin-bottom: 0.25rem; font-size: 0.7rem; border-radius:var(--bs-radius-sm); cursor: pointer; transition: all 0.15s; }
.bs-s449 { display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;padding:0.15rem 0.4rem;border-radius:10px;font-weight:600; }
.bs-s450 { display:flex;align-items:flex-start;gap:0.5rem;padding:0.6rem 0.75rem;border-radius:var(--bs-radius);background:var(--bs-bg);border:1px solid var(--bs-border);margin-bottom:0.5rem; }
.bs-s451 { font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.3rem;margin-top:0.5rem;display:flex;align-items:center;gap:0.3rem; }
.bs-s452 { display:flex;align-items:center;gap:0.3rem;padding:0.2rem 0;font-size:0.6rem;border-bottom:1px solid #e0f2fe; }
.bs-s453 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;font-weight:600;transition:background 0.15s; }
.bs-s454 { font-size:0.6rem;padding:0.25rem 0.6rem;border-radius:var(--bs-radius-sm);cursor:pointer;font-weight:600;transition:background 0.15s; }
.bs-s455 { display:flex;align-items:center;gap:0.35rem;padding:0.35rem 0.25rem;cursor:pointer;border-radius:var(--bs-radius-sm);transition:background 0.15s;font-size:0.7rem;font-weight:600;user-select:none; }
.bs-s456 { padding-left:0.25rem; }
.bs-s457 { display:inline-flex;align-items:center;gap:0.2rem;font-size:0.6rem;padding:0.15rem 0.4rem;border-radius:10px;font-weight:600; }
.bs-s458 { display:flex;align-items:flex-start;gap:0.5rem;padding:0.6rem 0.75rem;border-radius:var(--bs-radius);border:1px solid var(--bs-border);margin-bottom:0.5rem; }
.bs-s459 { display:flex;align-items:center;gap:0.3rem;padding:0.2rem 0;font-size:0.6rem;border-bottom:1px solid #e0f2fe; }
.bs-s460 { font-size:0.6rem;padding:0.2rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;font-weight:600;transition:background 0.15s; }
.bs-s461 { font-size:0.6rem;padding:0.25rem 0.6rem;border-radius:var(--bs-radius-sm);cursor:pointer;font-weight:600;transition:background 0.15s; }
.bs-s462 { display:flex;align-items:center;gap:0.35rem;padding:0.35rem 0.25rem;cursor:pointer;border-radius:var(--bs-radius-sm);transition:background 0.15s;font-size:0.7rem;font-weight:600;user-select:none; }
.bs-s463 { padding-left:0.25rem; }
.bs-s464 { font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.3rem;margin-top:0.5rem;display:flex;align-items:center;gap:0.3rem; }
.bs-s465 { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem; border-radius:var(--bs-radius-sm); cursor: pointer; margin-bottom: 0.15rem; }
.bs-s466 { display:inline-block;padding:0.1rem 0.3rem;border-radius:3px;font-weight:600;font-size:0.6rem;cursor:pointer;background:color-mix(in srgb, var(--_status-color) 20%, transparent);color:var(--_status-color); }
.bs-s467 { font-size:0.6rem;padding:0.2rem 0.6rem;border-radius:var(--bs-radius-sm);cursor:pointer;font-weight:600;transition:background 0.15s; }
.bs-s468 { border-radius:var(--bs-radius-lg);padding:0.75rem;border:1px solid var(--bs-border); }
.bs-s469 { display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem; }
.bs-s470 { height:16px; }
.bs-s471 { height:16px;background:repeating-linear-gradient(45deg,#f59e0b,#f59e0b 3px,#fbbf24 3px,#fbbf24 6px); }
.bs-s472 { padding:0.15rem 0.5rem;border-bottom:1px solid var(--bs-border-light); }
.bs-s473 { position:absolute;font-size:0.55rem;color:var(--bs-text-muted);white-space:nowrap; }
.bs-s474 { position:absolute;top:3px;height:16px;background:color-mix(in srgb, var(--_bar-c, var(--bs-info)) 30%, transparent);border:1px solid color-mix(in srgb, var(--_bar-c, var(--bs-info)) 50%, transparent);border-radius:3px; }
.bs-s475 { position:absolute;height:6px;border-radius:2px;opacity:0.8;background:var(--_bar-c, var(--bs-gray)); }
.bs-s476 { position:absolute;top:0;bottom:0;width:1px;background:var(--bs-danger);z-index:1; }
.bs-s477 { display:grid;gap:1px;background:var(--bs-border);border-radius:var(--bs-radius-lg) 8px 0 0; }
.bs-s478 { background:var(--bs-bg-subtle);padding:0.2rem 0.1rem;font-size:0.5rem;text-align:center;font-weight:600;color:var(--bs-text-secondary); }
.bs-s479 { display:grid;gap:1px;background:var(--bs-border); }
.bs-s480 { padding:0.15rem;font-size:0.5rem;text-align:center;font-weight:600;cursor:pointer;transition:opacity 0.1s;min-height:18px;display:flex;align-items:center;justify-content:center;background:var(--_cell-bg, white);color:var(--_cell-color, inherit); }
.bs-s481 { background:white;border-radius:var(--bs-radius);padding:0.5rem;box-shadow:0 1px 2px rgba(0,0,0,0.06); }
.bs-s482 { display:grid;gap:1px;background:var(--bs-border);border-radius:var(--bs-radius-lg) 8px 0 0; }
.bs-s483 { background:var(--bs-bg-subtle);padding:0.2rem 0.1rem;font-size:0.5rem;text-align:center;font-weight:600;color:var(--bs-text-secondary); }
.bs-s484 { display:grid;gap:1px;background:var(--bs-border); }
.bs-s485 { display:grid;gap:1px;background:var(--bs-border);border-radius:0 0 8px 8px; }
.bs-s486 { background:white;padding:0.3rem 0.5rem;font-size:0.6rem;color:var(--bs-text); }
.bs-s488 { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.5rem; color: white; font-size: 0.7rem; font-weight: 600; border-radius:var(--bs-radius) 6px 0 0; }
.bs-s489 { padding: 0.3rem 0.6rem; font-size: 0.75rem; cursor: pointer; border-radius:var(--bs-radius-sm); font-weight: 500; }
.bs-s490 { padding:0.4rem 0.5rem;border-radius:var(--bs-radius-sm);cursor:pointer;margin-bottom:0.2rem;border:1px solid var(--bs-border);background:var(--bs-bg);transition:all 0.15s; }
.bs-s491 { display:grid;grid-template-columns:80px 1fr 80px 60px 100px 80px 100px;gap:0.3rem;padding:0.35rem 0.4rem;border-bottom:1px solid var(--bs-border-light);align-items:center; }
.bs-s492 { font-size:0.5rem;padding:0.1rem 0.3rem;border-radius:3px;cursor:pointer;font-weight:600; }
.bs-s493 { border:1px solid var(--bs-border);border-radius:var(--bs-radius);overflow:hidden; }
.bs-s495 { border:1px solid var(--bs-border);border-radius:var(--bs-radius);overflow:hidden;cursor:pointer;transition:box-shadow 0.15s; }
.bs-s497 { border:2px solid var(--bs-border);border-radius:var(--bs-radius);padding:0.5rem;background:white; }

/* ═══════════════════════════════════════════════════════════════════
   SEMANTIC CLASSES — replacing inline styles in view files
   ═══════════════════════════════════════════════════════════════════ */

/* Action bar (project detail) */
.bs-action-bar { display:flex;gap:var(--ui-space-3,0.75rem);align-items:center;padding:var(--ui-space-2,0.5rem) 0;border-bottom:1px solid var(--ui-gray-100,#f3f4f6);margin-bottom:var(--ui-space-3,0.75rem); }
.bs-btn-primary { display:inline-flex;align-items:center;gap:0.4rem;padding:0.45rem 1rem;border:none;border-radius:var(--ui-radius-md,4px);background:var(--bs-brand,#1565C0);color:white;font-size:var(--ui-text-sm,0.8rem);font-weight:600;cursor:pointer;transition:opacity 0.15s; }
.bs-btn-primary:hover { opacity:0.85; }
.bs-btn-icon { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:var(--ui-radius-sm,4px);background:transparent;color:var(--bs-text-muted,#9ca3af);font-size:var(--ui-text-sm,0.8rem);cursor:pointer;transition:background 0.15s,color 0.15s; }
.bs-btn-icon:hover { background:var(--ui-gray-100,#f1f5f9);color:var(--bs-brand,#1565C0); }
.bs-sample-count { font-size:var(--ui-text-xs,0.7rem);color:var(--bs-text-muted,#9ca3af); }

/* Project header badges */
.bs-type-badge { display:inline-flex;align-items:center;justify-content:center;width:1.4rem;height:1.4rem;border-radius:50%;color:white;font-size:0.65rem;font-weight:800;flex-shrink:0; }
.bs-project-title { font-size:1.1rem;font-weight:700;color:var(--bs-brand); }
.bs-project-code { font-size:0.7rem;color:var(--bs-text-secondary);font-weight:500; }
.bs-ifs-badge { font-size:0.65rem;padding:0.15rem 0.5rem;border-radius:12px;background:var(--bs-brand-light);color:var(--bs-brand);font-weight:600; }
.bs-quote-code { font-size:0.65rem;color:var(--bs-text-muted); }

/* Recent activity */
.bs-activity-dot { width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0; }
.bs-activity-desc { flex:1;font-size:0.65rem;color:var(--bs-text-secondary);line-height:1.3; }
.bs-activity-time { font-size:0.6rem;color:var(--bs-text-muted);white-space:nowrap; }

/* Status bars */
.bs-bar-label { width:90px;font-size:0.65rem;color:var(--bs-text-secondary);white-space:nowrap; }
.bs-bar-track { flex:1;background:var(--bs-bg-subtle);border-radius:var(--bs-radius-sm);height:14px;overflow:clip; }
.bs-bar-fill { height:100%;border-radius:3px;transition:width 0.3s;background:var(--_bar-c);width:var(--_bar-w, 0%); }
.bs-bar-count { font-size:0.65rem;font-weight:600;color:var(--bs-text);width:40px;text-align:right; }

/* Division performance */
.bs-pipe-header { display:flex;justify-content:space-between;font-size:0.6rem;margin-bottom:0.1rem; }
.bs-bar-8 .bs-progress { height:8px; }
.bs-cust-rank { color:var(--bs-text-muted);font-size:0.55rem;margin-right:0.2rem; }
.bs-cust-projects { color:var(--bs-text-muted);font-size:0.5rem;margin-left:0.2rem; }
.bs-health-meta { display:flex;justify-content:space-between;font-size:0.5rem;color:var(--bs-text-muted);margin-top:0.1rem; }
.bs-overdue-tag { color:var(--bs-danger);font-size:0.5rem;font-weight:700; }
.bs-overdue-header { font-size:0.6rem;font-weight:600;color:var(--bs-danger);margin-bottom:0.2rem; }

/* Financial cards */
.bs-fin-name { font-size:0.8rem;font-weight:700;color:var(--bs-text);flex:1; }
.bs-fin-value { font-weight:600;color:var(--bs-text); }
.bs-fin-primary { font-weight:600;color:var(--ui-primary-400,#3b82f6); }
.bs-fin-warning { font-weight:600;color:var(--bs-warning); }
.bs-overdue-label { color:var(--bs-danger);font-weight:600; }
.bs-cal-icon { margin-right:0.3rem;color:var(--bs-text-muted); }
.bs-budget-pct { font-weight:600; }

/* Accordion icon colors */
.bs-icon-blue { color:var(--bs-info); }
.bs-icon-cyan { color:var(--bs-brand); }
.bs-icon-orange { color:var(--bs-warning); }
.bs-icon-purple-deep { color:var(--bs-purple); }
.bs-icon-orange-deep { color:var(--bs-danger); }
.bs-icon-amber { color:var(--bs-warning); }
.bs-acc-icon-gap { margin-right:6px; }

/* Info panel (used in bindView templates) */
.bs-info-panel { background:var(--bs-bg-hover,#f8f9fa);border-radius:var(--bs-radius);padding:0.6rem; }
.bs-info-meta { font-size:0.7rem;color:var(--bs-text-muted,#888);margin-top:0.15rem; }
.bs-info-divider { margin-top:0.5rem;padding-top:0.4rem;border-top:1px solid var(--ui-gray-200,#e5e7eb); }
.bs-info-req-title { font-size:0.7rem;font-weight:700;color:var(--bs-brand);margin-bottom:0.3rem; }
.bs-info-req-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.3rem;font-size:0.7rem; }
.bs-skill-chip { background:var(--bs-purple-bg);padding:0.1rem 0.35rem;border-radius:3px;font-size:0.6rem;font-weight:500; }
.bs-equip-chip { background:#fff3e0;padding:0.1rem 0.35rem;border-radius:3px;font-size:0.6rem;font-weight:500; }
.bs-code-inline { background:var(--bs-bg-hover,#eee);padding:0.1rem 0.3rem;border-radius:3px; }

/* Next-status variants */
.bs-next-completed { background:var(--bs-success-bg);color:#2E7D32; }
.bs-next-split { background:#F3E5F5;color:#7B1FA2; }

/* Tracker header */
.bs-qty-label { font-size:0.8rem;color:var(--bs-text-secondary);font-weight:400; }
.bs-tracker-meta { margin-left:auto;font-size:0.7rem;color:var(--bs-text-muted,#888); }

/* SOP preview grid */
.bs-sop-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.5rem;font-size:0.65rem;margin-bottom:0.5rem; }
.bs-sop-desc { font-size:0.65rem;color:var(--bs-text-secondary);line-height:1.5; }

/* Split modal */
.bs-split-arrow { color:#9C27B0;margin-right:4px;font-size:0.65rem; }
.bs-text-dim { color:var(--bs-text-muted,#888); }

/* BSMonitoringViews — extracted inline styles */
.bs-alert-title { font-size:0.7rem;font-weight:700;color:var(--bs-text-dark); }
.bs-alert-subtitle { font-size:0.65rem;color:var(--bs-text-dark);margin-top:0.25rem; }
.bs-stat-row-label { display:flex;align-items:center;gap:0.4rem;font-size:0.7rem;color:var(--bs-text-secondary); }
.bs-stat-row-icon { color: var(--_status-color); width: 14px; text-align: center; }
.bs-empty-muted { font-size:0.7rem;color:var(--bs-text-muted);padding:0.5rem 0; }
.bs-empty-center { color:var(--bs-text-muted);font-size:0.75rem;padding:1rem;text-align:center; }
.bs-alert-count { font-size:0.6rem;font-weight:500; }
.bs-view-all-link { font-size:0.55rem;cursor:pointer;color:var(--bs-brand);margin-left:0.5rem; }
.bs-alert-row { display:flex;align-items:center;gap:0.5rem;padding:0.3rem 0;border-bottom:1px solid var(--bs-border-light);font-size:0.65rem;cursor:pointer;transition:background 0.15s; }
.bs-queue-header-label { font-size:0.8rem;font-weight:700; }
.bs-progress-track { margin-top:0.15rem;margin-left:16px;background:var(--bs-border);border-radius:2px;height:3px;overflow:hidden; }
.bs-item-title { font-size:0.75rem;font-weight:600;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bs-util-bar-wrap { width:80px;flex-shrink:0; }
.bs-util-bar-track { background:var(--bs-bg-subtle);border-radius:3px;height:10px;position:relative; }
.bs-detail-subheading { font-size:0.65rem;font-weight:700;color:var(--bs-text);margin-bottom:0.3rem;margin-top:0.5rem; }
.bs-limit-row { font-size:0.6rem;color:var(--bs-text-secondary);padding:0.15rem 0; }
.bs-empty-qc { font-size:0.65rem;color:var(--bs-text-muted);margin-top:0.5rem;text-align:center; }
.bs-icon-brand-mr { color:var(--bs-brand);margin-right:0.4rem; }
.bs-empty-results { padding:2rem;text-align:center;color:var(--bs-text-muted);font-size:0.8rem; }
.bs-dash-muted { color:var(--bs-border); }
.bs-success-msg { font-size:0.7rem;color:var(--bs-success); }
.bs-status-dot-ok { width:8px;height:8px;border-radius:50%;background:#10b981;flex-shrink:0; }
.bs-status-dot-bad { width:8px;height:8px;border-radius:50%;background:#ef4444;flex-shrink:0; }
.bs-overrun-badge { font-size:0.55rem;padding:0.1rem 0.3rem;border-radius:3px;background:#ef444415;color:var(--bs-danger);font-weight:600; }
.bs-loss-budget-row { font-size:0.7rem;font-weight:600;color:#1f2937;flex:1; }
.bs-text-left { text-align:left; }
.bs-alert-msg-label { flex:1;color:var(--bs-text); }
.bs-queue-count-sub { font-size:0.6rem;opacity:0.7; }
.bs-kpi-label { font-size:0.5rem;color:var(--bs-text-secondary); }
.bs-inline-row { padding:0.2rem 0; }
.bs-warning-value { color:var(--bs-warning);font-size:0.6rem; }
.bs-queue-item-label { font-size:0.7rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bs-queue-item-sub { font-size:0.55rem;opacity:0.7; }
.bs-equip-name { flex:1;font-size:0.7rem;color:var(--bs-text);font-weight:500; }
.bs-detail-panel-title { font-size:0.75rem;font-weight:700;color:var(--bs-brand);margin-bottom:0.5rem; }

/* Graph container */
.bs-graph-tall { height:700px; }

/* ── BSWorkflowViews — extracted static inline styles ── */

/* Warning/danger accent strip (border-left callout) */
.bs-accent-strip-warning {
    border-left: 3px solid var(--bs-warning);
    padding: var(--bs-space-2xs) var(--bs-space-xs);
    background: var(--bs-bg-subtle);
    border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
}
.bs-accent-strip-danger {
    border-left: 3px solid var(--bs-danger);
    padding: var(--bs-space-2xs) var(--bs-space-xs);
    background: var(--bs-bg-subtle);
    border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
}

/* Allocation row bottom separator with padding */
.bs-alloc-row-separator {
    border-bottom: 1px solid var(--bs-border);
    padding-bottom: var(--bs-space-xs);
}

/* Date input fixed width */
.bs-date-input-sm {
    width: 140px;
}

/* Assignment grid row */
.bs-assignment-row {
    border-bottom: 1px solid var(--bs-border-light);
}

/* Truncated cell widths inside assignment grid */
.bs-cell-80 {
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-cell-120 {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-cell-70 {
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Uppercase micro label (section headings inside views) */
.bs-micro-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Row separators */
.bs-row-border-top {
    border-top: 1px solid var(--bs-border-light);
}
.bs-row-border-bottom {
    border-bottom: 1px solid var(--bs-border-light);
}

/* Accredited star icon */
.bs-icon-accredited {
    color: var(--bs-warning);
    font-size: 0.5rem;
}

/* Overdue span / danger text */
.bs-text-danger {
    color: var(--bs-danger);
}
.bs-text-warning {
    color: var(--bs-warning);
}

/* Result input fixed width */
.bs-result-input {
    width: 70px;
}

/* Leaderboard rank number cell */
.bs-rank-cell {
    width: 20px;
    text-align: right;
}

/* Release / batch action bar (top separator) */
.bs-action-bar-top {
    border-top: 1px solid var(--bs-border);
    padding-top: var(--bs-space-2xs);
}

/* Certificate card (always success left border) */
.bs-cert-card {
    border-left: 3px solid var(--bs-success);
}

/* Method result span inside certificate results table */
.bs-method-result-span {
    margin-right: var(--bs-space-xs);
}

/* Certificate sample row */
.bs-cert-sample-row {
    border-bottom: 1px solid var(--bs-border-light);
}

/* Certificate signatories divider */
.bs-cert-signatories {
    border-top: 1px solid var(--bs-border);
}

/* Pipeline chip */
.bs-pipeline-chip {
    flex: 1;
    min-width: 60px;
    padding: var(--bs-space-2xs);
    border-radius: var(--bs-radius-sm);
    background: var(--bs-bg-subtle);
}

/* Pipeline progress bar track */
.bs-pipeline-track {
    height: 8px;
    background: var(--bs-border);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

/* Pipeline chip icon */
.bs-pipeline-chip-icon {
    font-size: 0.7rem;
    margin-bottom: 2px;
}

/* Flex-wrap row */
.bs-flex-wrap {
    flex-wrap: wrap;
}

/* Mini progress bar track (6px) */
.bs-mini-track {
    height: 6px;
    background: var(--bs-border);
    border-radius: 3px;
    overflow: hidden;
}

/* Proficiency result row */
.bs-pt-result-row {
    border-bottom: 1px solid var(--bs-border-light);
}

/* Backlog row */
.bs-backlog-row {
    border-bottom: 1px solid var(--bs-border-light);
}

/* Worksheet number cell in backlog (fixed width) */
.bs-ws-num-cell {
    width: 70px;
}

/* ── BSAdminViews static styles (moved from inline) ──────────────────────── */

/* Admin header title */
.bs-admin-header-title {
    font-size: 0.9rem;
    font-weight: 700;
}

/* Admin header subtitle */
.bs-admin-header-sub {
    font-size: 0.65rem;
    opacity: 0.8;
    margin-top: 0.15rem;
}

/* Admin nav item icon */
.bs-admin-nav-icon {
    width: 14px;
    text-align: center;
    color: var(--bs-brand);
}

/* Flex row with wrap and vertical centering */
.bs-items-center {
    align-items: center;
}

/* Action bar with top border separator */
.bs-action-bar-top {
    border-top: 1px solid var(--bs-border);
    padding-top: var(--bs-space-xs);
}

/* Accent left-border strip (accredited methods footer, metrics strip) */
.bs-accent-strip {
    border-left: 3px solid var(--bs-primary-200);
    padding: var(--bs-space-2xs) var(--bs-space-xs);
    background: var(--bs-bg-subtle);
    border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
}

/* Warning star icon */
.bs-text-warning {
    color: var(--bs-warning);
}

/* Hazard row: small vial icon */
.bs-hazard-vial-icon {
    color: var(--bs-danger);
    font-size: 0.6rem;
    width: 0.8rem;
    text-align: center;
}

/* Hazard level badge (red tint) */
.bs-hazard-level-badge {
    margin-left: auto;
    padding: 0.1rem 0.3rem;
    background: var(--bs-danger-bg);
    color: var(--bs-danger);
    border-radius: 3px;
    font-weight: 600;
}

/* Pyrotechnic class badge (amber tint) */
.bs-pyro-badge {
    padding: 0.1rem 0.3rem;
    background: var(--bs-warning-bg);
    color: var(--bs-warning);
    border-radius: 3px;
    font-weight: 600;
}

/* Accredited methods asterisk star */
.bs-accred-star {
    color: var(--bs-success);
    font-weight: 700;
}

/* Inline code snippet */
.bs-inline-code {
    background: var(--bs-bg-subtle);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

/* Process label in division workflow list */
.bs-process-label {
    font-size: 0.75rem;
    color: var(--bs-text);
}

/* Alias table input */
.bs-alias-input {
    width: 100%;
    border: 1px solid var(--bs-border);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
}

/* Alert severity badge — base */
.bs-sev-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: var(--bs-radius-sm);
    font-weight: 600;
}
.bs-sev-critical { background: var(--bs-danger-bg); color: var(--bs-danger); }
.bs-sev-warning  { background: var(--bs-warning-bg); color: var(--bs-warning); }
.bs-sev-info     { background: var(--bs-brand-light); color: var(--ui-primary-400, #3b82f6); }

/* Alert detail card */
.bs-alert-detail-card {
    background: white;
    border-radius: var(--bs-radius-lg);
    padding: 0.75rem;
    box-shadow: var(--bs-shadow-sm);
    margin-top: 0.75rem;
}
.bs-alert-detail-title {
    font-weight: 700;
    color: var(--bs-text);
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
}
.bs-alert-detail-desc {
    font-size: 0.7rem;
    color: var(--bs-text-secondary);
    margin-bottom: 0.25rem;
}
.bs-alert-detail-meta {
    font-size: 0.65rem;
    color: var(--bs-text-muted);
}

/* Card header row (flex, centered, gapped) */
.bs-card-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Sky-blue icon (coins, IFS) */
.bs-icon-sky {
    color: #0284c7;
}

/* Amber icon (equipment tools) */
.bs-icon-amber {
    color: #ca8a04;
}

/* Cost amount display */
.bs-cost-amount {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0284c7;
    margin-bottom: 0.4rem;
}
.bs-cost-unit {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--bs-text-muted);
}

/* Card label (small, bold, with bottom margin) */
.bs-card-label-sm {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bs-text);
    margin-bottom: 0.5rem;
}

/* API specification card header */
.bs-api-spec-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0369a1;
    margin-bottom: 0.5rem;
}
.bs-api-spec-body {
    font-size: 0.6rem;
    color: var(--bs-text-secondary);
    line-height: 1.6;
}
.bs-api-spec-mono {
    padding-left: 0.5rem;
    font-family: monospace;
    font-size: 0.55rem;
}

/* External lab item metadata line */
.bs-lab-item-meta {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
    display: flex;
    gap: 0.4rem;
    margin-top: 0.1rem;
}

/* Lab accreditation number in header */
.bs-lab-accred-number {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
    font-weight: 400;
}

/* Import modal form elements */
.bs-import-label {
    font-size: 0.7rem;
    color: var(--bs-text-secondary);
    margin-bottom: 0.5rem;
}
.bs-import-textarea {
    width: 100%;
    height: 150px;
    font-size: 0.7rem;
    font-family: monospace;
    border: 1px solid #ddd;
    border-radius: var(--bs-radius-sm);
    padding: 0.5rem;
}
.bs-import-btn {
    margin-top: 0.5rem;
    padding: 0.4rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #10b981;
    color: white;
    border: none;
    border-radius: var(--bs-radius-sm);
    cursor: pointer;
}

/* Padding utility for empty states */
.bs-p-md {
    padding: 1rem;
}

/* Brand-colored text */
.bs-text-brand {
    color: var(--bs-brand);
}

/* External results grid row */
.bs-results-grid-row {
    display: grid;
    grid-template-columns: 80px 1fr 80px 60px 100px 80px 100px;
    gap: 0.3rem;
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--bs-border-light);
    align-items: center;
}

/* ── BSResourceViews inline-style replacements ── */

/* Low-stock / reorder alert banner */
.bs-alert-banner-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--bs-warning) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-warning) 30%, transparent);
}
.bs-alert-icon-warning {
    color: var(--bs-warning);
}
.bs-alert-text {
    font-size: 0.7rem;
    font-weight: 600;
}

/* Category badge — brand tint */
.bs-badge-brand {
    background: color-mix(in srgb, var(--bs-brand) 12%, transparent);
    color: var(--bs-brand);
}
/* Lock badge — warning tint */
.bs-badge-warning {
    background: color-mix(in srgb, var(--bs-warning) 12%, transparent);
    color: var(--bs-warning);
}

/* Tag icon inside small badge */
.bs-badge-icon-xs {
    font-size: 0.35rem;
}

/* Stock gauge wrapper */
.bs-gauge-wrap {
    margin: 0.5rem 0;
}
/* Gauge header row */
.bs-gauge-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    margin-bottom: 2px;
}
.bs-gauge-label {
    font-weight: 600;
}
/* Gauge track */
.bs-gauge-track {
    height: 6px;
    background: var(--bs-bg-hover);
    border-radius: 3px;
    overflow: hidden;
}
/* Gauge fill — width and color set dynamically */
.bs-gauge-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
/* Gauge reorder label */
.bs-gauge-reorder {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
    margin-top: 2px;
}

/* Detail row value — compact, semi-bold */
.bs-detail-value {
    font-size: 0.65rem;
    font-weight: 600;
}

/* Usage / recent-history section header */
.bs-usage-header {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--bs-text-secondary);
    margin-top: 0.5rem;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--bs-border);
}

/* Maintenance — no-records notice */
.bs-no-records-text {
    font-size: 0.65rem;
    color: var(--bs-text-muted);
    padding: 0.5rem 0;
}

/* File detail card — icon + name header row */
.bs-file-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
/* File icon in detail card */
.bs-file-icon {
    font-size: 1.2rem;
    color: var(--bs-brand);
}
/* File description line */
.bs-file-description {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
}

/* Resource Dashboard header text */
.bs-dashboard-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-brand);
}

/* Today's Events section title with count badge */
.bs-event-count {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--bs-text-muted);
}
/* Calendar icon in events section */
.bs-icon-calendar-blue {
    color: #4285f4;
    margin-right: 0.4rem;
}

/* Overrun card header */
.bs-overrun-header {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bs-text);
    margin-bottom: 0.4rem;
}

/* Equipment detail panel — section header icon */
.bs-section-icon-xs {
    font-size: 0.55rem;
}

/* Info row label (compact, gray) */
.bs-info-row-label {
    font-size: 0.58rem;
    color: #888;
}
/* Info row value (compact, semi-bold) */
.bs-info-row-value {
    font-size: 0.6rem;
    font-weight: 600;
}

/* Equipment detail name (truncated) */
.bs-equip-detail-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Staff card top row layout */
.bs-staff-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
/* Staff name (truncated) */
.bs-staff-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Certification status dot */
.bs-cert-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Skill badge row */
.bs-skill-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

/* Staff detail panel header layout */
.bs-staff-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
/* Staff detail avatar — larger size */
.bs-staff-avatar-lg {
    width: 36px;
    height: 36px;
    font-size: 0.75rem;
}
/* Staff dept / email line */
.bs-staff-dept-line {
    font-size: 0.65rem;
    color: #888;
}
/* Staff bio line */
.bs-staff-bio {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
    margin-top: 0.15rem;
}
/* Skills section heading inside detail card */
.bs-skills-heading {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-text);
    margin-bottom: 0.4rem;
}
/* No-skills placeholder */
.bs-no-skills {
    padding: 0.5rem;
    text-align: center;
    color: var(--bs-text-muted);
    font-size: 0.7rem;
}
/* Expired cell in skills table */
.bs-text-expired {
    color: #ef4444;
}

/* Certificate preview border box */
.bs-cert-preview-box {
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius);
    padding: 1rem;
}
/* Certificate header section */
.bs-cert-preview-head {
    text-align: center;
    border-bottom: 1px solid var(--bs-border);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
/* Certificate sub-code line */
.bs-cert-code-line {
    font-size: 0.7rem;
    color: var(--bs-text-secondary);
}
/* Verification code inline */
.bs-verification-code {
    background: var(--bs-bg-subtle);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}
/* Certificate results section */
.bs-cert-results-section {
    margin-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
}
/* Certificate results heading */
.bs-cert-results-heading {
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
/* Certificate QR section */
.bs-cert-qr-section {
    margin-top: 0.75rem;
    border-top: 1px solid var(--bs-border);
    padding-top: 0.5rem;
    text-align: center;
    cursor: pointer;
}
/* QR label */
.bs-cert-qr-label {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
    margin-bottom: 0.25rem;
}

/* Approval history section */
.bs-approval-history-header {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--bs-text-secondary);
    margin-bottom: 0.3rem;
}
/* Approval history entry icon */
.bs-history-icon {
    font-size: 0.5rem;
    width: 12px;
    text-align: center;
}
/* Approval history entry action text */
.bs-history-action {
    font-size: 0.55rem;
    color: var(--bs-text);
}
/* Approval history entry date */
.bs-history-date {
    font-size: 0.5rem;
    color: var(--bs-text-muted);
    margin-left: auto;
}

/* Staff availability card title */
.bs-avail-title-icon {
    color: #ab47bc;
}
/* Staff availability title layout */
.bs-avail-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
/* "Today" label in availability title */
.bs-avail-today-label {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
    font-weight: 400;
    margin-left: auto;
}
/* All-staff-available message */
.bs-all-available {
    font-size: 0.65rem;
    color: var(--bs-success);
    padding: 0.3rem 0;
}
/* Availability dot */
.bs-avail-dot-lg {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Availability name */
.bs-avail-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-text);
    flex: 1;
}
/* Upcoming leave dot */
.bs-leave-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
/* Upcoming leave name */
.bs-leave-name {
    color: var(--bs-text);
}
/* Upcoming leave date */
.bs-leave-date {
    color: var(--bs-text-muted);
    margin-left: auto;
}

/* Skills forecast card (static parts) */
.bs-skill-forecast-card {
    background: white;
    border-radius: var(--bs-radius);
    padding: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.bs-skill-forecast-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-text);
}
.bs-skill-forecast-no-staff {
    font-size: 0.55rem;
    margin-top: 0.15rem;
}
.bs-skill-forecast-in-training {
    font-size: 0.5rem;
    color: var(--bs-warning);
    margin-top: 0.1rem;
}
.bs-skill-forecast-warn-icon {
    font-size: 0.5rem;
    margin-right: 0.2rem;
}
.bs-skill-forecast-train-icon {
    font-size: 0.4rem;
    margin-right: 0.2rem;
}

/* Gantt / schedule legend color dot */
.bs-legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.3rem;
}
/* Gantt legend square dot */
.bs-legend-sq {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 0.3rem;
}

/* Gantt project label status dot */
.bs-gantt-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Skills matrix legend color swatch */
.bs-matrix-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 0.2rem;
    vertical-align: middle;
}

/* Demand heatmap category icon */
.bs-demand-cat-icon {
    color: var(--bs-purple);
    margin-right: 0.3rem;
    font-size: 0.5rem;
}
/* Staff coverage icon */
.bs-demand-staff-icon {
    color: var(--ui-primary-400, #3b82f6);
    margin-right: 0.3rem;
    font-size: 0.5rem;
}

/* Event row color bar (width/height fixed, background dynamic) */
.bs-event-color-bar {
    width: 4px;
    height: 24px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* Event row time column */
.bs-event-time-col {
    font-size: 0.65rem;
    color: var(--bs-text-secondary);
    width: 40px;
    flex-shrink: 0;
}
/* Upcoming event row date */
.bs-event-date-col {
    text-align: right;
    flex-shrink: 0;
}
.bs-event-date-text {
    font-size: 0.6rem;
    color: var(--bs-text-secondary);
    font-weight: 600;
}
/* Upcoming event color bar (taller) */
.bs-event-color-bar-lg {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Schedule-ahead header row column label */
.bs-schedule-header-day {
    text-align: center;
    padding: 2px;
    font-size: 0.55rem;
    font-weight: 600;
    background: var(--bs-bg-hover);
}

/* Bottleneck item icon — danger tint */
.bs-bottleneck-icon-danger {
    background: #ef444415;
    color: var(--bs-danger);
}
/* Bottleneck item icon — warning tint */
.bs-bottleneck-icon-warning {
    background: #f59e0b15;
    color: var(--bs-warning);
}
/* Bottleneck item icon — purple tint */
.bs-bottleneck-icon-purple {
    background: #8b5cf615;
    color: var(--bs-purple);
}

/* Quick-action button icon */
.bs-action-icon {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

/* Equipment status icon (fixed width, centered) */
.bs-status-icon {
    width: 14px;
    text-align: center;
}

/* Schedule row bullet dot */
.bs-sched-bullet {
    color: var(--ui-primary-400, #3b82f6);
    font-size: 0.4rem;
}

/* Overflow skill badge (+N more) */
.bs-skill-badge-overflow {
    background: var(--bs-bg-subtle);
    color: var(--bs-text-muted);
}

/* Stat chip icon size */
.bs-stat-icon {
    font-size: 0.65rem;
}
/* Stat chip value size */
.bs-stat-value {
    font-size: 0.85rem;
    font-weight: 700;
}

/* Expired marker in skills matrix */
.bs-matrix-expired-marker {
    color: #ef4444;
    font-weight: 700;
}

/* Skills matrix empty cell dash */
.bs-matrix-empty {
    color: #ccc;
    cursor: pointer;
}

/* Demand heatmap legend swatches */
.bs-demand-legend-low {
    background: #dcfce7;
    border: 1px solid #10b981;
}
.bs-demand-legend-mid {
    background: var(--bs-warning-bg);
    border: 1px solid #f59e0b;
}
.bs-demand-legend-high {
    background: #fee2e2;
    border: 1px solid #ef4444;
}

/* ── BSSpecimenViews inline-style replacements ── */

/* Success text colour (mirrors bs-text-warning pattern) */
.bs-text-success { color: var(--bs-success); }

/* Related specimens code column — minimum width */
.bs-related-code { min-width: 5rem; }

/* Scanner station — location box border states */
.bs-location-selected { border-left: 4px solid #3b82f6; }
.bs-location-unset    { border-left: 4px solid #f59e0b; }

/* Scanner stage layout */
.bs-scanner-stage {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* "No actions available" message in quick actions section */
.bs-no-actions-msg {
    font-size: 0.65rem;
    color: var(--bs-text-muted);
    padding: 0.25rem;
}

/* Attribute filter form elements */
.bs-filter-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--bs-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}
.bs-filter-select {
    width: 100%;
    padding: 0.3rem;
    font-size: 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: var(--bs-radius-sm);
    background: white;
}
.bs-filter-input {
    width: 100%;
    padding: 0.3rem;
    font-size: 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: var(--bs-radius-sm);
    box-sizing: border-box;
}
/* Number operator select (narrower, flex-shrink) */
.bs-filter-op-select {
    flex: 0 0 4rem;
    padding: 0.3rem;
    font-size: 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: var(--bs-radius-sm);
    background: white;
}
/* Number value input (flex-grow) */
.bs-filter-num-input {
    flex: 1;
    padding: 0.3rem;
    font-size: 0.7rem;
    border: 1px solid #d1d5db;
    border-radius: var(--bs-radius-sm);
    box-sizing: border-box;
}

/* Hazard level badge (static danger tint) */
.bs-hazard-badge {
    background: var(--bs-danger-bg);
    color: var(--bs-danger);
}

/* Physical state section — flask icon */
.bs-phys-state-icon {
    color: var(--bs-purple);
    font-size: 0.7rem;
}

/* Change Physical State modal form elements */
.bs-state-select {
    font-size: 0.75rem;
    padding: 0.35rem;
    border: 1px solid #ddd;
    border-radius: var(--bs-radius-sm);
}
.bs-state-input {
    font-size: 0.75rem;
    padding: 0.35rem;
    border: 1px solid #ddd;
    border-radius: var(--bs-radius-sm);
}
.bs-state-apply-btn {
    margin-top: 0.5rem;
    padding: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #8b5cf6;
    color: white;
    border: none;
    border-radius: var(--bs-radius-sm);
    cursor: pointer;
}

/* Physical state transition timeline — arrow between states */
.bs-transition-arrow {
    font-size: 0.45rem;
    color: var(--bs-text-muted);
}

/* Resource assignment row — base layout */
.bs-ra-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0;
    font-size: 0.6rem;
    border-bottom: 1px solid #e0f2fe;
}

/* Resource assignment row — unit label text */
.bs-ra-unit-label {
    color: #1e3a5f;
}

/* Experiment queue — empty message */
.bs-queue-empty-msg {
    font-size: 0.65rem;
    color: var(--bs-text-muted);
    padding: 0.5rem;
    text-align: center;
}

/* Experiment queue — item definition label */
.bs-queue-item-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* File list item row (existing files in disposition/document sections) */
.bs-file-list-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0;
}
/* File icon in file list item */
.bs-file-list-icon {
    color: var(--bs-purple);
    font-size: 0.6rem;
}

/* Schedule preview — title bar */
.bs-schedule-preview-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--bs-brand);
    margin-bottom: 0.4rem;
}

/* Schedule preview stage row — label and duration */
.bs-schedule-stage-label {
    flex: 1;
    font-weight: 500;
}
.bs-schedule-stage-dur {
    color: #888;
    font-size: 0.6rem;
}

/* Split modal — portion label and unit */
.bs-portion-label {
    font-size: 0.7rem;
    color: var(--bs-text-muted);
    width: 60px;
}
.bs-portion-unit {
    font-size: 0.7rem;
    color: var(--bs-text-muted);
}
/* Split modal — portion mass input */
.bs-portion-input {
    width: 80px;
    font-size: 0.75rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid #d1d5db;
    border-radius: var(--bs-radius-sm);
}

/* Mass reconciliation — controlled loss fire icon */
.bs-mass-loss-icon {
    color: var(--bs-warning);
    margin-right: 0.2rem;
    font-size: 0.6rem;
}

/* Mass reconciliation — difference summary row */
.bs-mass-diff-row {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    border-top: 1px solid #e5e7eb;
    margin-top: 0.2rem;
    padding-top: 0.3rem;
}

/* Mass reconciliation — loss budget header row */
.bs-mass-budget-row {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed #e5e7eb;
    font-size: 0.6rem;
    color: var(--bs-text-muted);
}

/* Mass reconciliation — per-step loss row */
.bs-mass-step-row {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem 0;
    font-size: 0.6rem;
}

/* Scanner station — barcode icon in scan counter */
.bs-scan-counter-icon {
    color: var(--ui-primary-400, #3b82f6);
}

/* Scanner station — location tree max height */
.bs-scanner-tree-body {
    max-height: 300px;
    overflow-y: auto;
}

/* Label preview — text rows */
.bs-label-code-text {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.bs-label-type-text {
    font-size: 0.55rem;
    color: var(--bs-text-secondary);
    margin-top: 0.1rem;
}
.bs-label-project-text {
    font-size: 0.55rem;
    color: var(--bs-brand);
    margin-top: 0.1rem;
}
.bs-label-matrix-text {
    font-size: 0.5rem;
    color: var(--bs-text);
    margin-top: 0.2rem;
    padding: 0.1rem 0.2rem;
    background: #f0f0f0;
    border-radius: 2px;
}

/* Disposal certificate — outer wrapper */
.bs-cert-outer {
    border: 2px solid #333;
    border-radius: var(--bs-radius);
    padding: 1.25rem;
}
/* Disposal certificate — title block */
.bs-cert-title-block {
    text-align: center;
    border-bottom: 2px solid #333;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
}
.bs-cert-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #c62828;
    letter-spacing: 0.1em;
}
.bs-cert-code {
    font-size: 0.7rem;
    color: var(--bs-text-secondary);
    margin-top: 0.25rem;
}
/* Disposal certificate — body and detail sections */
.bs-cert-body {
    font-size: 0.75rem;
    line-height: 1.6;
}
.bs-cert-section {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ddd;
    font-size: 0.75rem;
    line-height: 1.6;
}
.bs-cert-section-title {
    font-weight: 700;
    color: #c62828;
    margin-bottom: 0.25rem;
}
/* Disposal certificate — footer */
.bs-cert-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--bs-text-secondary);
}
.bs-cert-footer-right {
    text-align: right;
}
.bs-cert-verify-code {
    background: var(--bs-bg-subtle);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-size: 0.6rem;
}

/* ─── BSAboutViews — static style classes ─────────────────────────────── */

/* _collapsibleSection: header icon */
.bs-about-section-icon {
    font-size: 1rem;
    opacity: 0.9;
}

/* _collapsibleSection: title text */
.bs-about-section-title {
    font-size: 0.85rem;
    font-weight: 700;
}

/* _collapsibleSection: subtitle text */
.bs-about-section-subtitle {
    font-size: 0.6rem;
    opacity: 0.7;
}

/* Deployment config / local infra — section heading within a card */
.bs-about-card-heading {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-brand);
    padding: 0.6rem 0 0.3rem;
    border-bottom: 2px solid var(--bs-brand-light);
    margin-top: 0.5rem;
}

/* Deployment config — grid row (3-col: label | value+notes | status) */
.bs-about-deploy-row {
    display: grid;
    grid-template-columns: 140px 1fr 80px;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-light);
    align-items: center;
}

/* Deployment config — label cell */
.bs-about-deploy-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-text);
}

/* Deployment config — icon inside label */
.bs-about-deploy-icon {
    color: var(--bs-brand);
    width: 14px;
    text-align: center;
}

/* Deployment config — value line */
.bs-about-deploy-value {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--bs-text);
}

/* Local infra — grid row (2-col: label | detail) */
.bs-about-infra-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bs-border-light);
    align-items: start;
}

/* Local infra — label cell */
.bs-about-infra-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-text);
}

/* Local infra — value (monospace) */
.bs-about-infra-value {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--bs-text);
    font-family: monospace;
}

/* Review items — icon for done status */
.bs-about-icon-done {
    color: #4caf50;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Review items — icon for partial status */
.bs-about-icon-partial {
    color: #ff9800;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Review items — icon for pending status */
.bs-about-icon-pending {
    color: #bdbdbd;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Review items — title text (done state, text-decoration set dynamically per status) */
.bs-about-item-title {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Review items — description text */
.bs-about-item-desc {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
    margin-top: 0.05rem;
}

/* Review items — impl line icon */
.bs-about-impl-icon {
    font-size: 0.45rem;
    margin-right: 0.25rem;
    opacity: 0.6;
}

/* Review items — improve line icon */
.bs-about-improve-icon {
    font-size: 0.4rem;
    margin-right: 0.25rem;
    opacity: 0.7;
}

/* Review 002/004/005 note — icon in note card */
.bs-about-note-icon {
    font-size: 0.65rem;
}

/* Review 002/004/005 — files/impl line */
.bs-about-files-line {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
    margin-left: 1rem;
    margin-top: 0.15rem;
    font-family: monospace;
}

/* Review 004 DONE badge */
.bs-about-done-badge {
    font-size: 0.5rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background: #10b98115;
    color: var(--bs-success);
    font-weight: 600;
    margin-left: auto;
}

/* Review 005 REQUIREMENT badge */
.bs-about-req-badge {
    font-size: 0.5rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background: #ff980015;
    color: #e65100;
    font-weight: 600;
    margin-left: auto;
}

/* Review 002 about-impl line inside innerHTML (inline class on container) */
.bs-about-impl-line {
    margin-left: 1rem;
}

/* Roadmap — dependency graph bar */
.bs-about-dep-graph {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    background: var(--bs-bg-subtle);
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-md);
    margin-bottom: var(--bs-space-sm);
    font-size: 0.65rem;
    color: var(--bs-text-secondary);
}

/* Roadmap — dep graph icon */
.bs-about-dep-icon {
    color: var(--bs-text-faint);
    margin-right: 0.15rem;
}

/* Roadmap — dep separator dot */
.bs-about-dep-sep {
    color: var(--bs-text-faint);
}

/* Roadmap — phase card wrapper */
.bs-about-phase-card {
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-md);
    margin-bottom: 0.4rem;
    overflow: clip;
}

/* Roadmap — phase header */
.bs-about-phase-hdr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--bs-bg-subtle);
    border-bottom: 1px solid var(--bs-border);
    cursor: pointer;
}

/* Roadmap — phase title text */
.bs-about-phase-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--bs-text);
}

/* Roadmap — phase source text */
.bs-about-phase-source {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
}

/* Roadmap — phase source file-alt icon */
.bs-about-phase-src-icon {
    margin-right: 2px;
    font-size: 0.45rem;
}

/* Roadmap — phase count badge */
.bs-about-phase-count {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--bs-text-secondary);
}

/* Roadmap — phase body (collapsible) */
.bs-about-phase-body {
    padding: 0.4rem 0.6rem;
}

/* Roadmap — phase summary accent strip */
.bs-about-phase-summ {
    font-size: 0.7rem;
    color: var(--bs-text-secondary);
    margin-bottom: 0.35rem;
    line-height: 1.45;
    border-left: 3px solid var(--bs-primary-200);
    padding: 0.35rem 0.5rem;
    background: var(--bs-bg-subtle);
    border-radius: 0 var(--bs-radius-sm) var(--bs-radius-sm) 0;
}

/* Roadmap — meta row */
.bs-about-phase-meta {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
}

/* Roadmap — meta item text */
.bs-about-phase-meta-item {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
}

/* Roadmap — meta small icon */
.bs-about-phase-meta-icon {
    margin-right: 2px;
    font-size: 0.45rem;
    opacity: 0.6;
}

/* Roadmap — sub-phase row */
.bs-about-subphase-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
}

/* Roadmap — sub-phase icon (done) */
.bs-about-sp-icon-done {
    color: #10b981;
    font-size: 0.7rem;
}

/* Roadmap — sub-phase icon (pending) */
.bs-about-sp-icon-pending {
    color: var(--bs-text-faint);
    font-size: 0.7rem;
}

/* Roadmap — sub-phase text done */
.bs-about-sp-text-done {
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: line-through;
    color: var(--bs-text-faint);
}

/* Roadmap — sub-phase text pending */
.bs-about-sp-text-pending {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-text);
}

/* Roadmap — workboard badge */
.bs-about-wb-badge {
    font-size: 0.5rem;
    padding: 0.1rem 0.25rem;
    background: rgba(100,100,100,0.08);
    border-radius: 3px;
    color: var(--bs-text-muted);
}

/* Roadmap — stats badge inner span */
.bs-about-stats-badge {
    padding: 0.15rem 0.4rem;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-radius: var(--bs-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
}

/* Roadmap — progress bar wrapper */
.bs-about-prog-wrap {
    height: 3px;
    background: var(--bs-border);
    border-radius: 2px;
    margin-top: 0.3rem;
    overflow: hidden;
}

/* Development Plan — services audit header color override (purple) */
.bs-about-audit-header {
    color: #7B1FA2;
}

/* Development Plan — binding row code */
.bs-about-binding-code {
    font-size: 0.7rem;
    font-weight: 600;
    color: #7B1FA2;
    white-space: nowrap;
}

/* Development Plan — phase header flex-row */
.bs-about-phase-header-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Development Plan — phase title label */
.bs-about-phase-label {
    font-size: 0.8rem;
    font-weight: 700;
}

/* Development Plan — progress bar indent */
.bs-about-phase-bar-wrap {
    margin-bottom: 0.4rem;
    margin-left: 2rem;
}

/* Development Plan — check icon (done) */
.bs-about-check-done {
    color: var(--bs-success);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Development Plan — circle icon (pending) */
.bs-about-check-pending {
    color: #d1d5db;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Development Plan — item id label */
.bs-about-item-id {
    color: var(--bs-text-muted);
    font-size: 0.6rem;
    flex-shrink: 0;
    width: 40px;
}

/* Recommendations / alert box border-radius fix */
.bs-about-rec-box {
    border-radius: var(--bs-radius);
}

/* DevNotes — card body text */
.bs-devnotes-body {
    font-size: 0.75rem;
    color: var(--bs-text-dark);
    line-height: 1.6;
}

/* DevNotes — paragraph recommendation note */
.bs-devnotes-rec {
    margin-top: 0.5rem;
    color: var(--bs-text-muted);
}

/* DevNotes — WB-018 section heading */
.bs-devnotes-wb018 {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.95rem;
    color: var(--bs-danger);
    border-bottom: 2px solid #fecaca;
    padding-bottom: 0.3rem;
}

/* DevNotes — WB-018 intro paragraph */
.bs-devnotes-wb018-intro {
    margin-bottom: 0.5rem;
    color: var(--bs-text-muted);
}

/* Urgent Plan — progress bar outer */
.bs-about-urgent-bar-outer {
    background: var(--bs-border);
    border-radius: var(--bs-radius-sm);
    height: 8px;
    overflow: hidden;
}

/* Urgent Plan — checklist item icon (done, check) */
.bs-about-ul-check {
    color: #4caf50;
    font-size: 0.85rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Urgent Plan — checklist item icon (pending, circle) */
.bs-about-ul-circle {
    color: var(--bs-text-faint);
    font-size: 0.85rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Urgent Plan — item title (done) */
.bs-about-ul-title-done {
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: line-through;
    color: var(--bs-text-faint);
}

/* Urgent Plan — item title (pending) */
.bs-about-ul-title-pending {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-text);
}

/* Urgent Plan — item description text */
.bs-about-ul-desc {
    font-size: 0.65rem;
    color: #888;
    margin-top: 0.1rem;
}

/* Implementation todo — section header title */
.bs-about-todo-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e40af;
}

/* Implementation todo — progress bar margin */
.bs-about-todo-bar {
    margin-bottom: 0.5rem;
}

/* Implementation todo — item check (done) */
.bs-about-todo-check-done {
    color: var(--bs-success);
    margin-top: 2px;
}

/* Implementation todo — item check (pending) */
.bs-about-todo-check-pending {
    color: var(--bs-text-faint);
    margin-top: 2px;
}

/* Implementation todo — item text (done) */
.bs-about-todo-text-done {
    color: var(--bs-text-muted);
}

/* Implementation todo — item text (pending) */
.bs-about-todo-text-pending {
    color: var(--bs-text);
}

/* Workboard — filter label */
.bs-about-filter-label {
    font-size: 0.7rem;
    color: var(--bs-text-faint);
    margin-right: 0.25rem;
}

/* Workboard — bottom progress label */
.bs-about-prog-label {
    font-size: 0.7rem;
    color: var(--bs-text-faint);
}

/* Workboard — bottom progress bar container */
.bs-about-prog-bar-outer {
    flex: 1;
    max-width: 250px;
    height: 6px;
    background: var(--bs-border);
    border-radius: 3px;
    overflow: hidden;
}

/* Workboard — bottom progress count text */
.bs-about-prog-count {
    font-size: 0.7rem;
    font-weight: 600;
    color: #4b5563;
}

/* Workboard — empty filter icon */
.bs-about-empty-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Workboard — attended items empty icon */
.bs-about-attended-empty-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.4;
}

/* Workboard — source file icon */
.bs-about-src-icon {
    margin-right: 2px;
}

/* Workboard — reset undo icon */
.bs-about-undo-icon {
    margin-right: 3px;
}

/* Attended items count badge border-radius */
.bs-about-count-badge {
    border-radius: 999px;
}

/* Training — progress bar margin */
.bs-about-training-bar {
    margin-top: 0.5rem;
}

/* Training — bar content-defined label */
.bs-about-training-bar-label {
    font-size: 0.55rem;
    color: var(--bs-text-secondary);
    margin-bottom: 0.15rem;
}

/* Training — role coverage matrix wrapper */
.bs-about-matrix-wrap {
    margin-top: 0.5rem;
}

/* Training — matrix label */
.bs-about-matrix-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bs-text-secondary);
    margin-bottom: 0.3rem;
}

/* Training — matrix table */
.bs-about-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.6rem;
}

/* Training — matrix header cell (role column) */
.bs-about-matrix-th-role {
    text-align: left;
    padding: 0.2rem 0.3rem;
    border-bottom: 2px solid #e5e7eb;
    font-weight: 600;
    color: var(--bs-text);
}

/* Training — matrix header cell (module columns) */
.bs-about-matrix-th-mod {
    padding: 0.2rem;
    border-bottom: 2px solid #e5e7eb;
    text-align: center;
    min-width: 30px;
}

/* Training — matrix module icon */
.bs-about-matrix-icon {
    font-size: 0.5rem;
}

/* Training — matrix td (role name) */
.bs-about-matrix-td-role {
    padding: 0.2rem 0.3rem;
    border-bottom: 1px solid var(--bs-border-light);
    font-weight: 600;
    color: var(--bs-text);
    white-space: nowrap;
}

/* Training — matrix td (module cell) */
.bs-about-matrix-td-mod {
    padding: 0.2rem;
    border-bottom: 1px solid var(--bs-border-light);
    text-align: center;
}

/* Training — matrix check icon */
.bs-about-matrix-check {
    color: var(--bs-success);
    font-size: 0.5rem;
}

/* Training — matrix empty cell placeholder */
.bs-about-matrix-empty {
    color: #e5e7eb;
}

/* Training — video description */
.bs-about-video-desc {
    font-size: 0.65rem;
    color: var(--bs-text-secondary);
    margin-bottom: 0.5rem;
}

/* Training — video card header row */
.bs-about-video-hdr {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
}

/* Training — video card id text */
.bs-about-video-id {
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 2rem;
}

/* Training — video section count */
.bs-about-video-sec-count {
    font-size: 0.55rem;
    color: #888;
    margin-right: 0.3rem;
}

/* Training — video section chevron */
.bs-about-video-chevron {
    color: var(--bs-text-muted);
    font-size: 0.5rem;
    transition: transform 0.2s;
}

/* Training — video card summary */
.bs-about-video-summary {
    font-size: 0.6rem;
    color: var(--bs-text-secondary);
    padding: 0 0.5rem 0.4rem;
}

/* Training — video card body (collapsible) */
.bs-about-video-body {
    padding: 0.3rem 0.5rem;
}

/* Training — section row (alternating bg set dynamically) */
.bs-about-video-srow {
    padding: 0.3rem 0.4rem;
}

/* Training — section row alt background */
.bs-about-video-srow-alt {
    background: #fafbfc;
}

/* Training — timestamp text */
.bs-about-video-time {
    font-size: 0.6rem;
    font-weight: 700;
    font-family: monospace;
    min-width: 2.2rem;
}

/* Training — section title */
.bs-about-video-stitle {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bs-text);
}

/* Training — screen direction line */
.bs-about-video-screen {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
    padding-left: 2.2rem;
    margin-top: 0.1rem;
}

/* Training — screen direction icon */
.bs-about-video-screen-icon {
    margin-right: 0.25rem;
    font-size: 0.45rem;
    opacity: 0.7;
}

/* Training — narration line */
.bs-about-video-narr {
    font-size: 0.55rem;
    color: var(--bs-text-secondary);
    padding-left: 2.2rem;
    margin-top: 0.1rem;
    font-style: italic;
}

/* Training — narration mic icon */
.bs-about-video-narr-icon {
    margin-right: 0.25rem;
    font-size: 0.45rem;
    color: #0d9488;
    opacity: 0.7;
}

/* Training — module card header row */
.bs-about-mod-hdr {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
}

/* Training — module icon */
.bs-about-mod-icon {
    font-size: 0.7rem;
}

/* Training — module body (collapsible) */
.bs-about-mod-body {
    padding: 0.35rem 0.5rem;
    font-size: 0.6rem;
}

/* Training — module topic chip */
.bs-about-mod-topic {
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background: #f1f5f9;
    color: var(--bs-text-secondary);
}

/* Training — module learning objective line */
.bs-about-mod-obj {
    font-size: 0.55rem;
    color: var(--bs-text-secondary);
    padding-left: 0.5rem;
}

/* Training — module objective check icon */
.bs-about-mod-obj-icon {
    color: var(--bs-success);
    margin-right: 0.2rem;
    font-size: 0.45rem;
}

/* Training — role badge */
.bs-about-mod-role-badge {
    font-size: 0.5rem;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    background: #8b5cf615;
    color: var(--bs-purple);
    font-weight: 600;
}

/* Training — compact topics wrapper */
.bs-about-mod-compact-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    padding: 0 0.5rem 0.3rem;
}

/* Training — compact topic chip */
.bs-about-mod-compact-chip {
    font-size: 0.5rem;
    padding: 0.05rem 0.2rem;
    border-radius: 2px;
    background: #f1f5f9;
    color: #888;
}

/* Training — compact topic overflow label */
.bs-about-mod-compact-more {
    font-size: 0.5rem;
    color: var(--bs-text-muted);
}

/* Training — topics flex row */
.bs-about-mod-topics-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-bottom: 0.3rem;
}

/* Training — role badges row */
.bs-about-mod-roles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-top: 0.3rem;
}

/* Training — QRC card */
.bs-about-qrc-card {
    border-radius: var(--bs-radius);
    padding: 0.5rem;
    background: white;
}

/* Training — QRC header row */
.bs-about-qrc-hdr {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

/* Training — QRC icon */
.bs-about-qrc-icon {
    font-size: 0.65rem;
}

/* Training — QRC step list */
.bs-about-qrc-list {
    margin: 0;
    padding-left: 1rem;
    font-size: 0.6rem;
    color: var(--bs-text-secondary);
    line-height: 1.5;
}

/* Training — QRC grid override (wider columns) */
.bs-about-qrc-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* Training — module grid override for override col */
.bs-about-mod-grid-cols {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* LiveDocs — section border-bottom (set dynamically for all but last) */
/* (kept dynamic via .style.borderBottom since it depends on secIdx) */

/* LiveDocs — caption camera icon */
.bs-about-doc-cam-icon {
    margin-right: 0.25rem;
    opacity: 0.5;
}

/* LiveDocs — Try It arrow icon */
.bs-about-trythis-icon {
    margin-right: 0.3rem;
    font-size: 0.5rem;
}

/* DatabasePlan — service inventory row */
.bs-about-svc-row {
    display: grid;
    grid-template-columns: 110px 40px 1fr;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--bs-border-light);
    align-items: start;
}

/* DatabasePlan — service name cell */
.bs-about-svc-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-text);
    display: flex;
    align-items: center;
}

/* DatabasePlan — service prefix cell */
.bs-about-svc-prefix {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
    font-family: monospace;
}

/* DatabasePlan — service description */
.bs-about-svc-desc {
    font-size: 0.6rem;
    color: var(--bs-text);
}

/* DatabasePlan — service table list */
.bs-about-svc-tables {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
    font-family: monospace;
    margin-top: 1px;
}

/* DatabasePlan — service table count */
.bs-about-svc-count {
    color: var(--bs-text-muted);
}

/* DatabasePlan — service status dot (loaded) */
.bs-about-svc-dot-ok {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-success);
    margin-right: 4px;
}

/* DatabasePlan — service status dot (missing) */
.bs-about-svc-dot-err {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-danger);
    margin-right: 4px;
}

/* DatabasePlan — metrics summary row */
.bs-about-metrics-row {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
}

/* DatabasePlan — category header (color set dynamically) */
.bs-about-cat-hdr {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.5rem 0 0.25rem;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin-top: 0.4rem;
}

/* DatabasePlan — extension group header */
.bs-about-ext-hdr {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--bs-brand);
    padding: 0.4rem 0 0.2rem;
    margin-top: 0.3rem;
}

/* DatabasePlan — extension group inline code */
.bs-about-ext-code {
    font-size: 0.6rem;
    background: var(--bs-brand-light);
    padding: 1px 4px;
    border-radius: 3px;
}

/* DatabasePlan — extension service count */
.bs-about-ext-count {
    color: var(--bs-text-muted);
    font-weight: 400;
}

/* DatabasePlan — extension table entry */
.bs-about-ext-table {
    font-size: 0.6rem;
    padding: 0.15rem 0 0.15rem 1rem;
    color: var(--bs-text);
    border-left: 2px solid var(--bs-border-light);
    margin-left: 0.5rem;
}

/* DatabasePlan — column extension row */
.bs-about-colext-row {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--bs-border-light);
}

/* DatabasePlan — column extension target label */
.bs-about-colext-target {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-brand);
}

/* DatabasePlan — column extension columns list */
.bs-about-colext-cols {
    font-size: 0.6rem;
    color: var(--bs-text-muted);
    font-family: monospace;
    padding-left: 1rem;
    margin-top: 2px;
}

/* DatabasePlan — deployment step row */
.bs-about-deploy-step-row {
    display: grid;
    grid-template-columns: 28px 1fr 70px;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--bs-border-light);
    align-items: start;
}

/* DatabasePlan — step number circle */
.bs-about-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bs-brand-light);
    color: var(--bs-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
}

/* DatabasePlan — step label */
.bs-about-step-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--bs-text);
}

/* DatabasePlan — step detail */
.bs-about-step-detail {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* DatabasePlan — step status cell */
.bs-about-step-status {
    text-align: center;
}

/* DatabasePlan — fixes row */
.bs-about-fixes-row {
    display: grid;
    grid-template-columns: 1fr 60px;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--bs-border-light);
}

/* DatabasePlan — fixes filename */
.bs-about-fixes-file {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--bs-text);
    font-family: monospace;
}

/* DatabasePlan — fixes description */
.bs-about-fixes-desc {
    font-size: 0.55rem;
    color: var(--bs-text-muted);
}

/* DatabasePlan — fixes status cell */
.bs-about-fixes-status {
    text-align: center;
}

/* Training — section header colour override (teal) */
.bs-about-training-hdr {
    color: #0d9488;
}

/* Roadmap — body padding shorthand (applied via .style.padding in _collapsibleSection render) */
/* (this is a one-off dynamic padding, kept inline) */

/* DatabasePlan — architecture overview prose container */
.bs-about-arch-prose {
    font-size: 0.7rem;
    color: var(--bs-text);
    line-height: 1.6;
    padding: 0.5rem 0;
}

/* DatabasePlan — architecture overview paragraph spacing */
.bs-about-arch-p {
    margin-bottom: 0.6rem;
}

/* DatabasePlan — description paragraph below section headers */
.bs-about-section-desc {
    font-size: 0.65rem;
    color: var(--bs-text-muted);
    padding: 0.3rem 0 0.5rem;
    line-height: 1.5;
}

/* DatabasePlan — code block (db-config.php prefix list) */
.bs-about-code-block {
    background: var(--bs-bg-dark, #1e1e1e);
    border-radius: 6px;
    padding: 0.75rem;
    font-family: monospace;
    font-size: 0.6rem;
    color: #d4d4d4;
    line-height: 1.6;
    overflow-x: auto;
}

/* DatabasePlan — boot flow monospace block */
.bs-about-flow-block {
    font-family: monospace;
    font-size: 0.6rem;
    color: var(--bs-text);
    line-height: 1.7;
    padding: 0.5rem;
    background: var(--bs-bg-alt);
    border-radius: 6px;
}

/* DatabasePlan — boot flow indented line */
.bs-about-flow-indent {
    padding-left: 1.5rem;
}

/* DatabasePlan — boot flow warning line */
.bs-about-flow-warn {
    padding-left: 1.5rem;
    color: var(--bs-warning);
}

/* DatabasePlan — boot flow muted line */
.bs-about-flow-muted {
    color: var(--bs-text-muted);
}

/* DatabasePlan — code syntax: keyword */
.bs-about-syn-key {
    color: #569cd6;
}

/* DatabasePlan — code syntax: string */
.bs-about-syn-str {
    color: #ce9178;
}

/* DatabasePlan — code syntax: operator */
.bs-about-syn-op {
    color: #d4d4d4;
}

/* Workboard stats badge function (badge()) */
.bs-about-wb-stat-badge {
    padding: 0.15rem 0.4rem;
    border-radius: var(--bs-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── BSQRViews — QR Operations Centre ── */

/* Root container for QR tab content */
.bs-qr-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Left entity type sidebar */
.bs-qr-sidebar {
    flex: 0 0 auto;
    max-width: 220px;
    border-right: var(--ui-border-width, 1px) solid var(--ui-gray-200, #e5e7eb);
    overflow-y: auto;
    padding-right: var(--ui-space-3, 0.75rem);
}

/* Info card (fields, results, project) */
.bs-qr-info-card {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg, 8px);
    padding: var(--ui-space-4);
    margin-bottom: var(--ui-space-4, 1rem);
    box-shadow: var(--ui-shadow-sm);
}

/* Info card section label */
.bs-qr-card-label {
    font-size: var(--ui-text-xs, 0.75rem);
    font-weight: var(--ui-font-semibold, 600);
    color: var(--ui-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ui-space-2, 0.5rem);
}

/* Info card key-value row */
.bs-qr-kv-row {
    display: grid;
    grid-template-columns: minmax(100px, auto) 1fr;
    gap: var(--ui-space-3);
    padding: var(--ui-space-1) 0;
    font-size: var(--ui-text-xs, 0.75rem);
    border-bottom: 1px solid var(--ui-gray-100);
}
.bs-qr-kv-row:last-child {
    border-bottom: none;
}

/* Info card key */
.bs-qr-kv-key {
    color: var(--ui-gray-500);
}

/* Info card value */
.bs-qr-kv-val {
    font-weight: var(--ui-font-medium, 500);
    color: var(--ui-gray-700);
}

/* Section margin-bottom — card wrapper for tag/detail sections */
.bs-qr-section-mb {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
    margin-bottom: var(--ui-space-4, 1rem);
    box-shadow: var(--ui-shadow-sm);
}

/* Tag section heading */
.bs-qr-tag-section-label {
    font-size: var(--ui-text-xs, 0.75rem);
    font-weight: var(--ui-font-semibold, 600);
    color: var(--ui-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ui-space-3);
    padding-bottom: var(--ui-space-2);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

/* Tag row (status + code + meta) */
.bs-qr-tag-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2, 0.5rem);
    padding: var(--ui-space-2, 0.5rem);
    background: var(--ui-gray-50, #f9fafb);
    border-radius: var(--ui-radius-md, 6px);
    margin-bottom: var(--ui-space-2, 0.5rem);
    font-size: var(--ui-text-xs, 0.75rem);
}

/* Revoke button inside tag row */
.bs-qr-revoke-btn {
    padding: 2px 8px;
    font-size: var(--ui-text-2xs, 0.65rem);
    background: var(--ui-gray-100);
    color: var(--ui-gray-500);
    border: var(--ui-border-width, 1px) solid var(--ui-gray-300);
    margin-left: 4px;
}

/* Create-tag button (full width) */
.bs-qr-create-tag-btn {
    width: 100%;
    margin-top: var(--ui-space-2, 0.5rem);
}

/* QR preview section (centered, card wrapper) */
.bs-qr-preview-section {
    text-align: center;
    margin-bottom: var(--ui-space-4, 1rem);
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-5);
    box-shadow: var(--ui-shadow-sm);
}

/* QR code image box */
.bs-qr-preview-box {
    display: inline-block;
    padding: var(--ui-space-3, 0.75rem);
    background: white;
    border-radius: var(--ui-radius-lg, 8px);
    box-shadow: var(--ui-shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

/* QR code string below preview */
.bs-qr-code-str {
    margin-top: var(--ui-space-2, 0.5rem);
    font-size: var(--ui-text-xs, 0.7rem);
    font-family: monospace;
    color: var(--ui-gray-500, #6b7280);
    word-break: break-all;
}

/* Print button 2-column grid */
.bs-qr-print-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-space-2, 0.5rem);
    margin-bottom: var(--ui-space-4, 1rem);
}

/* Print button inner layout */
.bs-qr-print-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--ui-space-3, 0.75rem);
}

/* Print button label text */
.bs-qr-print-btn-label {
    font-size: var(--ui-text-xs, 0.75rem);
    font-weight: var(--ui-font-semibold, 600);
}

/* Print button description text */
.bs-qr-print-btn-desc {
    font-size: var(--ui-text-2xs, 0.6rem);
    color: var(--ui-gray-400);
}

/* Batch bar (below list) */
.bs-qr-batch-bar {
    flex-shrink: 0;
    border-top: var(--ui-border-width, 1px) solid var(--ui-gray-200, #e5e7eb);
    padding-top: var(--ui-space-3, 0.75rem);
    margin-top: var(--ui-space-3, 0.75rem);
    display: flex;
    gap: var(--ui-space-2, 0.5rem);
}

/* Flex-1 batch button */
.bs-qr-batch-btn {
    flex: 1;
}

/* Modal body column layout */
.bs-qr-modal-body {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3, 0.75rem);
}

/* Untagged list scroll container */
.bs-qr-untagged-list {
    max-height: 200px;
    overflow-y: auto;
    border: var(--ui-border-width, 1px) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md, 6px);
    padding: var(--ui-space-2, 0.5rem);
}

/* Untagged entity row */
.bs-qr-untagged-row {
    font-size: var(--ui-text-xs, 0.75rem);
    padding: 2px 0;
    color: var(--ui-gray-600);
}

/* "...and N more" row */
.bs-qr-untagged-more {
    font-size: var(--ui-text-xs, 0.75rem);
    color: var(--ui-gray-400);
    padding-top: 4px;
}

/* Log list (scan history / session log) */
.bs-qr-log-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2, 0.5rem);
}

/* Scan / session log row */
.bs-qr-scan-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2, 0.5rem);
    padding: var(--ui-space-2, 0.5rem);
    background: var(--ui-gray-50, #f9fafb);
    border-radius: var(--ui-radius-md, 6px);
    font-size: var(--ui-text-xs, 0.75rem);
}

/* Scan row time column (min-width) */
.bs-qr-scan-row-time {
    color: var(--ui-gray-500);
    min-width: 60px;
}

/* Scan row code/label (bold) */
.bs-qr-scan-row-code {
    font-weight: var(--ui-font-semibold, 600);
    color: var(--ui-gray-700);
    flex: 1;
}

/* Scan row secondary text */
.bs-qr-scan-row-meta {
    color: var(--ui-gray-400);
}

/* Scan row status (right-aligned) */
.bs-qr-scan-row-status {
    margin-left: auto;
    font-weight: var(--ui-font-medium, 500);
}

/* About tab: header section */
.bs-qr-about-header {
    margin-bottom: var(--ui-space-4, 1rem);
}

/* About tab: page title */
.bs-qr-about-title {
    font-size: var(--ui-text-xl, 1.25rem);
    font-weight: var(--ui-font-bold, 700);
    color: var(--ui-gray-800, #1f2937);
    margin-bottom: var(--ui-space-2, 0.5rem);
}

/* About tab: intro text */
.bs-qr-about-intro {
    font-size: var(--ui-text-sm, 0.85rem);
    color: var(--ui-gray-500, #6b7280);
    line-height: 1.6;
}

/* About tab: feature card grid */
.bs-qr-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-space-3, 0.75rem);
    margin-bottom: var(--ui-space-4, 1rem);
}

/* About tab: individual feature card */
.bs-qr-about-feature-card {
    background: var(--ui-gray-50, #f9fafb);
    border-radius: var(--ui-radius-lg, 8px);
    padding: var(--ui-space-3, 0.75rem);
}

/* About tab: feature card heading */
.bs-qr-about-feature-title {
    font-size: var(--ui-text-sm, 0.85rem);
    font-weight: var(--ui-font-semibold, 600);
    color: var(--ui-primary, #3b82f6);
    margin-bottom: var(--ui-space-2, 0.5rem);
}

/* About tab: feature card body text */
.bs-qr-about-feature-body {
    font-size: var(--ui-text-xs, 0.75rem);
    color: var(--ui-gray-600, #4b5563);
    line-height: 1.5;
}

/* About tab: roadmap card */
.bs-qr-about-roadmap {
    background: var(--ui-gray-50, #f9fafb);
    border-radius: var(--ui-radius-lg, 8px);
    padding: var(--ui-space-3, 0.75rem);
    margin-bottom: var(--ui-space-4, 1rem);
}

/* About tab: roadmap heading */
.bs-qr-about-roadmap-title {
    font-size: var(--ui-text-sm, 0.85rem);
    font-weight: var(--ui-font-semibold, 600);
    color: var(--ui-gray-700, #374151);
    margin-bottom: var(--ui-space-2, 0.5rem);
}

/* About tab: roadmap body text */
.bs-qr-about-roadmap-body {
    font-size: var(--ui-text-xs, 0.75rem);
    color: var(--ui-gray-600, #4b5563);
    line-height: 1.7;
}

/* About tab: roadmap phase entry */
.bs-qr-about-phase {
    margin-bottom: 4px;
}

/* About tab: footer credit line */
.bs-qr-about-footer {
    font-size: var(--ui-text-2xs, 0.65rem);
    color: var(--ui-gray-400, #9ca3af);
    text-align: center;
}

/* Modal info text (batch modal) */
.bs-qr-modal-info {
    font-size: var(--ui-text-sm, 0.85rem);
    color: var(--ui-gray-500);
}

/* Batch modal info row */
.bs-qr-modal-info-row {
    margin-bottom: var(--ui-space-2, 0.5rem);
}

/* Batch modal untagged highlight */
.bs-qr-modal-untagged {
    color: var(--ui-primary);
    font-weight: var(--ui-font-semibold, 600);
}

/* Batch success message */
.bs-qr-batch-success {
    text-align: center;
    padding: var(--ui-space-4, 1rem);
}

/* Batch success icon */
.bs-qr-batch-success-icon {
    font-size: 2rem;
    color: var(--ui-accent-500, #22c55e);
    display: block;
    margin-bottom: var(--ui-space-2, 0.5rem);
}

/* Batch success count text */
.bs-qr-batch-success-text {
    font-size: var(--ui-text-sm, 0.85rem);
    font-weight: var(--ui-font-semibold, 600);
    color: var(--ui-gray-700);
}

/* No QR data placeholder box */
.bs-qr-no-data-box {
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-gray-400);
    font-size: var(--ui-text-sm);
}

/* "LOCKED" badge */
.bs-qr-locked-badge {
    font-size: var(--ui-text-2xs, 0.65rem);
    color: var(--ui-primary);
    font-weight: var(--ui-font-semibold, 600);
    text-transform: uppercase;
}

/* ── BSQRViews v3 — Station-Based QR Operations Centre ── */

/* Root: flex column so scan bar sits above the control-stage */
.bs-qr-root {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Scan Bar ── */
.bs-qr-scan-bar {
    flex-shrink: 0;
    background: var(--ui-gray-50);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    padding: var(--ui-space-2) var(--ui-space-4);
    transition: background 0.25s;
}

.bs-qr-scan-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    background: var(--ui-white);
    border: 2px solid var(--ui-gray-300);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-2) var(--ui-space-3);
    transition: border-color 0.15s;
}

.bs-qr-scan-input-wrap:focus-within {
    border-color: var(--ui-primary-400);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary-400) 18%, transparent);
}

.bs-qr-scan-icon {
    color: var(--ui-gray-400);
    font-size: var(--ui-text-base);
    flex-shrink: 0;
}

.bs-qr-scan-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--ui-text-base);
    font-family: monospace;
    color: var(--ui-gray-800);
}

.bs-qr-scan-input::placeholder {
    color: var(--ui-gray-400);
    font-family: inherit;
    font-size: var(--ui-text-sm);
}

.bs-qr-scan-status {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-400);
    flex-shrink: 0;
    min-width: 180px;
    text-align: right;
}

.bs-qr-scan-status-success { color: var(--ui-accent-600); }
.bs-qr-scan-status-error   { color: #ef4444; }
.bs-qr-scan-status-warn    { color: var(--ui-secondary-600); }

/* Flash animations */
@keyframes bs-qr-flash-success {
    0%   { background: color-mix(in srgb, var(--ui-accent-400) 25%, transparent); }
    100% { background: var(--ui-gray-50); }
}
@keyframes bs-qr-flash-error {
    0%   { background: color-mix(in srgb, #ef4444 20%, transparent); }
    100% { background: var(--ui-gray-50); }
}
@keyframes bs-qr-flash-warn {
    0%   { background: color-mix(in srgb, var(--ui-secondary-400) 20%, transparent); }
    100% { background: var(--ui-gray-50); }
}

.bs-qr-scan-flash-success { animation: bs-qr-flash-success 0.6s ease-out; }
.bs-qr-scan-flash-error   { animation: bs-qr-flash-error 0.6s ease-out; }
.bs-qr-scan-flash-warn    { animation: bs-qr-flash-warn 0.6s ease-out; }

/* ── Geo Indicator ── */
.bs-qr-geo-indicator {
    width: 8px;
    height: 8px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-gray-300);
    flex-shrink: 0;
    transition: background 0.3s;
}
.bs-qr-geo-indicator.bs-qr-geo-active {
    background: var(--ui-accent-500);
    box-shadow: 0 0 4px var(--ui-accent-400);
}
.bs-qr-scan-row-geo {
    color: var(--ui-primary-400);
    font-size: var(--ui-text-2xs);
    flex-shrink: 0;
    cursor: help;
}

/* ── Online/Offline Indicator ── */
.bs-qr-online-indicator {
    display: none;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-medium);
}
.bs-qr-online-indicator.bs-qr-offline {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    border-top: 1px solid color-mix(in srgb, #ef4444 25%, transparent);
    color: #b91c1c;
}
.bs-qr-online-indicator.bs-qr-syncing {
    background: color-mix(in srgb, var(--ui-secondary-400) 12%, transparent);
    border-top: 1px solid var(--ui-secondary-200);
    color: var(--ui-secondary-700);
}
.bs-qr-online-indicator i {
    font-size: var(--ui-text-xs);
}

/* ── GPS Validation ── */
.bs-qr-gps-warning {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    margin-top: var(--ui-space-2);
    background: color-mix(in srgb, var(--ui-secondary-400) 12%, transparent);
    border: 1px solid var(--ui-secondary-300);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    color: var(--ui-secondary-800);
}
.bs-qr-gps-warning i { color: var(--ui-secondary-600); }
.bs-qr-gps-ok {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    margin-top: var(--ui-space-2);
    background: color-mix(in srgb, var(--ui-accent-400) 10%, transparent);
    border: 1px solid var(--ui-accent-300);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    color: var(--ui-accent-800);
}
.bs-qr-gps-ok i { color: var(--ui-accent-600); }
.bs-qr-gps-note {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    margin-top: var(--ui-space-2);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
}
.bs-qr-gps-note i { color: var(--ui-gray-400); }

/* ── Sound Toggle ── */
.bs-qr-scan-sound-toggle {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--ui-gray-300);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-1) var(--ui-space-2);
    color: var(--ui-gray-500);
    cursor: pointer;
    font-size: var(--ui-text-sm);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bs-qr-scan-sound-toggle:hover {
    color: var(--ui-accent-600);
    border-color: var(--ui-accent-300);
    background: var(--ui-accent-50);
}
.bs-qr-scan-sound-toggle.active {
    color: var(--ui-accent-600);
    border-color: var(--ui-accent-300);
    background: var(--ui-accent-50);
}

/* ── Batch Mode ── */
.bs-qr-scan-batch-toggle {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--ui-gray-300);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-1) var(--ui-space-2);
    color: var(--ui-gray-500);
    cursor: pointer;
    font-size: var(--ui-text-sm);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bs-qr-scan-batch-toggle:hover {
    color: var(--ui-secondary-600);
    border-color: var(--ui-secondary-300);
    background: var(--ui-secondary-50);
}
.bs-qr-scan-batch-toggle.active {
    color: var(--ui-white);
    background: var(--ui-secondary-600);
    border-color: var(--ui-secondary-600);
}
.bs-qr-scan-batch-indicator {
    display: none;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    color: var(--ui-secondary-700);
    background: var(--ui-secondary-50);
    border-top: 1px solid var(--ui-secondary-200);
}
.bs-qr-scan-batch-indicator.bs-qr-scan-batch-active {
    display: flex;
}
.bs-qr-scan-batch-count {
    font-weight: var(--ui-font-bold);
    background: var(--ui-secondary-600);
    color: var(--ui-white);
    border-radius: var(--ui-radius-full);
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--ui-space-1);
}

/* ── Camera Toggle ── */
.bs-qr-scan-camera-toggle {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--ui-gray-300);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-1) var(--ui-space-2);
    color: var(--ui-gray-500);
    cursor: pointer;
    font-size: var(--ui-text-sm);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bs-qr-scan-camera-toggle:hover {
    color: var(--ui-primary-600);
    border-color: var(--ui-primary-300);
    background: var(--ui-primary-50);
}
.bs-qr-scan-camera-toggle.active {
    color: var(--ui-white);
    background: var(--ui-primary-600);
    border-color: var(--ui-primary-600);
}
.bs-qr-scan-camera-section {
    display: block;
    margin-top: var(--ui-space-1);
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    position: relative;
}
.bs-qr-scan-camera-section.bs-qr-scan-camera-active {
    background: var(--ui-gray-900);
    border: 2px solid var(--ui-primary-400);
}
.bs-qr-scan-camera-viewfinder {
    width: 100%;
    max-height: 260px;
}
.bs-qr-scan-camera-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-4);
    color: var(--ui-gray-400);
    font-size: var(--ui-text-sm);
}
/* Camera invite panel — compact horizontal bar */
.bs-qr-camera-invite {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--ui-space-2) var(--ui-space-4);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    gap: var(--ui-space-2);
}
.bs-qr-camera-invite:hover {
    background-color: var(--ui-primary-50);
    border-color: var(--ui-primary-300);
}
.bs-qr-camera-invite > i {
    font-size: var(--ui-text-base);
    color: var(--ui-primary-400);
}
.bs-qr-camera-invite-text {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-primary-600);
}
.bs-qr-camera-invite-sub {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    display: none;  /* hide sub-text in compact mode */
}

/* ── Station Nav (horizontal strip replacing sidebar) ── */
.bs-qr-root > .bs-s376 {
    flex-direction: column;
}
.bs-qr-station-sidebar-panel {
    padding: 0 var(--ui-space-4);
    background: var(--ui-white);
    border-right: none;
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    flex-direction: row;
    align-items: center;
    max-width: none;
    flex: none;
}

.bs-qr-stations-section {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    margin-bottom: 0;
}
/* Hide "Stations" label in horizontal mode */
.bs-qr-stations-section > .bs-qr-sidebar-section-label {
    display: none;
}
/* Hide recent scans section — no room in horizontal strip */
.bs-qr-recent-section {
    display: none;
}

.bs-qr-sidebar-section-label {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ui-space-2);
    padding: 0 var(--ui-space-2);
}

.bs-qr-station-btn {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    width: auto;
    padding: var(--ui-space-2) var(--ui-space-3);
    border: none;
    background: transparent;
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 0;
    white-space: nowrap;
}

.bs-qr-station-btn:hover {
    background: var(--ui-gray-100);
    color: var(--ui-gray-800);
}

.bs-qr-station-btn.active {
    background: var(--ui-primary-50);
    color: var(--ui-primary-700);
    font-weight: var(--ui-font-semibold);
}

.bs-qr-station-btn-icon {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.bs-qr-shortcut-hint {
    display: none;
}
.bs-qr-station-btn:hover .bs-qr-shortcut-hint {
    opacity: 1;
}
.bs-qr-station-btn.active .bs-qr-shortcut-hint {
    background: color-mix(in srgb, var(--ui-primary-400) 20%, transparent);
    border-color: var(--ui-primary-300);
    color: var(--ui-primary-700);
    opacity: 1;
}

/* Recent Scans in sidebar */
.bs-qr-recent-section {
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
    padding-top: var(--ui-space-3);
}

.bs-qr-recent-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bs-qr-recent-empty {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    padding: var(--ui-space-3) var(--ui-space-2);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-recent-empty::before {
    content: '\f029'; /* fa-qrcode */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: var(--ui-text-xl);
    color: var(--ui-gray-200);
}

.bs-qr-recent-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) var(--ui-space-2);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-text-xs);
}

.bs-qr-recent-row-error { opacity: 0.55; }

/* Static icon color classes (no inline styles) */
.bs-qr-icon-success { color: var(--ui-accent-500); }
.bs-qr-icon-specimen { color: var(--ui-primary-500); }
.bs-qr-icon-location-lg { color: var(--ui-accent-500); font-size: 1.2rem; }
.bs-qr-icon-arrow { color: var(--ui-gray-400); font-size: 0.7rem; }
.bs-qr-about-title-icon { color: var(--ui-primary-500); margin-right: 8px; }
.bs-qr-code-label { font-size: var(--ui-text-sm); color: var(--ui-gray-500); display: flex; align-items: center; gap: var(--ui-space-2); }

.bs-qr-recent-icon { font-size: 0.65rem; flex-shrink: 0; width: 10px; text-align: center; }
.bs-qr-recent-code { flex: 1; font-family: monospace; font-size: var(--ui-text-xs); color: var(--ui-gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-qr-recent-time { font-size: var(--ui-text-2xs); color: var(--ui-gray-400); flex-shrink: 0; }

/* ── Station Content Area ── */
.bs-qr-station-content {
    padding: var(--ui-space-5);
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    animation: bs-qr-station-enter 0.2s ease-out;
}
@keyframes bs-qr-station-enter {
    from { opacity: 0; transform: translateX(6px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Nested control-stage inside station content fills remaining space */
.bs-qr-station-content > .bs-s376 {
    flex: 1;
    min-height: 300px;
}

/* Station header strip */
.bs-qr-station-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    border-left: 3px solid var(--ui-primary-200);
    background: var(--ui-gray-50);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-radius: var(--ui-radius-md);
    margin-bottom: var(--ui-space-5);
}

.bs-qr-station-header-icon {
    font-size: 1rem;
    color: var(--ui-white, #fff);
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-400);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-primary-400) 30%, transparent);
}
.bs-qr-header-icon-receive { background: var(--ui-accent-500); }
.bs-qr-header-icon-locate  { background: var(--ui-secondary-400); }
.bs-qr-header-icon-print   { background: var(--ui-primary-500); }
.bs-qr-header-icon-audit   { background: var(--ui-gray-500); }

.bs-qr-station-header-title {
    font-size: var(--ui-text-base);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-800);
}

.bs-qr-station-header-sub {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-500);
}

/* ── Welcome / Empty State ── */
.bs-qr-welcome {
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-6) var(--ui-space-4);
    gap: var(--ui-space-4);
}
.bs-qr-welcome-split {
    display: flex;
    gap: var(--ui-space-6);
    align-items: flex-start;
}
.bs-qr-welcome-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--ui-space-4);
}
.bs-qr-welcome-right {
    flex: 0 0 280px;
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}

.bs-qr-welcome-icon {
    font-size: 3rem;
    color: var(--ui-gray-300);
}

.bs-qr-welcome-title {
    font-size: var(--ui-text-xl);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
}

.bs-qr-welcome-body {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-500);
    line-height: 1.6;
}

.bs-qr-welcome-types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    justify-content: center;
}

.bs-qr-welcome-type {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-600);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-full);
}
.bs-qr-welcome-type i {
    color: var(--_type-color, var(--ui-gray-500));
}

.bs-qr-welcome-tips {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    text-align: left;
    width: 100%;
}

.bs-qr-welcome-tip {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-500);
}

.bs-qr-welcome-tip i {
    color: var(--ui-gray-400);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

/* ── Entity Action Card ── */
.bs-qr-action-card {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-left: 3px solid var(--_type-color, var(--ui-primary-500));
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    overflow: clip;
    animation: bs-qr-card-enter 0.25s ease-out;
}
@keyframes bs-qr-card-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.bs-qr-action-card-error {
    border-color: #fca5a5;
    border-left-color: #ef4444;
}

.bs-qr-action-card-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
    background: color-mix(in srgb, var(--_type-color, var(--ui-primary-500)) 6%, white);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.bs-qr-action-card-header-error {
    background: #fef2f2;
    border-bottom-color: #fca5a5;
}

.bs-qr-action-header-icon {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: var(--ui-radius-lg);
    background: color-mix(in srgb, var(--_type-color, var(--ui-primary-500)) 15%, white);
    color: var(--_type-color, var(--ui-primary-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-text-lg);
    flex-shrink: 0;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--_type-color, var(--ui-primary-500)) 20%, transparent);
}

.bs-qr-action-header-text {
    flex: 1;
    min-width: 0;
}

.bs-qr-action-code {
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-font-bold);
    color: var(--ui-gray-800);
    font-family: monospace;
    letter-spacing: 0.02em;
}

.bs-qr-action-type-label {
    font-size: var(--ui-text-2xs);
    color: var(--_type-color, var(--ui-gray-500));
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--ui-font-semibold);
}

.bs-qr-action-error-msg {
    padding: var(--ui-space-4);
    color: #ef4444;
    font-size: var(--ui-text-sm);
}

/* Field grid */
.bs-qr-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1px;
    background: var(--ui-gray-100);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.bs-qr-action-field {
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-3) var(--ui-space-5);
    background: var(--ui-white);
    gap: 3px;
}
.bs-qr-action-field:nth-child(4n+3),
.bs-qr-action-field:nth-child(4n+4) {
    background: var(--ui-gray-50);
}

.bs-qr-action-field-label {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--ui-font-semibold);
}

.bs-qr-action-field-value {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-800);
    font-weight: var(--ui-font-medium);
}

/* Results sub-section */
.bs-qr-action-results {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.bs-qr-action-section-label {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ui-space-2);
}

/* Calibration alert */
.bs-qr-calibration-alert {
    margin: var(--ui-space-3) var(--ui-space-4);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: #fef2f2;
    border-left: 3px solid #ef4444;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-text-sm);
    color: #b91c1c;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}

/* QR preview row inside action card */
.bs-qr-action-preview-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-5);
    background: var(--ui-gray-50);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}

.bs-qr-action-qr-box {
    flex-shrink: 0;
    padding: var(--ui-space-2);
    background: var(--ui-white);
    border-radius: var(--ui-radius-md);
    border: var(--ui-border-width) solid var(--ui-gray-200);
}

/* Action buttons bar */
.bs-qr-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-5);
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
    background: var(--ui-gray-50);
}

/* ── Receive Station: Two-Column Layout ── */
.bs-qr-receive-layout {
    display: flex;
    gap: var(--ui-space-5);
    min-height: 350px;
}
.bs-qr-receive-left {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bs-qr-receive-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
}

/* Filter pills */
.bs-qr-receive-pill-bar {
    display: flex;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-receive-pill {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-full);
    background: var(--ui-white);
    color: var(--ui-gray-500);
    cursor: pointer;
    transition: all 0.15s ease;
}
.bs-qr-receive-pill:hover {
    border-color: var(--ui-primary-300);
    color: var(--ui-primary-600);
}
.bs-qr-receive-pill.active {
    background: var(--ui-primary-50);
    border-color: var(--ui-primary-400);
    color: var(--ui-primary-700);
}
.bs-qr-receive-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--ui-space-1);
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-bold);
    border-radius: var(--ui-radius-full);
    background: var(--ui-gray-200);
    color: var(--ui-gray-600);
}
.bs-qr-receive-pill.active .bs-qr-receive-pill-count {
    background: var(--ui-primary-200);
    color: var(--ui-primary-700);
}

/* Filter input */
.bs-qr-receive-filter-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-receive-filter-row i { color: var(--ui-gray-400); font-size: var(--ui-text-xs); }
.bs-qr-receive-filter-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: var(--ui-text-sm);
    outline: none;
    color: var(--ui-gray-700);
}

/* Queue list */
.bs-qr-receive-queue-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
}
.bs-qr-receive-queue-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    border: var(--ui-border-width) solid transparent;
    transition: all 0.15s ease;
}
.bs-qr-receive-queue-row:hover {
    background: var(--ui-gray-50);
    border-color: var(--ui-gray-200);
}
.bs-qr-receive-queue-row.active {
    background: var(--ui-primary-50);
    border-color: var(--ui-primary-300);
}
.bs-qr-receive-queue-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bs-qr-receive-queue-code {
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-800);
}
.bs-qr-receive-queue-matrix {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
}
.bs-qr-receive-queue-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-6) var(--ui-space-4);
    color: var(--ui-gray-400);
    font-size: var(--ui-text-sm);
    text-align: center;
}
.bs-qr-receive-queue-empty i {
    font-size: 1.4rem;
    color: var(--ui-accent-300);
}

/* Card area and empty state */
.bs-qr-receive-card-area {
    flex: 1;
    min-height: 0;
}
.bs-qr-receive-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-6) var(--ui-space-8);
    color: var(--ui-gray-400);
    font-size: var(--ui-text-sm);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    text-align: center;
}
.bs-qr-receive-prompt i { font-size: 1.8rem; color: var(--ui-accent-300); margin-bottom: var(--ui-space-1); }

/* Condition assessment */
.bs-qr-receive-condition {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
}
.bs-qr-receive-condition-label {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-gray-400);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-receive-condition-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}
.bs-qr-receive-condition-pill {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-medium);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
    color: var(--ui-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}
.bs-qr-receive-condition-pill:hover {
    border-color: var(--ui-gray-300);
    background: var(--ui-gray-50);
}
.bs-qr-receive-condition-pill.active {
    border-color: var(--ui-primary-400);
    background: var(--ui-primary-50);
    color: var(--ui-primary-700);
}
.bs-qr-receive-notes-row {
    margin-top: var(--ui-space-3);
}
.bs-qr-receive-notes-row textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Action bar */
.bs-qr-receive-action-bar {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding-top: var(--ui-space-3);
}
.bs-qr-receive-confirm-btn {
    flex: 1;
}

/* Post-receipt summary */
.bs-qr-receive-summary {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}
.bs-qr-receive-summary-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-sm);
}
.bs-qr-receive-summary-label {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-500);
    min-width: 70px;
}
.bs-qr-receive-summary-note {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    font-style: italic;
}
.bs-qr-receive-summary-auto {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    background: color-mix(in srgb, var(--ui-accent-500) 10%, transparent);
    font-size: var(--ui-text-xs);
    color: var(--ui-accent-700);
}
.bs-qr-receive-next-prompt {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-400);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding-top: var(--ui-space-2);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
}

/* Session list */
.bs-qr-received-section {
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    padding-top: var(--ui-space-4);
}
.bs-qr-received-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    margin-top: var(--ui-space-2);
    max-height: 200px;
    overflow-y: auto;
}
.bs-qr-received-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
}

/* Responsive */
@media (max-width: 700px) {
    .bs-qr-receive-layout {
        flex-direction: column;
    }
    .bs-qr-receive-left {
        flex: none;
    }
    .bs-qr-receive-queue-list {
        max-height: 200px;
    }
}

/* ── Locate Station ── */
.bs-qr-locate-lock-card {
    border: 2px dashed var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
    margin-bottom: var(--ui-space-5);
    background: var(--ui-gray-50);
}

.bs-qr-step-indicator {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-primary-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ui-space-2);
}

.bs-qr-locate-locked-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}

/* ── Locate Station: Two-Column Layout ── */
.bs-qr-locate-layout {
    display: flex;
    gap: var(--ui-space-5);
    min-height: 350px;
}
.bs-qr-locate-left {
    flex: 0 0 55%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bs-qr-locate-left .bs-qr-location-map {
    margin-top: 0;
    flex: 1;
}
.bs-qr-locate-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
}

/* ── Lock card: locked state ── */
.bs-qr-locate-lock-card.locked {
    border-style: solid;
    border-color: var(--ui-accent-500);
    background: var(--ui-accent-50, #ecfdf5);
}

/* ── Contents list (items at location) ── */
.bs-qr-locate-contents {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.bs-qr-locate-contents-header {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-gray-400);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bs-qr-locate-contents-list {
    flex: 1;
    overflow-y: auto;
    max-height: 250px;
}
.bs-qr-locate-contents-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    font-size: var(--ui-text-sm);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-50);
    transition: background 0.12s;
}
.bs-qr-locate-contents-row:last-child { border-bottom: none; }
.bs-qr-locate-contents-row:hover { background: var(--ui-gray-50); }
.bs-qr-locate-contents-code {
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-800);
}
.bs-qr-locate-contents-spacer { flex: 1; }

/* ── Item picker (for check-in) ── */
.bs-qr-locate-picker {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    display: flex;
    flex-direction: column;
}
.bs-qr-locate-picker-header {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-gray-400);
}
.bs-qr-locate-picker-filter {
    padding: var(--ui-space-2) var(--ui-space-4);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.bs-qr-locate-picker-filter input {
    width: 100%;
    font-size: var(--ui-text-sm);
    padding: var(--ui-space-2) var(--ui-space-3);
}
.bs-qr-locate-picker-list {
    max-height: 200px;
    overflow-y: auto;
}
.bs-qr-locate-picker-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    font-size: var(--ui-text-sm);
    cursor: pointer;
    border-bottom: var(--ui-border-width) solid var(--ui-gray-50);
    transition: background 0.12s;
}
.bs-qr-locate-picker-row:hover { background: var(--ui-accent-50, #ecfdf5); }
.bs-qr-locate-picker-row:last-child { border-bottom: none; }
.bs-qr-locate-picker-row i.fa-plus-circle { color: var(--ui-accent-500); }

/* ── Check-in flash animation ── */
@keyframes bsQrCheckinFlash {
    0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    100% { box-shadow: none; }
}
.bs-qr-location-cell--flash {
    animation: bsQrCheckinFlash 0.6s ease-out;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .bs-qr-locate-layout {
        flex-direction: column;
    }
    .bs-qr-locate-left {
        flex: none;
    }
    .bs-qr-locate-left .bs-qr-location-map {
        max-height: 250px;
        overflow-y: auto;
    }
}

/* ── Print Station ── */
.bs-qr-print-type-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1);
    margin-bottom: var(--ui-space-3);
}

.bs-qr-print-type-pill {
    padding: var(--ui-space-1) var(--ui-space-3);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-full);
    background: var(--ui-white);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    transition: background 0.1s, border-color 0.1s;
}

.bs-qr-print-type-pill:hover { background: var(--ui-gray-50); }
.bs-qr-print-type-pill.active {
    background: var(--ui-primary-50);
    border-color: var(--ui-primary-300);
    color: var(--ui-primary-700);
    font-weight: var(--ui-font-semibold);
}

.bs-qr-print-entity-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── Scan View Toggle ── */
.bs-qr-scan-view-toggle {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.bs-qr-scan-view-btn {
    border: var(--ui-border-width) solid var(--ui-gray-200);
    background: var(--ui-white);
    color: var(--ui-gray-400);
    padding: var(--ui-space-1) var(--ui-space-2);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    font-size: var(--ui-text-xs);
    transition: all 0.15s ease;
    line-height: 1;
}
.bs-qr-scan-view-btn:hover { color: var(--ui-primary-500); border-color: var(--ui-primary-300); }
.bs-qr-scan-view-btn.active {
    background: var(--ui-primary-50);
    color: var(--ui-primary-600);
    border-color: var(--ui-primary-300);
}
.bs-qr-scan-view-count {
    margin-left: auto;
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
}
.bs-qr-scan-view-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ── Entity Detail Modal ── */
.bs-qr-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ui-space-2) var(--ui-space-4);
}
.bs-qr-detail-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bs-qr-detail-field-label {
    font-size: var(--ui-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-gray-400);
    font-weight: var(--ui-font-semibold);
}
.bs-qr-detail-field-value {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-800);
}
.bs-qr-detail-child-list,
.bs-qr-detail-event-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    margin-top: var(--ui-space-2);
}
.bs-qr-detail-child-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    transition: background 0.15s ease;
}
.bs-qr-detail-child-row:hover { background: var(--ui-primary-50); }
.bs-qr-detail-child-code { font-weight: var(--ui-font-semibold); }
.bs-qr-detail-event-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-sm);
}

/* ── Audit Station ── */
.bs-qr-audit-filters {
    display: flex;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-4);
    flex-wrap: wrap;
}
.bs-qr-audit-stats {
    margin-bottom: var(--ui-space-3);
}
.bs-qr-audit-dashboard {
    display: flex;
    gap: var(--ui-space-3);
    padding: 0 var(--ui-space-4) var(--ui-space-3);
}
.bs-qr-audit-panel {
    flex: 1;
    background: var(--ui-white);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-3);
    min-width: 0;
}
.bs-qr-audit-panel-title {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--ui-space-2);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-audit-panel-title i {
    color: var(--ui-primary-400);
}
.bs-qr-audit-panel-empty {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-400);
    padding: var(--ui-space-2) 0;
}
.bs-qr-audit-bar-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-1);
}
.bs-qr-audit-bar-label {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-700);
    font-family: monospace;
    min-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-qr-audit-bar-track {
    flex: 1;
    height: 6px;
    background: var(--ui-gray-100);
    border-radius: var(--ui-radius-full);
    overflow: hidden;
}
.bs-qr-audit-bar-fill {
    height: 100%;
    background: var(--ui-primary-500);
    border-radius: var(--ui-radius-full);
    transition: width 0.3s ease;
}
.bs-qr-audit-bar-count {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-500);
    min-width: 24px;
    text-align: right;
}
.bs-qr-audit-action-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) 0;
    font-size: var(--ui-text-sm);
}
.bs-qr-audit-action-row i {
    color: var(--ui-gray-400);
    width: 14px;
    text-align: center;
    font-size: var(--ui-text-xs);
}
.bs-qr-audit-action-name {
    flex: 1;
    color: var(--ui-gray-700);
    text-transform: capitalize;
}
.bs-qr-audit-action-count {
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
}
.bs-qr-audit-action-pct {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-400);
    min-width: 30px;
    text-align: right;
}
.bs-qr-audit-filter-select {
    width: auto;
}
@media (max-width: 700px) {
    .bs-qr-audit-dashboard { flex-direction: column; }
}

/* ── Process Station ── */
.bs-qr-header-icon-process {
    background: var(--ui-accent-100);
    color: var(--ui-accent-700);
}
.bs-qr-process-selector {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: 1px solid var(--ui-gray-100);
}
.bs-qr-process-select {
    margin-top: var(--ui-space-2);
}
.bs-qr-process-pipeline {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-3) var(--ui-space-4);
    overflow-x: auto;
    flex-wrap: wrap;
}
.bs-qr-process-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-2) var(--ui-space-3);
    border-radius: var(--ui-radius-md);
    background: var(--ui-gray-50);
    border: 1px solid var(--ui-gray-200);
    min-width: 70px;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.bs-qr-process-stage-active {
    background: var(--ui-primary-50);
    border-color: var(--ui-primary-300);
}
.bs-qr-process-stage-icon {
    font-size: var(--ui-text-lg);
    color: var(--ui-gray-400);
}
.bs-qr-process-stage-active .bs-qr-process-stage-icon {
    color: var(--ui-primary-600);
}
.bs-qr-process-stage-label {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-medium);
    color: var(--ui-gray-600);
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-qr-process-stage-count {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-bold);
    color: var(--ui-white);
    background: var(--ui-primary-600);
    border-radius: var(--ui-radius-full);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--ui-space-1);
}
.bs-qr-process-arrow {
    color: var(--ui-gray-300);
    font-size: var(--ui-text-xs);
    flex-shrink: 0;
}
.bs-qr-process-card {
    background: var(--ui-white);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
    margin: var(--ui-space-3) var(--ui-space-4);
}
.bs-qr-process-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-process-card-title {
    font-size: var(--ui-text-base);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-800);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-process-card-title i {
    color: var(--ui-accent-600);
}
.bs-qr-process-card-detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-600);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-process-card-detail i {
    color: var(--ui-gray-400);
    margin-right: var(--ui-space-1);
}
.bs-qr-process-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    align-items: center;
    padding-top: var(--ui-space-3);
    border-top: 1px solid var(--ui-gray-100);
}
.bs-qr-process-card-choose {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-500);
    font-weight: var(--ui-font-medium);
}

/* ── Stats Components ── */
.bs-qr-stats-title {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-stats-title i {
    color: var(--ui-primary-400);
}
.bs-qr-stats-subtitle {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bs-qr-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}
.bs-qr-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    min-width: 60px;
    background: var(--ui-white, white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-2) var(--ui-space-2);
}
.bs-qr-stat-value {
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-600);
}
.bs-qr-stat-label {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-500);
}
.bs-qr-stats-empty {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-400);
    padding: var(--ui-space-2) 0;
}

/* Top entities breakdown */
.bs-qr-top-entities {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
}
.bs-qr-top-entity-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    padding: var(--ui-space-1) 0;
}
.bs-qr-top-entity-row i {
    color: var(--_type-color, var(--ui-gray-400));
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}
.bs-qr-top-entity-label {
    flex: 1;
    color: var(--ui-gray-600);
}
.bs-qr-top-entity-count {
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
    font-size: var(--ui-text-xs);
    background: var(--ui-gray-100);
    padding: 0.1rem 0.4rem;
    border-radius: var(--ui-radius-sm);
}

/* ── Pending / Locations Sections ── */
.bs-qr-pending-section,
.bs-qr-locations-overview {
    margin-top: var(--ui-space-4);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
}
.bs-qr-pending-row,
.bs-qr-location-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) 0;
    font-size: var(--ui-text-sm);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.bs-qr-pending-row:last-child,
.bs-qr-location-row:last-child {
    border-bottom: none;
}
.bs-qr-icon-location {
    color: var(--ui-accent-600);
}
.bs-qr-location-count {
    margin-left: auto;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    font-weight: var(--ui-font-medium);
}

/* ── Clickable interactive rows ── */
.bs-qr-clickable {
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.bs-qr-clickable:hover {
    background-color: var(--ui-primary-50);
}
.bs-qr-clickable:active {
    background-color: var(--ui-primary-100);
    transform: scale(0.99);
}

/* ── Phase 9.3: Micro-interactions ── */

/* Station content fade-in */
.bs-qr-station-content {
    animation: bsQrFadeIn 0.2s ease-out;
}
@keyframes bsQrFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Entity action card slide-up on appear */
.bs-qr-action-card {
    animation: bsQrSlideUp 0.25s ease-out;
}
@keyframes bsQrSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Station nav button — active indicator (bottom bar) */
.bs-qr-station-btn {
    position: relative;
}
.bs-qr-station-btn::before {
    content: '';
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ui-primary-500);
    transform: scaleX(0);
    transition: transform 0.15s ease;
}
.bs-qr-station-btn.active::before {
    transform: scaleX(1);
}

/* Badge glow on hover */
.bs-dynamic-badge {
    transition: box-shadow 0.15s ease;
}
.bs-qr-clickable:hover .bs-dynamic-badge {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--_status-color, var(--ui-gray-300)) 25%, transparent);
}

/* Action button press feedback */
.bs-qr-action-bar .ui-btn {
    transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.bs-qr-action-bar .ui-btn:active {
    transform: scale(0.96);
}

/* Print type pill press */
.bs-qr-print-type-pill:active {
    transform: scale(0.97);
}

/* Metric chip pulse on update (applied via JS) */
.bs-qr-metric-chip-pulse {
    animation: bsQrPulse 0.4s ease;
}
@keyframes bsQrPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Recent scan row fade-in */
.bs-qr-recent-row,
.bs-qr-received-row,
.bs-qr-pending-row,
.bs-qr-tag-row,
.bs-qr-activity-feed-item {
    animation: bsQrRowFadeIn 0.15s ease-out;
}
@keyframes bsQrRowFadeIn {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Camera invite hover lift */
.bs-qr-camera-invite {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bs-qr-camera-invite:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-md);
}

/* ── Locate dropdown ── */
.bs-qr-locate-select-row {
    padding: var(--ui-space-3) 0;
}
.bs-qr-locate-dropdown {
    width: 100%;
    margin-top: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-sm);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
}

/* ── Inline status dropdown ── */
.bs-qr-status-select {
    appearance: auto;
    border: var(--ui-border-width) solid var(--_status-color, var(--ui-gray-300));
    background: color-mix(in srgb, var(--_status-color, var(--ui-gray-300)) 10%, var(--ui-white));
    color: var(--_status-color, var(--ui-gray-600));
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    padding: 2px var(--ui-space-2);
    border-radius: var(--ui-radius-full);
    cursor: pointer;
    flex-shrink: 0;
}
.bs-qr-status-select:focus {
    outline: 2px solid var(--ui-primary-300);
    outline-offset: 1px;
}

/* ── Notes section on entity cards ── */
.bs-qr-notes-section {
    padding: var(--ui-space-3) var(--ui-space-5);
}
.bs-qr-notes-label {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--ui-space-2);
}
.bs-qr-notes-label i {
    margin-right: var(--ui-space-1);
}
.bs-qr-notes-row {
    display: flex;
    gap: var(--ui-space-2);
    align-items: flex-start;
}
.bs-qr-notes-input {
    flex: 1;
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    font-family: inherit;
    resize: vertical;
    min-height: 2.5rem;
}
.bs-qr-notes-input:focus {
    outline: none;
    border-color: var(--ui-primary-400);
}
.bs-qr-notes-save {
    flex-shrink: 0;
    height: 2.5rem;
}
.bs-qr-note-history {
    margin-top: var(--ui-space-2);
}
.bs-qr-note-row {
    padding: var(--ui-space-2);
    border-left: 3px solid var(--ui-primary-200);
    background: var(--ui-gray-50);
    border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
    margin-bottom: var(--ui-space-1);
}
.bs-qr-note-text {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-700);
}
.bs-qr-note-meta {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-400);
    margin-top: 2px;
}

/* ── Process package list ── */
.bs-qr-process-pkg-list {
    margin-top: var(--ui-space-3);
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-3);
}

/* ── Phase 11.1: Process Designer ── */
.bs-qr-process-mode-bar {
    display: flex;
    gap: var(--ui-space-1);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-gray-50);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
}
.bs-qr-process-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-full);
    background: var(--ui-white);
    color: var(--ui-gray-500);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-medium);
    cursor: pointer;
    transition: all 0.15s ease;
}
.bs-qr-process-mode-btn:hover {
    border-color: var(--ui-primary-300);
    color: var(--ui-primary-600);
}
.bs-qr-process-mode-btn.active {
    background: var(--ui-primary-500);
    border-color: var(--ui-primary-500);
    color: var(--ui-white);
}
.bs-qr-process-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.bs-qr-designer-layout {
    display: flex;
    height: 100%;
    min-height: 400px;
}
.bs-qr-designer-controls {
    width: 320px;
    min-width: 280px;
    max-width: 360px;
    border-right: var(--ui-border-width) solid var(--ui-gray-200);
    overflow-y: auto;
    padding: var(--ui-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}
.bs-qr-designer-stage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bs-qr-designer-graph {
    flex: 1;
    min-height: 250px;
    position: relative;
}
.bs-qr-designer-info {
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
    padding: var(--ui-space-3);
    max-height: 220px;
    overflow-y: auto;
    background: var(--ui-gray-50);
}
.bs-qr-designer-info:empty {
    display: none;
}
.bs-qr-designer-info-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-designer-info-header i {
    color: var(--ui-primary-500);
}
.bs-qr-designer-info-desc {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-designer-info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-designer-info-meta i {
    color: var(--ui-gray-400);
    margin-right: 2px;
}
.bs-qr-designer-info-conns {
    margin-top: var(--ui-space-2);
}
.bs-qr-designer-info-conn {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    padding: 2px 0;
}
.bs-qr-designer-info-conn i {
    color: var(--ui-gray-400);
    margin-right: 4px;
    font-size: var(--ui-text-2xs);
}
.bs-qr-designer-info-conn em {
    color: var(--ui-gray-400);
    font-style: normal;
    font-size: var(--ui-text-2xs);
}
.bs-qr-designer-section {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}
.bs-qr-designer-accordion {
    flex: 1;
    min-height: 0;
}
.bs-qr-designer-templates {
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
    padding: var(--ui-space-3);
    background: var(--ui-gray-50);
}
.bs-qr-designer-template-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-2);
}
.bs-qr-designer-info-actions {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-3);
    padding-top: var(--ui-space-2);
    border-top: var(--ui-border-width) solid var(--ui-gray-200);
}
.bs-qr-designer-info-code {
    font-size: var(--ui-text-xs);
    color: var(--ui-accent-600);
    font-weight: var(--ui-font-medium);
    font-family: monospace;
}
.bs-qr-designer-info-code i {
    margin-right: 4px;
}

/* ── Phase 11.3: Scan-Pair Process Advancement ── */
.bs-qr-scan-pair-waiting {
    border-left: 3px solid var(--ui-primary-400);
    background: var(--ui-primary-50);
}
.bs-qr-scan-pair-success {
    border-left: 3px solid var(--ui-accent-500);
    background: var(--ui-accent-50, #ecfdf5);
}
.bs-qr-scan-pair-error {
    border-left: 3px solid var(--ui-danger, #ef4444);
    background: #fef2f2;
}
.bs-qr-scan-pair-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}
.bs-qr-scan-pair-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ui-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-text-lg);
    flex-shrink: 0;
}
.bs-qr-scan-pair-icon.sample {
    background: var(--ui-primary-100);
    color: var(--ui-primary-600);
}
.bs-qr-scan-pair-icon.station {
    background: var(--ui-warning-100, #fef3c7);
    color: var(--ui-warning-600, #d97706);
}
.bs-qr-scan-pair-icon.success {
    background: var(--ui-accent-100, #d1fae5);
    color: var(--ui-accent-600, #059669);
}
.bs-qr-scan-pair-title {
    font-weight: var(--ui-font-semibold);
    font-size: var(--ui-text-sm);
}
.bs-qr-scan-pair-sub {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    margin-top: 2px;
}
.bs-qr-scan-pair-prompt {
    margin-top: var(--ui-space-3);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-white);
    border-radius: var(--ui-radius-md);
    border: var(--ui-border-width) dashed var(--ui-gray-300);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    text-align: center;
}
.bs-qr-scan-pair-prompt i {
    margin-right: 6px;
    color: var(--ui-primary-400);
}
.bs-qr-scan-pair-pulse {
    width: 12px;
    height: 12px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-primary-400);
    margin-left: auto;
    flex-shrink: 0;
    animation: bs-scan-pulse 1.5s ease-in-out infinite;
}
@keyframes bs-scan-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* ── Phase 11.4: Process Dashboard ── */
.bs-qr-process-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}
.bs-qr-process-metrics-strip {
    display: flex;
    gap: var(--ui-space-2);
    flex-wrap: wrap;
}
.bs-qr-dashboard-split {
    display: flex;
    gap: var(--ui-space-3);
    min-height: 300px;
    max-height: 500px;
}
.bs-qr-dashboard-graph-panel {
    flex: 3;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: auto;
}
.bs-qr-dashboard-pkg-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    max-width: 360px;
}
.bs-qr-dashboard-panel-label {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--ui-space-2);
}
.bs-qr-dashboard-panel-label i {
    margin-right: 4px;
}
.bs-qr-dashboard-graph {
    min-height: 250px;
    max-height: 380px;
    height: 350px;
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}
.bs-qr-dashboard-node-detail {
    margin-top: var(--ui-space-2);
}
.bs-qr-dashboard-detail-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-size: var(--ui-text-sm);
    margin-bottom: var(--ui-space-1);
}
.bs-qr-dashboard-detail-meta {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    margin-top: 2px;
}
.bs-qr-dashboard-detail-meta i {
    width: 14px;
    text-align: center;
    margin-right: 4px;
}
.bs-qr-dashboard-detail-pkgs {
    margin-top: var(--ui-space-2);
}
.bs-qr-dashboard-pkg-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}
.bs-qr-dashboard-pkg-card {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-2) var(--ui-space-3);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.bs-qr-dashboard-pkg-card:hover {
    border-color: var(--ui-primary-300);
}
.bs-qr-dashboard-pkg-card.selected {
    border-color: var(--ui-primary-400);
    box-shadow: var(--ui-shadow-sm);
    background: var(--ui-primary-50);
}
.bs-qr-dashboard-pkg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.bs-qr-dashboard-pkg-label {
    font-weight: var(--ui-font-semibold);
    font-size: var(--ui-text-sm);
}
.bs-qr-dashboard-pkg-stage {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.bs-qr-dashboard-pkg-time {
    margin-left: auto;
    color: var(--ui-gray-400);
}
.bs-qr-dashboard-pkg-progress {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-dashboard-pkg-bar {
    flex: 1;
    height: 6px;
    background: var(--ui-gray-100);
    border-radius: var(--ui-radius-full);
    overflow: hidden;
}
.bs-qr-dashboard-pkg-bar-fill {
    height: 100%;
    background: var(--ui-primary-400);
    border-radius: var(--ui-radius-full);
    transition: width 0.3s;
}
.bs-qr-dashboard-pkg-pct {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    white-space: nowrap;
}
.bs-qr-dashboard-pkg-elapsed {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    margin-top: 4px;
}
/* ── Timeline ── */
.bs-qr-dashboard-timeline-section {
    margin-top: var(--ui-space-2);
}
.bs-qr-dashboard-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}
.bs-qr-timeline-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-timeline-label {
    width: 120px;
    flex-shrink: 0;
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-medium);
    color: var(--ui-gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-qr-timeline-segments {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 24px;
}
.bs-qr-timeline-seg {
    flex: 1;
    border-radius: var(--ui-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.15s;
    cursor: default;
}
.bs-qr-timeline-seg.completed {
    background: var(--ui-accent-400, #34d399);
    color: var(--ui-white);
}
.bs-qr-timeline-seg.current {
    background: var(--ui-primary-400);
    color: var(--ui-white);
    animation: bs-scan-pulse 2s ease-in-out infinite;
}
.bs-qr-timeline-seg.upcoming {
    background: var(--ui-gray-200);
    color: var(--ui-gray-400);
}
.bs-qr-timeline-seg-label {
    font-size: 9px;
    font-weight: var(--ui-font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 4px;
}

/* ── Phase 11.5: Process Initiation ── */
.bs-qr-initiation-card {
    border-left: 3px solid var(--ui-secondary-400);
    background: var(--ui-secondary-50, #f5f3ff);
}
.bs-qr-initiation-label {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-600);
    margin-top: var(--ui-space-3);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-initiation-label i {
    color: var(--ui-secondary-400);
    margin-right: 4px;
}
.bs-qr-initiation-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
}
.bs-qr-initiation-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.bs-qr-initiation-btn:hover {
    border-color: var(--ui-primary-300);
    background: var(--ui-primary-50);
}
.bs-qr-initiation-btn-label {
    font-weight: var(--ui-font-semibold);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-800);
}
.bs-qr-initiation-btn-meta {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    margin-top: 2px;
}

/* ── Phase 11.7: Batch Process Tracking ── */
.bs-qr-batch-card {
    border-left: 3px solid var(--ui-primary-400);
    background: var(--ui-primary-50);
}
.bs-qr-batch-counter {
    margin-top: var(--ui-space-3);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-600);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-batch-count {
    font-size: var(--ui-text-xl);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-600);
}
.bs-qr-batch-errors {
    color: var(--ui-danger, #ef4444);
    font-size: var(--ui-text-xs);
    cursor: help;
}

/* ── Phase 11.6: Completion, Decisions & Routing ── */
.bs-qr-completion-card {
    border-left: 3px solid var(--ui-accent-500, #10b981);
    background: var(--ui-accent-50, #ecfdf5);
}
.bs-qr-completion-stats {
    display: flex;
    gap: var(--ui-space-3);
    margin-top: var(--ui-space-3);
    padding: var(--ui-space-2) 0;
}
.bs-qr-completion-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
}
.bs-qr-completion-stat i {
    color: var(--ui-accent-500, #10b981);
}
.bs-qr-completion-journey {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    margin-top: var(--ui-space-1);
    line-height: 1.6;
    word-break: break-word;
}
.bs-qr-decision-card {
    border-left: 3px solid var(--ui-warning-400, #fbbf24);
    background: var(--ui-warning-50, #fffbeb);
}

/* ── Phase 9.1: Live Metrics Strip ── */
.bs-qr-metrics-strip {
    display: flex;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-white);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    overflow-x: auto;
    flex-shrink: 0;
    align-items: center;
}
.bs-qr-metric-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--_chip-bg, var(--ui-gray-50));
    border: var(--ui-border-width) solid var(--_chip-border, var(--ui-gray-200));
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-xs);
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bs-qr-metric-chip.bs-qr-clickable:hover {
    border-color: var(--ui-primary-300);
    background: var(--ui-primary-50);
    transform: translateY(-1px);
    box-shadow: var(--ui-shadow-sm);
}
.bs-qr-metric-chip i { font-size: 0.7rem; }
.bs-qr-metric-value {
    font-weight: var(--ui-font-extrabold);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-800);
}
.bs-qr-metric-label {
    color: var(--ui-gray-500);
    font-size: var(--ui-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* Urgent chip (overdue items) — pulsing border */
.bs-qr-metric-chip.bs-qr-metric-urgent {
    --_chip-bg: color-mix(in srgb, var(--ui-danger-500, #ef4444) 8%, var(--ui-white));
    --_chip-border: color-mix(in srgb, var(--ui-danger-500, #ef4444) 40%, transparent);
    animation: bs-qr-urgent-pulse 2s ease-in-out infinite;
}
@keyframes bs-qr-urgent-pulse {
    0%, 100% { border-color: color-mix(in srgb, var(--ui-danger-500, #ef4444) 30%, transparent); }
    50% { border-color: color-mix(in srgb, var(--ui-danger-500, #ef4444) 60%, transparent); }
}
/* Accent chip (positive counters) */
.bs-qr-metric-chip.bs-qr-metric-accent {
    --_chip-bg: color-mix(in srgb, var(--ui-accent-500) 8%, var(--ui-white));
    --_chip-border: color-mix(in srgb, var(--ui-accent-500) 25%, transparent);
}
/* Primary chip */
.bs-qr-metric-chip.bs-qr-metric-primary {
    --_chip-bg: color-mix(in srgb, var(--ui-primary-500) 8%, var(--ui-white));
    --_chip-border: color-mix(in srgb, var(--ui-primary-500) 25%, transparent);
}

/* ── Phase 9.4: Activity Feed ── */
.bs-qr-activity-feed {
    margin-top: var(--ui-space-4);
    padding: var(--ui-space-4);
    background: var(--ui-white);
    border-radius: var(--ui-radius-lg);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    box-shadow: var(--ui-shadow-sm);
}
.bs-qr-activity-feed-label {
    font-size: var(--ui-text-2xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--ui-space-3);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-activity-feed-label i { color: var(--ui-primary-400); }
.bs-qr-activity-feed-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 2px solid var(--ui-gray-200);
    padding-left: var(--ui-space-3);
    margin-left: var(--ui-space-1);
}
.bs-qr-activity-feed-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: var(--ui-text-xs);
    border-radius: var(--ui-radius-sm);
    position: relative;
    transition: background-color 0.1s ease;
}
.bs-qr-activity-feed-item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--ui-space-3) - 4px);
    width: 8px;
    height: 8px;
    border-radius: var(--ui-radius-full);
    background: var(--ui-gray-300);
    border: 2px solid var(--ui-white);
}
.bs-qr-activity-feed-item.bs-qr-feed-success::before {
    background: var(--ui-accent-500);
}
.bs-qr-activity-feed-item.bs-qr-feed-error::before {
    background: var(--ui-danger-500, #ef4444);
}
.bs-qr-activity-feed-item i { font-size: 0.6rem; flex-shrink: 0; }
.bs-qr-feed-action {
    color: var(--ui-gray-600);
    font-weight: var(--ui-font-medium);
}
.bs-qr-feed-code {
    color: var(--ui-gray-800);
    font-weight: var(--ui-font-semibold);
    font-family: monospace;
    font-size: var(--ui-text-2xs);
}
.bs-qr-feed-member { color: var(--ui-gray-400); font-size: var(--ui-text-2xs); }
.bs-qr-feed-time { color: var(--ui-gray-400); margin-left: auto; font-size: var(--ui-text-2xs); }
.bs-qr-feed-success { }
.bs-qr-feed-error { background: color-mix(in srgb, var(--ui-danger-500, #ef4444) 5%, transparent); }

/* ── Phase 8.1: Tag Explorer ── */
.bs-qr-tag-explorer-filters {
    display: flex;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-tag-search {
    flex: 1;
    font-size: var(--ui-text-xs);
    padding: 4px 8px;
}
.bs-qr-tag-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
}
.bs-qr-tag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-text-sm);
}
.bs-qr-tag-row i { font-size: 0.7rem; }
.bs-qr-tag-code {
    font-family: monospace;
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-800);
}
.bs-qr-tag-scans {
    margin-left: auto;
    color: var(--ui-gray-400);
    font-size: var(--ui-text-xs);
}

/* Tag detail card */
.bs-qr-tag-detail-card {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
    box-shadow: var(--ui-shadow-sm);
}
.bs-qr-tag-detail-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-tag-detail-qr {
    display: flex;
    justify-content: center;
    padding: var(--ui-space-3);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-tag-scan-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    border-bottom: 1px solid var(--ui-gray-100);
}
.bs-qr-tag-scan-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bs-qr-tag-scan-note {
    color: var(--ui-gray-500);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* ── Phase 7.4: Receive Condition Notes ── */
.bs-qr-receive-note-area {
    padding: var(--ui-space-3);
}
.bs-qr-receive-done {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-accent-600);
    margin-bottom: var(--ui-space-2);
    font-size: var(--ui-text-sm);
}
.bs-qr-receive-note-prompt {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-receive-note-row {
    display: flex;
    gap: var(--ui-space-2);
    align-items: flex-start;
}
.bs-qr-receive-note-row textarea {
    flex: 1;
}
.bs-qr-received-note-snippet {
    color: var(--ui-secondary-400);
    font-size: var(--ui-text-xs);
}

/* ── Phase 6.2: Camera Controls ── */
.bs-qr-camera-controls {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) var(--ui-space-2);
    background: var(--ui-gray-800);
    border-radius: 0 0 var(--ui-radius-md) var(--ui-radius-md);
}
.bs-qr-camera-ctrl-btn {
    padding: 3px 8px;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-300);
    background: transparent;
    border: var(--ui-border-width) solid var(--ui-gray-600);
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.1s, color 0.1s;
}
.bs-qr-camera-ctrl-btn:hover {
    background: var(--ui-gray-700);
    color: var(--ui-white);
}
.bs-qr-camera-ctrl-btn.active {
    background: var(--ui-primary-600);
    border-color: var(--ui-primary-500);
    color: var(--ui-white);
}
.bs-qr-camera-stop-btn {
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.4);
    margin-left: auto;
}
.bs-qr-camera-stop-btn:hover {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.6);
}
.bs-qr-camera-scan-strip {
    display: flex;
    gap: 4px;
    margin-left: auto;
    overflow: hidden;
}
.bs-qr-camera-scan-chip {
    padding: 2px 6px;
    font-size: 0.6rem;
    font-family: monospace;
    background: var(--ui-gray-700);
    color: var(--ui-accent-400);
    border-radius: var(--ui-radius-sm);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Viewfinder green flash on decode */
.bs-qr-camera-flash {
    box-shadow: inset 0 0 0 3px var(--ui-accent-400);
    transition: box-shadow 0.1s ease;
}

/* ── Phase 8.2: QR Badge Indicators ── */
.bs-qr-entity-qr-badge {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    z-index: 1;
}
.bs-qr-entity-qr-badge:hover {
    transform: translateY(-50%) scale(1.2);
}
.bs-qr-qr-badge-active {
    color: var(--ui-accent-600);
    background: color-mix(in srgb, var(--ui-accent-500) 12%, transparent);
}
.bs-qr-qr-badge-active:hover {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent-500) 20%, transparent);
}
.bs-qr-qr-badge-revoked {
    color: var(--ui-gray-400);
    background: var(--ui-gray-100);
}
.bs-qr-qr-badge-none {
    color: var(--ui-gray-300);
    background: transparent;
    border: 1px dashed var(--ui-gray-300);
}
.bs-qr-qr-badge-none:hover {
    color: var(--ui-primary-400);
    border-color: var(--ui-primary-300);
    background: var(--ui-primary-50);
}

/* ── Phase 8.3: Tag Detail Overlay ── */
.bs-qr-tag-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bsQrFadeIn 0.15s ease-out;
}
.bs-qr-tag-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.bs-qr-tag-overlay-panel {
    position: relative;
    background: var(--ui-white);
    border-radius: var(--ui-radius-xl, var(--ui-radius-lg));
    box-shadow: var(--ui-shadow-xl, var(--ui-shadow-lg));
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: bsQrSlideUp 0.2s ease-out;
}
.bs-qr-tag-overlay-close {
    position: absolute;
    top: var(--ui-space-2);
    right: var(--ui-space-2);
    background: transparent;
    border: none;
    font-size: var(--ui-text-lg);
    color: var(--ui-gray-400);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.1s, color 0.1s;
    z-index: 1;
}
.bs-qr-tag-overlay-close:hover {
    background: var(--ui-gray-100);
    color: var(--ui-gray-700);
}
.bs-qr-tag-overlay-content {
    padding: var(--ui-space-4);
}
.bs-qr-tag-overlay-content .bs-qr-tag-detail-card {
    border: none;
    box-shadow: none;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   BSLauncher — Portal Page Styles
   Login screen → Module grid → Module view → Full system
   ═══════════════════════════════════════════════════════════════════ */

/* ── Boot Spinner ── */
.bs-launcher-boot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bs-bg);
    flex-direction: column;
    gap: var(--ui-space-4, 1rem);
}
.bs-launcher-boot i {
    font-size: var(--ui-text-2xl, 2rem);
    color: var(--bs-brand);
    animation: bs-spin 1s linear infinite;
}
.bs-launcher-boot span {
    font-size: var(--ui-text-sm, 0.85rem);
    color: var(--bs-text-secondary);
}
@keyframes bs-spin { to { transform: rotate(360deg); } }

/* ── Login Screen ── */
.bs-launcher-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-brand-gradient-wide);
    padding: var(--ui-space-6, 2rem);
}
.bs-launcher-login-card {
    background: var(--ui-white, white);
    border-radius: var(--bs-radius-lg);
    box-shadow: var(--bs-shadow-lg);
    width: min(100%, 480px);
}
.bs-launcher-login-header {
    background: var(--bs-brand-gradient);
    padding: var(--ui-space-6, 2rem) var(--ui-space-6, 2rem) var(--ui-space-5, 1.5rem);
    text-align: center;
    color: var(--ui-white, white);
}
.bs-launcher-login-header i {
    font-size: var(--ui-text-3xl, 2.5rem);
    margin-bottom: var(--ui-space-3, 0.75rem);
    display: block;
    opacity: 0.9;
}
.bs-launcher-login-header h1 {
    font-size: var(--ui-text-xl, 1.5rem);
    font-weight: var(--ui-font-bold, 700);
    margin-bottom: var(--ui-space-1, 0.25rem);
}
.bs-launcher-login-header p {
    font-size: var(--ui-text-xs, 0.8rem);
    opacity: 0.8;
}
.bs-launcher-login-body {
    padding: var(--ui-space-5, 1.5rem) var(--ui-space-6, 2rem) var(--ui-space-6, 2rem);
}
.bs-launcher-login-body h3 {
    font-size: var(--ui-text-sm, 0.85rem);
    color: var(--bs-text-secondary);
    margin-bottom: var(--ui-space-4, 1rem);
    text-align: center;
    font-weight: var(--ui-font-medium, 500);
}

/* ── User Grid (login) ── */
.bs-launcher-user-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3, 0.75rem);
}
.bs-launcher-user-card {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3, 0.75rem);
    padding: var(--ui-space-3, 0.75rem);
    border-radius: var(--bs-radius);
    border: 2px solid var(--bs-border);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    background: var(--ui-white, white);
    flex: 1 1 calc(50% - var(--ui-space-3, 0.75rem));
    min-width: 180px;
}
.bs-launcher-user-card:hover {
    border-color: var(--bs-brand);
    background: var(--bs-brand-light);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--bs-brand) 15%, transparent);
}
.bs-launcher-user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--bs-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--ui-font-bold, 700);
    font-size: var(--ui-text-xs, 0.75rem);
    color: var(--ui-white, white);
    flex-shrink: 0;
}
.bs-launcher-user-info {
    min-width: 0;
}
.bs-launcher-user-name {
    font-size: var(--ui-text-xs, 0.8rem);
    font-weight: var(--ui-font-semibold, 600);
    color: var(--bs-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-launcher-user-role {
    font-size: var(--ui-text-2xs, 0.65rem);
    color: var(--bs-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Module Grid Page ── */
.bs-launcher-page {
    min-height: 100vh;
    background: var(--bs-bg);
    display: flex;
    flex-direction: column;
}

/* Header bar */
.bs-launcher-header {
    background: var(--bs-brand-gradient);
    padding: var(--ui-space-4, 1rem) var(--ui-space-6, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ui-white, white);
    flex-shrink: 0;
}
.bs-launcher-header-left {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3, 0.75rem);
}
.bs-launcher-header-left i {
    font-size: var(--ui-text-xl, 1.5rem);
    opacity: 0.9;
}
.bs-launcher-header-left h1 {
    font-size: var(--ui-text-base, 1.1rem);
    font-weight: var(--ui-font-bold, 700);
}
.bs-launcher-header-left span {
    font-size: var(--ui-text-xs, 0.75rem);
    opacity: 0.7;
}
.bs-launcher-header-right {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4, 1rem);
}
.bs-launcher-header-user {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2, 0.5rem);
    font-size: var(--ui-text-xs, 0.8rem);
}
.bs-launcher-header-user .bs-launcher-avatar-sm {
    width: 2rem;
    height: 2rem;
    border-radius: var(--bs-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--ui-font-bold, 700);
    font-size: var(--ui-text-2xs, 0.65rem);
    color: var(--ui-white, white);
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
}
.bs-launcher-user-detail-name {
    font-weight: var(--ui-font-semibold, 600);
    font-size: var(--ui-text-xs, 0.8rem);
}
.bs-launcher-user-detail-role {
    font-size: var(--ui-text-2xs, 0.65rem);
    opacity: 0.7;
}

/* Logout / back button */
.bs-launcher-btn {
    padding: 0.4rem 0.8rem;
    border-radius: var(--bs-radius-sm);
    background: rgba(255,255,255,0.15);
    color: var(--ui-white, white);
    border: 1px solid rgba(255,255,255,0.25);
    cursor: pointer;
    font-size: var(--ui-text-xs, 0.75rem);
    font-weight: var(--ui-font-medium, 500);
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bs-launcher-btn:hover {
    background: rgba(255,255,255,0.25);
}

/* Grid container */
.bs-launcher-grid-container {
    flex: 1;
    padding: var(--ui-space-6, 2rem);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.bs-launcher-grid-inner {
    width: min(100%, 900px);
}
.bs-launcher-grid-title {
    font-size: var(--ui-text-sm, 0.85rem);
    color: var(--bs-text-secondary);
    margin-bottom: var(--ui-space-4, 1.25rem);
    font-weight: var(--ui-font-medium, 500);
}

/* Module cards */
.bs-launcher-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-4, 1.25rem);
    margin-bottom: var(--ui-space-5, 1.5rem);
}
.bs-launcher-card {
    background: var(--ui-white, white);
    border-radius: var(--bs-radius-lg);
    padding: var(--ui-space-5, 1.5rem);
    cursor: pointer;
    box-shadow: var(--bs-shadow-sm);
    border: 2px solid transparent;
    transition: box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3, 0.75rem);
    flex: 1 1 calc(33.333% - var(--ui-space-4, 1.25rem));
    min-width: 240px;
}
.bs-launcher-card:hover {
    box-shadow: var(--bs-shadow-md);
    border-color: var(--_card-color, var(--bs-brand));
}
.bs-launcher-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--bs-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ui-text-lg, 1.2rem);
    background: color-mix(in srgb, var(--_card-color, var(--bs-brand)) 10%, transparent);
    color: var(--_card-color, var(--bs-brand));
}
.bs-launcher-card-title {
    font-size: var(--ui-text-base, 0.95rem);
    font-weight: var(--ui-font-bold, 700);
    color: var(--bs-text);
}
.bs-launcher-card-desc {
    font-size: var(--ui-text-xs, 0.75rem);
    color: var(--bs-text-secondary);
    line-height: 1.5;
}
.bs-launcher-card-metric {
    font-size: var(--ui-text-2xs, 0.7rem);
    color: var(--_card-color, var(--bs-brand));
    font-weight: var(--ui-font-semibold, 600);
    margin-top: auto;
}

/* Full System card — spans full width */
.bs-launcher-card-full {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--ui-space-4, 1.25rem);
    padding: var(--ui-space-4, 1.25rem) var(--ui-space-5, 1.5rem);
    background: var(--bs-brand-gradient);
    color: var(--ui-white, white);
}
.bs-launcher-card-full .bs-launcher-card-icon {
    background: rgba(255,255,255,0.15);
    color: var(--ui-white, white);
}
.bs-launcher-card-full .bs-launcher-card-title { color: var(--ui-white, white); }
.bs-launcher-card-full .bs-launcher-card-desc { color: rgba(255,255,255,0.8); }
.bs-launcher-card-full:hover {
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* Coming Soon cards — dimmed, not clickable */
.bs-launcher-card-soon {
    cursor: default;
    opacity: 0.55;
}
.bs-launcher-card-soon:hover {
    box-shadow: var(--bs-shadow-sm);
    border-color: transparent;
}
.bs-launcher-card-soon .bs-launcher-card-icon {
    background: color-mix(in srgb, var(--ui-gray-400) 10%, transparent);
    color: var(--ui-gray-400);
}
.bs-launcher-card-soon .bs-launcher-card-metric {
    color: var(--ui-gray-400);
}
.bs-launcher-soon-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--ui-space-2, 0.5rem);
    padding: 0.1rem 0.5rem;
    font-size: var(--ui-text-2xs, 0.65rem);
    font-weight: var(--ui-font-semibold, 600);
    border-radius: var(--ui-radius-full, 999px);
    background: var(--ui-gray-200);
    color: var(--ui-gray-500);
    vertical-align: middle;
}

/* ── Module View ── */
.bs-launcher-module {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bs-bg);
}
.bs-launcher-module-header {
    background: var(--bs-brand-gradient);
    padding: var(--ui-space-3, 0.75rem) var(--ui-space-5, 1.5rem);
    display: flex;
    align-items: center;
    gap: var(--ui-space-4, 1rem);
    color: var(--ui-white, white);
    flex-shrink: 0;
}
.bs-launcher-module-title {
    font-size: var(--ui-text-base, 1rem);
    font-weight: var(--ui-font-semibold, 600);
}
.bs-launcher-module-title i {
    margin-right: var(--ui-space-2, 0.5rem);
    opacity: 0.8;
}

/* ── Header Station Tabs (QR module) ── */
.bs-qr-header-tabs {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1, 0.25rem);
    margin-left: auto;
}
.bs-qr-header-tab {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1, 0.25rem);
    padding: var(--ui-space-2, 0.5rem) var(--ui-space-3, 0.75rem);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    font-size: var(--ui-text-xs, 0.75rem);
    font-weight: var(--ui-font-medium, 500);
    border-radius: var(--ui-radius-md, 4px);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    position: relative;
}
.bs-qr-header-tab:hover {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
}
.bs-qr-header-tab.active {
    background: rgba(255,255,255,0.2);
    color: white;
    font-weight: var(--ui-font-semibold, 600);
}
.bs-qr-header-tab .bs-qr-station-badge {
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 9px;
    background: rgba(255,255,255,0.25);
    color: white;
    font-weight: var(--ui-font-bold, 700);
    line-height: 1.2;
}
.bs-qr-header-tab .bs-qr-station-badge.bs-qr-station-badge-warn {
    background: var(--ui-warning-500, #f59e0b);
    color: white;
}
.bs-qr-header-tab .bs-qr-station-badge.bs-qr-station-badge-urgent {
    background: var(--ui-danger-500, #ef4444);
    color: white;
}

/* ── QR two-column stage layout ── */
.bs-qr-stage-row {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.bs-qr-stage {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--ui-space-4, 1rem);
}
/* Right-side scan panel */
.bs-qr-scan-panel {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-left: var(--ui-border-width) solid var(--ui-gray-200);
    background: var(--ui-gray-50);
    overflow-y: auto;
}
/* Restyle scan bar for vertical panel context */
.bs-qr-scan-panel > .bs-qr-scan-bar {
    flex-shrink: 0;
    border-bottom: none;
    padding: var(--ui-space-3, 0.75rem);
}
/* Input wrap: keep row layout but wrap to fit narrow panel */
.bs-qr-scan-panel .bs-qr-scan-input-wrap {
    flex-wrap: wrap;
    padding: var(--ui-space-2);
    gap: var(--ui-space-1);
}
.bs-qr-scan-panel .bs-qr-scan-input {
    flex: 1 1 100%;
    min-width: 0;
    font-size: var(--ui-text-xs, 0.75rem);
}
/* Hide the crosshair icon and geo dot in panel — save space */
.bs-qr-scan-panel .bs-qr-scan-icon,
.bs-qr-scan-panel .bs-qr-geo-indicator {
    display: none;
}
/* Camera viewfinder: taller in panel (square-ish) */
.bs-qr-scan-panel .bs-qr-scan-camera-viewfinder {
    max-height: none;
    aspect-ratio: 1;
    width: 100%;
}
.bs-qr-scan-panel .bs-qr-camera-invite {
    flex-direction: column;
    padding: var(--ui-space-6, 1.5rem) var(--ui-space-4, 1rem);
    text-align: center;
}
.bs-qr-scan-panel .bs-qr-camera-invite-sub {
    display: block;
}
.bs-qr-scan-panel .bs-qr-scan-camera-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bs-launcher-module-body {
    flex: 1;
    overflow: auto;
    padding: var(--ui-space-4, 1rem);
    min-height: 0;
}

/* ── Full System ── */
.bs-launcher-full-system {
    height: 100vh;
    overflow: auto;
}
.bs-launcher-back-float {
    position: fixed;
    top: var(--ui-space-2, 0.5rem);
    right: var(--ui-space-2, 0.5rem);
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    border-color: rgba(255,255,255,0.3);
}

/* ── Error fallback ── */
.bs-launcher-error {
    text-align: center;
    padding: var(--ui-space-8, 3rem);
    color: var(--bs-text-muted);
}
.bs-launcher-error i {
    font-size: var(--ui-text-2xl, 2rem);
    margin-bottom: var(--ui-space-4, 1rem);
    display: block;
}

/* ── MinTrack Launcher — Login Form ── */
.mt-login-form {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3, 0.75rem);
}
.mt-login-input {
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--ui-gray-200, #e5e7eb);
    border-radius: var(--ui-radius-lg, 8px);
    font-size: var(--ui-text-sm, 0.85rem);
    outline: none;
    transition: border-color 0.15s;
}
.mt-login-input:focus {
    border-color: var(--bs-brand, #0d47a1);
}
.mt-login-btn {
    padding: 0.7rem;
    border: none;
    border-radius: var(--ui-radius-lg, 8px);
    font-size: var(--ui-text-sm, 0.85rem);
    font-weight: var(--ui-font-semibold, 600);
    color: var(--ui-white, white);
    cursor: pointer;
    background: var(--bs-brand-gradient, linear-gradient(135deg, #0d47a1, #1976d2));
}
.mt-login-error {
    font-size: var(--ui-text-xs, 0.75rem);
    color: var(--ui-error, #c62828);
    text-align: center;
    display: none;
}

/* ── MinTrack Launcher — Dev Badge ── */
.mt-dev-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(255,255,255,0.2);
    border-radius: var(--ui-radius-sm, 4px);
    font-size: var(--ui-text-2xs, 0.6rem);
    font-weight: var(--ui-font-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: var(--ui-space-2, 0.5rem);
    vertical-align: middle;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .bs-launcher-card { flex: 1 1 calc(50% - var(--ui-space-4, 1.25rem)); min-width: 200px; }
    .bs-launcher-user-card { flex: 1 1 100%; }
}
@media (max-width: 480px) {
    .bs-launcher-card { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BSPrintCentre — Label Production Modal
   ═══════════════════════════════════════════════════════════════════════════ */

.bs-print-centre-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 500px;
}

/* Tab navigation */
.bs-print-tab-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.bs-print-tab-nav {
    display: flex;
    gap: var(--ui-space-1);
    padding: var(--ui-space-3) var(--ui-space-4) 0;
    border-bottom: 1px solid var(--ui-gray-200);
    flex-shrink: 0;
}
.bs-print-tab-btn {
    padding: var(--ui-space-2) var(--ui-space-4);
    border: none;
    background: none;
    color: var(--ui-gray-500);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-print-tab-btn:hover { color: var(--ui-gray-700); }
.bs-print-tab-btn.active {
    color: var(--ui-primary);
    border-bottom-color: var(--ui-primary);
}

/* Tab panels — control + preview split */
.bs-print-tab-panel {
    flex: 1;
    overflow-y: auto;
    padding: var(--ui-space-4);
}
.bs-print-designer,
.bs-print-multi,
.bs-print-subsample {
    display: flex;
    gap: var(--ui-space-5);
    min-height: 400px;
}

/* Controls column */
.bs-print-controls {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
    overflow-y: auto;
}
.bs-print-section-label {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--ui-space-2);
}

/* Size preset grid */
.bs-print-size-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ui-space-2);
}
.bs-print-size-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
    cursor: pointer;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bs-print-size-btn i {
    font-size: var(--ui-text-lg);
    color: var(--ui-gray-400);
    transition: color 0.15s;
}
.bs-print-size-btn:hover {
    border-color: var(--ui-primary-200);
    background: var(--ui-primary-50);
}
.bs-print-size-btn.active {
    border-color: var(--ui-primary);
    background: var(--ui-primary-50);
    color: var(--ui-primary-700);
}
.bs-print-size-btn.active i { color: var(--ui-primary); }
.bs-print-size-dim {
    font-size: 9px;
    color: var(--ui-gray-400);
}

/* Custom size inputs */
.bs-print-custom-inputs {
    display: flex;
    gap: var(--ui-space-3);
    align-items: center;
}
.bs-print-custom-inputs label {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
}
.bs-print-custom-inputs input {
    width: 60px;
    padding: var(--ui-space-1) var(--ui-space-2);
    font-size: var(--ui-text-xs);
}

/* Orientation toggle */
.bs-print-orient-row {
    display: flex;
    gap: var(--ui-space-2);
}
.bs-print-orient-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
    cursor: pointer;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    transition: border-color 0.15s, background 0.15s;
}
.bs-print-orient-btn:hover { border-color: var(--ui-primary-200); }
.bs-print-orient-btn.active {
    border-color: var(--ui-primary);
    background: var(--ui-primary-50);
    color: var(--ui-primary-700);
}

/* Entity info box */
.bs-print-entity-info {
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-gray-50);
    border-left: 3px solid var(--ui-primary-200);
    border-radius: var(--ui-radius-sm);
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-700);
}
.bs-print-entity-type {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
}

/* Print action button */
.bs-print-action-btn {
    margin-top: auto;
    width: 100%;
}

/* ── Preview area ── */
.bs-print-preview-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-lg);
    border: 1px dashed var(--ui-gray-200);
    min-height: 300px;
    padding: var(--ui-space-4);
}

/* Single label preview card */
.bs-print-preview-card {
    background: var(--ui-white);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    box-shadow: var(--ui-shadow-md);
    position: relative;
    overflow: hidden;
}
.bs-print-preview-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    height: 100%;
}
.bs-print-preview-qr {
    flex-shrink: 0;
}
.bs-print-preview-text {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}
.bs-print-preview-code {
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-print-preview-type {
    color: var(--ui-gray-500);
    margin-top: 1px;
}
.bs-print-preview-field {
    color: var(--ui-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-print-field-label {
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-400);
    margin-right: 4px;
}
.bs-print-preview-size {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 8px;
    color: var(--ui-gray-400);
}

/* ── Multi-copy tab ── */
.bs-print-copies-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-print-copies-btn {
    width: 32px;
    height: 32px;
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
    cursor: pointer;
    font-size: var(--ui-text-lg);
    color: var(--ui-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.bs-print-copies-btn:hover { background: var(--ui-gray-50); }
.bs-print-copies-input {
    width: 60px;
    text-align: center;
    padding: var(--ui-space-1) var(--ui-space-2);
    font-size: var(--ui-text-sm);
}
.bs-print-size-select {
    padding: var(--ui-space-1) var(--ui-space-2);
    font-size: var(--ui-text-sm);
}

/* Layout mode buttons */
.bs-print-layout-row {
    display: flex;
    gap: var(--ui-space-2);
}
.bs-print-layout-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
    cursor: pointer;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    transition: border-color 0.15s, background 0.15s;
}
.bs-print-layout-btn:hover { border-color: var(--ui-primary-200); }
.bs-print-layout-btn.active {
    border-color: var(--ui-primary);
    background: var(--ui-primary-50);
    color: var(--ui-primary-700);
}

/* Page preview */
.bs-print-page-preview {
    background: var(--ui-white);
    border: 1px solid var(--ui-gray-300);
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
    padding: 4px;
    position: relative;
}
.bs-print-page-badge {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: var(--ui-text-2xs, 0.65rem);
    color: var(--ui-gray-400);
    font-weight: var(--ui-font-semibold, 600);
}
.bs-print-page-grid {
    width: 100%;
    height: 100%;
    gap: 2px;
    overflow: hidden;
}
.bs-print-layout-grid { display: grid; }
.bs-print-layout-cols { display: flex; flex-direction: column; }
.bs-print-layout-rows { display: flex; flex-wrap: wrap; }
.bs-print-mini-label {
    border: 1px solid var(--ui-gray-200);
    background: var(--ui-white);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1px;
}
.bs-print-preview-summary {
    margin-top: var(--ui-space-2);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    text-align: center;
}

/* ── Sub-sample tab ── */
.bs-print-parent-info {
    padding: var(--ui-space-3);
    background: var(--ui-gray-50);
    border-left: 3px solid var(--ui-primary-200);
    border-radius: var(--ui-radius-md);
}
.bs-print-parent-header {
    font-size: var(--ui-text-sm);
    color: var(--ui-primary-700);
    margin-bottom: 2px;
}
.bs-print-parent-fields {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
}
.bs-print-mass-row {
    display: flex;
    gap: var(--ui-space-2);
}
.bs-print-mass-input {
    flex: 1;
    padding: var(--ui-space-1) var(--ui-space-2);
    font-size: var(--ui-text-sm);
}
.bs-print-unit-select {
    width: 70px;
    padding: var(--ui-space-1) var(--ui-space-2);
    font-size: var(--ui-text-sm);
}

/* Generated codes list */
.bs-print-subsample-list {
    max-height: 140px;
    overflow-y: auto;
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
}
.bs-print-subsample-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-1) var(--ui-space-2);
    border-bottom: 1px solid var(--ui-gray-100);
    font-size: var(--ui-text-xs);
}
.bs-print-subsample-row:last-child { border-bottom: none; }
.bs-print-subsample-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ui-primary-50);
    color: var(--ui-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: var(--ui-font-semibold);
    flex-shrink: 0;
}
.bs-print-subsample-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--ui-gray-700);
}

/* Sub-sample preview grid */
.bs-print-subsample-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    justify-content: center;
}
.bs-print-subsample-label {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
    box-shadow: var(--ui-shadow-sm);
}
.bs-print-subsample-qr {
    flex-shrink: 0;
}
.bs-print-subsample-text {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-700);
}
.bs-print-subsample-mass {
    color: var(--ui-gray-500);
    font-size: 10px;
}

/* ══════════ Locate Station — Visual Location Map ══════════ */

.bs-qr-location-map {
    display: flex;
    flex-direction: column;
    margin-top: var(--ui-space-4);
    padding: var(--ui-space-4);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
}
.bs-qr-location-map-title {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-gray-400);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-location-tree {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.bs-qr-location-tree .ui-binding-tree {
    font-size: var(--ui-text-sm);
}
.bs-qr-location-tree .ui-tree-node-label {
    cursor: pointer;
    transition: background 0.15s ease;
    border-radius: var(--ui-radius-md);
    padding: var(--ui-space-1) var(--ui-space-2);
}
.bs-qr-location-tree .ui-tree-node-label:hover {
    background: var(--ui-primary-50);
}
.bs-qr-location-tree .ui-tree-node--selected > .ui-tree-node-label {
    background: var(--ui-primary-100);
    color: var(--ui-primary-700);
    font-weight: var(--ui-font-semibold);
}

/* ══════════ Audit Station — Activity Timeline ══════════ */

.bs-qr-audit-timeline {
    margin-top: var(--ui-space-4);
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-4);
}
.bs-qr-audit-timeline-title {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-gray-400);
    margin-bottom: var(--ui-space-3);
}
.bs-qr-audit-heatstrip {
    display: flex;
    gap: 2px;
    height: 40px;
    align-items: flex-end;
}
.bs-qr-audit-heatstrip-bar {
    flex: 1;
    min-width: 0;
    border-radius: 2px 2px 0 0;
    background: var(--_heat-color, var(--ui-primary-200));
    transition: height 0.3s ease, background 0.3s ease;
    cursor: pointer;
    position: relative;
}
.bs-qr-audit-heatstrip-bar:hover {
    opacity: 0.8;
}
.bs-qr-audit-heatstrip-bar:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ui-gray-800);
    color: var(--ui-white);
    padding: 2px 6px;
    border-radius: var(--ui-radius-sm);
    font-size: 10px;
    white-space: nowrap;
    z-index: 10;
}
.bs-qr-audit-heatstrip-labels {
    display: flex;
    gap: 2px;
    margin-top: var(--ui-space-1);
}
.bs-qr-audit-heatstrip-label {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    color: var(--ui-gray-400);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-qr-audit-type-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-3);
    padding-top: var(--ui-space-2);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
}
.bs-qr-audit-legend-item {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-500);
}
.bs-qr-audit-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Improved action breakdown panel */
.bs-qr-audit-action-bar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--ui-space-3);
    background: var(--ui-gray-100);
}
.bs-qr-audit-action-segment {
    height: 100%;
    transition: width 0.3s ease;
}

/* ── Station Badge Counts ── */
.bs-qr-station-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ui-radius-full);
    font-size: 10px;
    font-weight: var(--ui-font-bold);
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
    background: var(--ui-gray-200);
    color: var(--ui-gray-600);
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
.bs-qr-station-badge-warn {
    background: color-mix(in srgb, var(--ui-primary-500) 15%, transparent);
    color: var(--ui-primary-700);
}
.bs-qr-station-badge-urgent {
    background: hsl(0 75% 55%);
    color: white;
    animation: bs-qr-badge-pulse 2s ease-in-out infinite;
}
@keyframes bs-qr-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.bs-qr-station-btn.active .bs-qr-station-badge {
    background: color-mix(in srgb, var(--ui-primary-400) 25%, transparent);
    color: var(--ui-primary-800);
}
.bs-qr-station-btn .bs-qr-station-badge + .bs-qr-shortcut-hint {
    margin-left: var(--ui-space-1);
}

/* ── Specimen Passport ── */
.bs-qr-passport {
    background: var(--ui-white);
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
}
.bs-qr-passport-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
    background: linear-gradient(135deg, var(--ui-primary-50), var(--ui-primary-100));
    border-bottom: 1px solid var(--ui-primary-200);
}
.bs-qr-passport-header-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-lg);
    background: var(--ui-primary-500);
    color: white;
    font-size: var(--ui-text-lg);
    flex-shrink: 0;
}
.bs-qr-passport-header-title {
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-900);
}
.bs-qr-passport-header-sub {
    font-size: var(--ui-text-xs);
    color: var(--ui-primary-600);
}
.bs-qr-passport-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--ui-gray-100);
}
.bs-qr-passport-section {
    background: var(--ui-white);
    padding: var(--ui-space-3) var(--ui-space-4);
}
.bs-qr-passport-section-label {
    font-size: 10px;
    font-weight: var(--ui-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-gray-400);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-passport-section-value {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-700);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-passport-section-value i {
    color: var(--ui-gray-400);
    width: 14px;
    text-align: center;
}
.bs-qr-passport-actions {
    display: flex;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-4);
    border-top: 1px solid var(--ui-gray-100);
    flex-wrap: wrap;
}
.bs-qr-passport-action {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-1) var(--ui-space-3);
    border-radius: var(--ui-radius-full);
    border: 1px solid var(--ui-gray-200);
    background: var(--ui-white);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    cursor: pointer;
    transition: all 0.12s;
}
.bs-qr-passport-action:hover {
    background: var(--ui-primary-50);
    border-color: var(--ui-primary-300);
    color: var(--ui-primary-700);
}
.bs-qr-passport-action i {
    font-size: 11px;
}
.bs-qr-passport-timeline {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-top: 1px solid var(--ui-gray-100);
}
.bs-qr-passport-timeline-label {
    font-size: 10px;
    font-weight: var(--ui-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ui-gray-400);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-passport-scan-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 3px 0;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
}
.bs-qr-passport-scan-row i {
    width: 14px;
    text-align: center;
    color: var(--ui-gray-400);
}

/* ── L3 Inline Style Replacements ── */
.bs-qr-process-selector-row {
    display: flex;
    gap: var(--ui-space-2);
    align-items: center;
}
.bs-qr-process-select {
    flex: 1;
}
.bs-qr-process-confirm-mt {
    margin-top: var(--ui-space-3);
}
.bs-qr-print-centre-btn {
    width: 100%;
    margin-bottom: var(--ui-space-3);
}
.bs-qr-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.bs-qr-entity-qr-badge-wrap {
    position: relative;
}
.bs-qr-passport-mt {
    margin-top: var(--ui-space-4);
}
.bs-qr-passport-section-label {
    font-size: var(--ui-text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-gray-400);
    font-weight: var(--ui-font-semibold);
}
.bs-qr-passport-section-value {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-700);
    font-weight: var(--ui-font-medium);
}
.bs-qr-passport-section-sub {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-400);
    margin-top: 2px;
}
.bs-qr-overflow-count {
    font-size: 9px;
    color: var(--ui-gray-400);
}
.bs-qr-about-section-divider {
    margin-top: var(--ui-space-6);
    border-top: 2px solid var(--ui-gray-200);
    padding-top: var(--ui-space-6);
}
.bs-qr-hidden {
    display: none !important;
}
.bs-qr-audit-scan-icon {
    font-size: 0.7rem;
    flex-shrink: 0;
}
.bs-qr-passport-note-color {
    color: var(--ui-gray-400);
}
.bs-qr-passport-note-ml {
    margin-left: auto;
    color: var(--ui-gray-400);
}
/* (location-cell--locked removed — tree uses built-in selection) */

/* ── Responsive: QR Operations Centre ── */

/* Tablet (≤768px): compact station nav, metrics scroll */
@media (max-width: 768px) {
    /* Station nav: tighter pills */
    .bs-qr-station-sidebar-panel {
        padding: 0 var(--ui-space-2);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bs-qr-station-btn {
        padding: var(--ui-space-1) var(--ui-space-2);
        font-size: var(--ui-text-2xs);
    }
    /* Hide shortcut hints on tablet */
    .bs-qr-shortcut-hint {
        display: none;
    }
    /* Metrics strip: horizontal scroll */
    .bs-qr-metrics-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }
    /* Scan bar: compact */
    .bs-qr-scan-bar {
        flex-wrap: wrap;
        gap: var(--ui-space-1);
    }
}

/* Small mobile: single column everything */
@media (max-width: 480px) {
    /* Passport sections → single column */
    .bs-qr-passport-sections {
        grid-template-columns: 1fr;
    }
    /* Print type pills wrap */
    .bs-qr-print-type-nav {
        flex-wrap: wrap;
    }
    /* Heatstrip: reduce hours and add scroll */
    .bs-qr-audit-heatstrip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bs-qr-audit-heatstrip-labels {
        overflow-x: auto;
    }
    /* Process designer: stack control panel above graph */
    .bs-qr-process-designer .bs-s376 {
        flex-direction: column;
    }
    .bs-qr-process-designer .bs-s377 {
        width: auto;
        min-width: auto;
    }
    /* Location map: smaller grid */
    .bs-qr-location-map {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: var(--ui-space-2);
        padding: var(--ui-space-3);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Entity Finder — Unified entity identification UI
   ══════════════════════════════════════════════════════════════════════ */

.bs-qr-entity-finder {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-5) var(--ui-space-6);
    margin-bottom: var(--ui-space-5);
    box-shadow: var(--ui-shadow-sm);
}
.bs-qr-finder-header {
    font-size: var(--ui-text-base);
    font-weight: var(--ui-font-bold);
    color: var(--ui-gray-700);
    margin-bottom: var(--ui-space-4);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-finder-header i {
    color: var(--ui-primary-500);
    font-size: var(--ui-text-lg);
}
.bs-qr-finder-scan-row {
    display: flex;
    gap: var(--ui-space-3);
    align-items: center;
}
.bs-qr-finder-input {
    flex: 1;
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-text-base);
}
.bs-qr-finder-camera-btn.active {
    background: var(--ui-primary-500);
    color: var(--ui-white);
    border-color: var(--ui-primary-500);
}
.bs-qr-finder-camera {
    margin-top: var(--ui-space-2);
    border-radius: var(--ui-radius-md);
    overflow: hidden;
    max-height: 250px;
}
.bs-qr-finder-camera-btn {
    padding: var(--ui-space-2) var(--ui-space-3);
}
.bs-qr-finder-divider {
    text-align: center;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-400);
    margin: var(--ui-space-4) 0;
    position: relative;
}
.bs-qr-finder-divider::before,
.bs-qr-finder-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--ui-gray-200);
}
.bs-qr-finder-divider::before { left: 0; }
.bs-qr-finder-divider::after { right: 0; }

/* ── Type Pill Buttons ── */
.bs-qr-finder-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}
.bs-qr-finder-type-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-2) var(--ui-space-4);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    color: var(--ui-gray-600);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    cursor: pointer;
    transition: all 0.15s ease;
}
.bs-qr-finder-type-pill:hover {
    border-color: var(--ui-primary-300);
    background: var(--ui-primary-50);
    color: var(--ui-primary-700);
}
.bs-qr-finder-type-pill.active {
    border-color: var(--ui-primary-500);
    background: var(--ui-primary-500);
    color: var(--ui-white);
}
.bs-qr-finder-type-pill i {
    font-size: var(--ui-text-sm);
}

/* ── Entity Browser Panel ── */
.bs-qr-finder-browser {
    margin-top: var(--ui-space-4);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    box-shadow: var(--ui-shadow-sm);
}
.bs-qr-finder-filter-row {
    padding: var(--ui-space-3) var(--ui-space-4);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.bs-qr-finder-filter {
    width: 100%;
    font-size: var(--ui-text-sm);
    padding: var(--ui-space-2) var(--ui-space-3);
}

/* ── Entity List (scrollable, clickable) ── */
.bs-qr-finder-entity-list {
    max-height: 280px;
    overflow-y: auto;
}
.bs-qr-finder-entity-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3) var(--ui-space-4);
    cursor: pointer;
    font-size: var(--ui-text-sm);
    transition: background 0.12s ease;
    border-bottom: var(--ui-border-width) solid var(--ui-gray-50);
}
.bs-qr-finder-entity-row:last-child {
    border-bottom: none;
}
.bs-qr-finder-entity-row:hover {
    background: var(--ui-primary-50);
}
.bs-qr-finder-entity-row.selected {
    background: var(--ui-primary-100);
    border-left: 3px solid var(--ui-primary-500);
}
.bs-qr-finder-entity-code {
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-800);
}
.bs-qr-finder-entity-name {
    color: var(--ui-gray-500);
}
.bs-qr-finder-entity-spacer {
    flex: 1;
}
.bs-qr-finder-entity-status {
    font-size: var(--ui-text-2xs);
    color: var(--ui-white);
    padding: 2px 8px;
    border-radius: var(--ui-radius-full);
    font-weight: var(--ui-font-medium);
    text-transform: capitalize;
}
.bs-qr-finder-more-hint {
    padding: var(--ui-space-2) var(--ui-space-4);
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-400);
    text-align: center;
    font-style: italic;
}
.bs-qr-finder-no-results {
    padding: var(--ui-space-3) var(--ui-space-4);
    color: var(--ui-gray-400);
    font-size: var(--ui-text-sm);
    font-style: italic;
    text-align: center;
}
.bs-qr-finder-last-chip {
    margin-top: var(--ui-space-4);
    padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--ui-primary-50);
    border: var(--ui-border-width) solid var(--ui-primary-200);
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    color: var(--ui-primary-700);
}
.bs-qr-finder-last-chip strong {
    font-weight: var(--ui-font-semibold);
}

/* ══════════════════════════════════════════════════════════════════════
   Operate Mode — Two-column layout
   ══════════════════════════════════════════════════════════════════════ */

.bs-qr-operate-layout {
    display: flex;
    gap: var(--ui-space-5);
    min-height: 300px;
}
.bs-qr-operate-left {
    flex: 0 0 40%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.bs-qr-operate-left .bs-qr-entity-finder {
    margin-bottom: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bs-qr-operate-left .bs-qr-finder-browser {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bs-qr-operate-left .bs-qr-finder-entity-list {
    flex: 1;
    max-height: none;
}
.bs-qr-operate-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ── Entity Detail Panel (right column) ── */
.bs-qr-entity-detail {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-sm);
    display: flex;
    flex-direction: column;
}
.bs-qr-entity-detail-top {
    display: flex;
    gap: var(--ui-space-5);
    padding: var(--ui-space-5);
}
.bs-qr-entity-detail-info {
    flex: 1;
    min-width: 0;
}
.bs-qr-entity-detail-title {
    font-size: var(--ui-text-xl);
    font-weight: var(--ui-font-bold);
    color: var(--ui-gray-800);
    margin-bottom: var(--ui-space-2);
}
.bs-qr-entity-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    align-items: center;
    margin-bottom: var(--ui-space-4);
}
.bs-qr-entity-detail-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ui-space-1) var(--ui-space-4);
    font-size: var(--ui-text-sm);
}
.bs-qr-entity-detail-field-label {
    color: var(--ui-gray-400);
    font-weight: var(--ui-font-medium);
    white-space: nowrap;
}
.bs-qr-entity-detail-field-value {
    color: var(--ui-gray-700);
    font-weight: var(--ui-font-medium);
}
.bs-qr-entity-detail-qr {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ui-space-3);
}
.bs-qr-entity-detail-qr-box {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--ui-border-width) solid var(--ui-gray-100);
    border-radius: var(--ui-radius-md);
    background: var(--ui-white);
}
.bs-qr-entity-detail-print-btn {
    width: 100%;
    font-size: var(--ui-text-xs);
}

/* ── Instruction + Progress (inside detail panel) ── */
.bs-qr-entity-detail-instruction {
    background: var(--ui-primary-50);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
    padding: var(--ui-space-4) var(--ui-space-5);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    font-size: var(--ui-text-base);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-800);
}
.bs-qr-entity-detail-instruction i {
    font-size: var(--ui-text-lg);
    color: var(--ui-primary-500);
}

/* ── Actions area (below detail panel) ── */
.bs-qr-operate-actions {
    margin-top: var(--ui-space-4);
}
.bs-qr-operate-actions-inner {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}

/* ── Inline follow-up prompts ── */
.bs-qr-inline-prompt {
    padding: var(--ui-space-4);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    animation: bsQrSlideUp 0.2s ease-out;
}
.bs-qr-inline-prompt-title {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
    margin-bottom: var(--ui-space-3);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-inline-prompt-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
}
.bs-qr-status-pill {
    padding: var(--ui-space-2) var(--ui-space-3);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-full);
    background: var(--ui-white);
    font-size: var(--ui-text-xs);
    cursor: pointer;
    transition: all 0.15s;
    text-transform: capitalize;
}
.bs-qr-status-pill:hover {
    border-color: var(--ui-primary-400);
    background: var(--ui-primary-50);
}
.bs-qr-status-pill.active {
    border-color: var(--ui-primary-500);
    background: var(--ui-primary-500);
    color: var(--ui-white);
}

/* ── Empty state for right column ── */
.bs-qr-operate-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ui-space-8);
    color: var(--ui-gray-400);
    border: 2px dashed var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    flex: 1;
}
.bs-qr-operate-empty i {
    font-size: var(--ui-text-3xl);
    margin-bottom: var(--ui-space-3);
    color: var(--ui-gray-300);
}
.bs-qr-operate-empty-text {
    font-size: var(--ui-text-sm);
    max-width: 200px;
}

/* ── Responsive: stack on narrow ── */
@media (max-width: 700px) {
    .bs-qr-operate-layout {
        flex-direction: column;
    }
    .bs-qr-operate-left {
        flex: none;
    }
    .bs-qr-operate-left .bs-qr-finder-entity-list {
        max-height: 200px;
    }
    .bs-qr-entity-detail-top {
        flex-direction: column;
        align-items: center;
    }
    .bs-qr-entity-detail-qr-box {
        width: 100px;
        height: 100px;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   What Next — Instruction card + action menu (legacy, kept for compat)
   ══════════════════════════════════════════════════════════════════════ */

.bs-qr-whatnext-card {
    background: var(--ui-white);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    padding: var(--ui-space-6);
    box-shadow: var(--ui-shadow-md);
}
.bs-qr-whatnext-header {
    display: flex;
    align-items: center;
    gap: var(--ui-space-4);
    margin-bottom: var(--ui-space-5);
    padding-bottom: var(--ui-space-4);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-100);
}
.bs-qr-whatnext-header-icon {
    font-size: var(--ui-text-3xl);
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-lg);
}
.bs-qr-whatnext-header-info {
    flex: 1;
    min-width: 0;
}
.bs-qr-whatnext-header-title {
    font-size: var(--ui-text-xl);
    font-weight: var(--ui-font-bold);
    color: var(--ui-gray-800);
}
.bs-qr-whatnext-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-1);
    align-items: center;
}
.bs-qr-whatnext-location {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
}
.bs-qr-whatnext-instruction {
    background: var(--ui-primary-50);
    border-left: 4px solid var(--ui-primary-500);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-font-bold);
    color: var(--ui-primary-800);
    margin-bottom: var(--ui-space-5);
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
}
.bs-qr-whatnext-instruction i {
    font-size: var(--ui-text-xl);
    color: var(--ui-primary-500);
}
.bs-qr-whatnext-progress {
    margin-bottom: var(--ui-space-5);
    padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
}
.bs-qr-whatnext-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-500);
    margin-bottom: var(--ui-space-1);
}
.bs-qr-whatnext-progress-bar {
    height: 8px;
    background: var(--ui-gray-100);
    border-radius: var(--ui-radius-full);
    overflow: hidden;
}
.bs-qr-whatnext-progress-fill {
    height: 100%;
    background: var(--ui-primary-500);
    border-radius: var(--ui-radius-full);
    transition: width 0.3s ease;
}
.bs-qr-whatnext-stage-label {
    font-size: var(--ui-text-xs);
    color: var(--ui-gray-600);
    margin-top: var(--ui-space-1);
}
.bs-qr-whatnext-stage-label strong {
    color: var(--ui-gray-800);
}
.bs-qr-whatnext-actions {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-3);
}
.bs-qr-whatnext-primary-btn {
    width: 100%;
    padding: var(--ui-space-4) var(--ui-space-5);
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-font-bold);
    border-radius: var(--ui-radius-lg);
}
.bs-qr-whatnext-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    padding-top: var(--ui-space-3);
    border-top: var(--ui-border-width) solid var(--ui-gray-100);
}
.bs-qr-whatnext-action-btn {
    flex: 1 1 auto;
    min-width: 130px;
    padding: var(--ui-space-2) var(--ui-space-3);
}
.bs-qr-whatnext-decision,
.bs-qr-whatnext-process-picker,
.bs-qr-whatnext-completion,
.bs-qr-whatnext-contents {
    margin-top: var(--ui-space-4);
    padding: var(--ui-space-4);
    background: var(--ui-gray-50);
    border-radius: var(--ui-radius-md);
    border: var(--ui-border-width) solid var(--ui-gray-200);
}
.bs-qr-whatnext-decision-title {
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    color: var(--ui-gray-700);
    margin-bottom: var(--ui-space-3);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-whatnext-route-btn {
    display: block;
    width: 100%;
    margin-bottom: var(--ui-space-2);
    text-align: left;
}
.bs-qr-whatnext-route-btn:last-child {
    margin-bottom: 0;
}
.bs-qr-whatnext-completion-title {
    font-size: var(--ui-text-base);
    font-weight: var(--ui-font-bold);
    color: var(--ui-accent-600);
    margin-bottom: var(--ui-space-3);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
}
.bs-qr-whatnext-journey-step {
    padding: var(--ui-space-1) 0;
    font-size: var(--ui-text-sm);
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    color: var(--ui-gray-700);
}
.bs-qr-whatnext-journey-step i {
    color: var(--ui-accent-500);
    font-size: var(--ui-text-xs);
}

/* ── Process Overview collapsible section ── */
.bs-qr-process-overview-section {
    margin-top: var(--ui-space-4);
}
.bs-qr-process-overview-toggle {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    width: 100%;
    padding: var(--ui-space-2) var(--ui-space-3);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-md);
    color: var(--ui-gray-600);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-semibold);
    cursor: pointer;
    transition: background 0.15s;
}
.bs-qr-process-overview-toggle:hover {
    background: var(--ui-gray-100);
}
.bs-qr-process-overview-body {
    margin-top: var(--ui-space-3);
}

/* ── Entity Finder + WhatNext responsive ── */
@media (max-width: 480px) {
    .bs-qr-finder-scan-row {
        flex-wrap: wrap;
    }
    .bs-qr-finder-type-pills {
        gap: var(--ui-space-1);
    }
    .bs-qr-finder-type-pill {
        font-size: var(--ui-text-xs);
        padding: var(--ui-space-1) var(--ui-space-3);
    }
    .bs-qr-whatnext-secondary {
        flex-direction: column;
    }
    .bs-qr-whatnext-action-btn {
        min-width: auto;
    }
}

/* ── Responsive: Print Centre & Other ── */
@media (max-width: 640px) {
    .bs-print-designer,
    .bs-print-multi,
    .bs-print-subsample {
        flex-direction: column;
    }
    .bs-print-controls {
        flex: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive: MinTrack Launcher & QR Module
   ══════════════════════════════════════════════════════════════════════ */

/* ── Desktop: ensure nested control-stages fill properly ── */
.bs-qr-station-content > .bs-s376 > .bs-s378 {
    display: flex;
    flex-direction: column;
    padding: var(--ui-space-4) var(--ui-space-5);
}

/* Print Centre button inside detail pane — contained width */
.bs-qr-print-centre-btn {
    margin-bottom: var(--ui-space-4);
}

/* ── Tablet (≤1024px): tighter spacing, narrower sidebar ── */
@media (max-width: 1024px) {
    .bs-launcher-module-body {
        padding: var(--ui-space-2);
    }
    .bs-qr-station-content {
        padding: var(--ui-space-3);
    }
    /* QR station sidebar — narrower */
    .bs-qr-root > .bs-s376 > .bs-s377 {
        max-width: 180px;
    }
    .bs-qr-station-header {
        margin-bottom: var(--ui-space-3);
    }
    /* Module-level tabs: hide labels, icons only */
    .bs-module-header-tab-label { display: none; }
    .bs-module-header-tab { padding: var(--ui-space-2); }
    .bs-module-header-tabs { gap: 2px; }
}

/* ── Tablet portrait (≤768px): stack nested panes vertically ── */
@media (max-width: 768px) {
    /* Module header compact */
    .bs-launcher-module-header {
        padding: var(--ui-space-2) var(--ui-space-3);
    }
    /* Header tabs: hide labels on tablet, show icons only */
    .bs-qr-header-tab-label { display: none; }
    /* Module-level tabs: even tighter at 768px */
    .bs-module-header-tab { padding: var(--ui-space-1); font-size: var(--ui-text-xs); }
    .bs-module-header-tab i { font-size: var(--ui-text-xs); }
    .bs-qr-header-tab { padding: var(--ui-space-2); }
    .bs-qr-header-tabs { gap: 2px; }
    /* Scan panel: narrower on tablet */
    .bs-qr-scan-panel { width: 260px; }
    /* Stack stage row on small tablets */
    @media (max-width: 640px) {
        .bs-qr-stage-row { flex-direction: column-reverse; }
        .bs-qr-scan-panel {
            width: 100%;
            border-left: none;
            border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
            max-height: 40vh;
        }
    }
    /* Inner control-stages (entity list + detail) stack vertically */
    .bs-qr-station-content > .bs-s376 {
        flex-direction: column;
    }
    .bs-qr-station-content > .bs-s376 > .bs-s377 {
        max-width: none;
        flex: none;
    }
    /* Batch bar horizontal */
    .bs-qr-batch-bar {
        flex-direction: row;
        flex-wrap: wrap;
    }
    /* QR preview section compact */
    .bs-qr-preview-section {
        flex-direction: row;
        align-items: center;
        gap: var(--ui-space-3);
    }
    .bs-qr-preview-box {
        max-width: 120px;
    }
    /* Launcher cards: 2-column on tablet */
    .bs-launcher-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Login grid: single column */
    .bs-launcher-user-grid {
        grid-template-columns: 1fr;
    }
    /* Header: stack on narrow */
    .bs-launcher-header {
        flex-direction: column;
        gap: var(--ui-space-2);
        text-align: center;
    }
    .bs-launcher-header-right {
        justify-content: center;
    }
}

/* ── Mobile (≤480px): single column everything ── */
@media (max-width: 480px) {
    /* Module header: compact */
    .bs-launcher-module-header {
        padding: var(--ui-space-2);
        gap: var(--ui-space-2);
    }
    .bs-launcher-module-body {
        padding: var(--ui-space-1);
    }
    .bs-qr-station-content {
        padding: var(--ui-space-2);
    }
    /* Launcher cards: single column */
    .bs-launcher-grid {
        grid-template-columns: 1fr !important;
    }
    /* Station header compact */
    .bs-qr-station-header {
        padding: var(--ui-space-2) var(--ui-space-3);
        margin-bottom: var(--ui-space-3);
    }
    /* Type pills scroll horizontal */
    .bs-qr-print-type-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--ui-space-1);
        padding-bottom: var(--ui-space-1);
    }
    .bs-qr-print-type-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }
    /* Scan bar: compact */
    .bs-qr-scan-bar {
        padding: var(--ui-space-1) var(--ui-space-2);
    }
    /* Metrics strip: compact horizontal scroll */
    .bs-qr-metrics-strip {
        gap: var(--ui-space-1);
        padding: var(--ui-space-1) var(--ui-space-2);
    }
    /* Footer: single column */
    .bs-launcher-footer-cols {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Module-Level Tabs (Sample Management)
   ══════════════════════════════════════════════════════════════════════════ */

/* Header tabs — integrated into the module title bar (gradient header) */
.bs-module-header-tabs {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1, 0.25rem);
    margin-left: auto;
}
.bs-module-header-tab {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1, 0.25rem);
    padding: var(--ui-space-2, 0.5rem) var(--ui-space-3, 0.75rem);
    background: transparent;
    border: none;
    border-radius: var(--ui-radius-md, 4px);
    color: rgba(255,255,255,0.6);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    cursor: pointer;
    transition: all calc(var(--hp-transition-speed) * 150ms) ease;
    white-space: nowrap;
}
.bs-module-header-tab i { font-size: var(--ui-text-sm); }

.bs-module-header-tab:hover {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.9);
}
.bs-module-header-tab.active {
    background: rgba(255,255,255,0.2);
    color: white;
    font-weight: var(--ui-font-semibold, 600);
}

/* Tab content area — fills remaining space */
.bs-module-tab-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bs-module-tab-panel {
    display: none;
    height: 100%;
    min-height: 0;
}

.bs-module-tab-panel.active {
    display: flex;
    flex-direction: column;
}

/* Each tab panel's control-stage fills full height */
.bs-module-tab-panel > .bs-s376 {
    flex: 1;
    min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Empty State + Breadcrumb + Scheduling Hint
   ══════════════════════════════════════════════════════════════════════════ */

/* Empty state — vertically centered with action button */
.bs-empty-state-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
    text-align: center;
    gap: var(--ui-space-3);
}
.bs-empty-state-icon {
    font-size: 2.5rem;
    color: var(--ui-gray-300);
}
.bs-empty-state-text {
    font-size: var(--ui-text-sm);
    color: var(--ui-gray-500);
    max-width: 300px;
    line-height: var(--hp-line-height);
}
.bs-empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-primary);
    color: white;
    border: none;
    border-radius: var(--ui-radius-md);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    cursor: pointer;
    transition: background calc(var(--hp-transition-speed) * 150ms) ease;
}
.bs-empty-state-btn:hover { background: var(--ui-primary-700); }

/* Breadcrumb — Project > Specimen context */
.bs-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-gray-50);
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    font-size: var(--ui-text-sm);
    flex-shrink: 0;
}
.bs-breadcrumb-link {
    color: var(--ui-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
}
.bs-breadcrumb-link:hover { text-decoration: underline; }
.bs-breadcrumb-sep { color: var(--ui-gray-400); }
.bs-breadcrumb-current {
    color: var(--ui-gray-700);
    font-weight: var(--ui-font-semibold);
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
}

/* Scheduling hint — clickable bar */
.bs-scheduling-hint {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-primary-50);
    border-bottom: var(--ui-border-width) solid var(--ui-primary-100);
    color: var(--ui-primary-700);
    font-size: var(--ui-text-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.bs-scheduling-hint:hover { background: var(--ui-primary-100); }

/* ── Finding 10: Inline style extraction classes ── */

/* Status icon in equipment/monitoring rows — color set via --_status-color */
.bs-status-icon {
    font-size: 0.55rem;
    width: 12px;
    text-align: center;
    color: var(--_status-color);
}

/* Utilization percentage value — color set via --_status-color */
.bs-util-pct {
    font-size: 0.5rem;
    font-weight: 600;
    min-width: 28px;
    text-align: right;
    color: var(--_status-color);
}

/* Progress bar fill — width set via --_bar-w, color via --_bar-c */
.bs-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
    background: var(--_bar-c);
    width: var(--_bar-w, 0%);
}

/* Utilization bar fill — width set via --_bar-w, color via --_bar-c */
.bs-util-bar-fill {
    height: 10px;
    border-radius: 3px;
    background: var(--_bar-c);
    width: var(--_bar-w, 0%);
}

/* Util bar percentage label — color set via --_status-color */
.bs-util-bar-label {
    font-size: 0.55rem;
    text-align: center;
    font-weight: 600;
    color: var(--_status-color);
}

/* Work queue item icon — color set via --_status-color */
.bs-work-item-icon {
    width: 16px;
    text-align: center;
    font-size: 0.7rem;
    color: var(--_status-color);
}

/* Inline status badge — color set via --_status-color */
.bs-inline-badge {
    font-size: 0.5rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    background: color-mix(in srgb, var(--_status-color) 15%, transparent);
    color: var(--_status-color);
}

/* Specimen link styling (replaces inline on bs-specimen-link) */
.bs-specimen-link {
    cursor: pointer;
    color: var(--bs-brand);
    text-decoration: underline;
    font-weight: 600;
}

/* Compliance status cell — color set via --_status-color */
.bs-compliance-status {
    text-align: center;
    font-weight: 700;
    color: var(--_status-color);
}

/* Compliance table summary + row highlights */
.bs-compliance-summary {
    display: flex;
    gap: var(--ui-space-2, 0.5rem);
    flex-wrap: wrap;
    padding: var(--ui-space-2, 0.5rem) 0;
    margin-bottom: var(--ui-space-1, 0.25rem);
}
.bs-compliance-tag {
    font-size: var(--ui-text-2xs, 0.65rem);
    font-weight: var(--ui-font-semibold, 600);
    padding: 0.15rem 0.5rem;
    border-radius: var(--ui-radius-full, 99px);
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.bs-compliance-tag-danger { background: color-mix(in srgb, var(--bs-danger) 12%, transparent); color: var(--bs-danger); }
.bs-compliance-tag-warning { background: color-mix(in srgb, var(--bs-warning) 12%, transparent); color: var(--bs-warning); }
.bs-compliance-tag-success { background: color-mix(in srgb, var(--bs-success) 12%, transparent); color: var(--bs-success); }
.bs-compliance-tag-muted { background: var(--ui-gray-100, #f3f4f6); color: var(--ui-gray-500, #6b7280); }
.bs-row-overdue { background: color-mix(in srgb, var(--bs-danger) 6%, transparent) !important; }
.bs-row-due-soon { background: color-mix(in srgb, var(--bs-warning) 6%, transparent) !important; }

/* Calibration status badge in compliance table */
.bs-cal-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--ui-radius-full, 99px);
    font-size: var(--ui-text-2xs, 0.7rem);
    font-weight: var(--ui-font-semibold, 600);
}
.bs-cal-badge-dot { font-size: 0.25rem; }
.bs-cal-badge-danger { background: color-mix(in srgb, var(--bs-danger) 10%, transparent); color: var(--bs-danger); }
.bs-cal-badge-warning { background: color-mix(in srgb, var(--bs-warning) 10%, transparent); color: var(--bs-warning); }
.bs-cal-badge-success { background: color-mix(in srgb, var(--bs-success) 10%, transparent); color: var(--bs-success); }
.bs-cal-badge-muted { background: var(--ui-gray-100, #f3f4f6); color: var(--ui-gray-500, #9ca3af); }

/* Shared tinted patterns — stat cards, action buttons, chips, badges */
.bs-stat-tinted { background: color-mix(in srgb, var(--_stat-color) 10%, transparent); }
.bs-stat-colored { color: var(--_stat-color); }
.bs-status-tinted { background: color-mix(in srgb, var(--_status-color) 15%, transparent); color: var(--_status-color); }
.bs-action-tinted {
    background: color-mix(in srgb, var(--_action-color) 15%, transparent);
    color: var(--_action-color);
    border: 1px solid color-mix(in srgb, var(--_action-color) 30%, transparent);
}
.bs-chip-tinted {
    background: color-mix(in srgb, var(--_chip-color) 15%, transparent);
    color: var(--_chip-color);
    border: 1px solid color-mix(in srgb, var(--_chip-color) 30%, transparent);
}
.bs-kpi-tinted {
    background: color-mix(in srgb, var(--_stat-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--_stat-color) 20%, transparent);
}
.bs-overdue-marker { border-left: 3px solid var(--bs-danger); }

/* Modal & utility classes */
.bs-modal-body-flex { padding: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-4); }
.bs-modal-btn-row { display: flex; gap: var(--ui-space-2); justify-content: flex-end; margin-top: var(--ui-space-2); }
.bs-mt-xs { margin-top: var(--ui-space-1); }

/* IFS link badge variants */
.bs-ifs-badge {
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
    border-radius: var(--bs-radius-lg);
    text-align: center;
}
.bs-ifs-badge.bs-ifs-linked {
    background: var(--bs-success-border);
    color: var(--bs-success);
}
.bs-ifs-badge.bs-ifs-pending {
    background: var(--bs-warning-bg);
    color: var(--bs-text-dark);
}

/* Mass flow table cell — first column left, rest center */
.bs-s486 { text-align: center; }
.bs-s486.bs-text-left { text-align: left; }

/* Physical state badge sizing */
.bs-phys-badge { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.5rem; padding: 0.1rem 0.3rem; }
.bs-phys-badge-lg { font-size: 0.75rem; padding: 0.2rem 0.5rem; }
.bs-phys-icon-sm { font-size: 0.45rem; }
.bs-phys-icon-lg { font-size: 0.65rem; }

/* IFS link value — dynamic color via --_status-color */
.bs-ifs-value {
    font-weight: 600;
    color: var(--_status-color);
}

/* Color indicator dot — background via --_status-color */
.bs-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--_status-color);
    flex-shrink: 0;
}
.bs-color-dot-sm { width: 6px; height: 6px; }

/* Severity/status label — color via --_status-color */
.bs-severity-label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.55rem;
    color: var(--_status-color);
}

/* Inline KPI value — color via --_status-color */
.bs-kpi-value-inline {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--_status-color);
}

/* Legend swatch — background via --_status-color */
.bs-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--_status-color);
    display: inline-block;
}

/* Budget comparison value — color via --_status-color */
.bs-budget-actual {
    font-weight: 600;
    color: var(--_status-color);
}
.bs-budget-check {
    font-size: 0.6rem;
    color: var(--_status-color);
}

/* Category icon in mass flow table — color via --_status-color */
.bs-cat-icon {
    font-size: 0.6rem;
    color: var(--_status-color);
}

/* Conditional text coloring via --_status-color */
.bs-conditional-value {
    font-weight: 600;
    color: var(--_status-color);
}

/* ── Finding 4: Color-coded timeline markers by event type ── */
.bs-timeline-event[data-event-type="custody_transfer"] .ui-timeline-marker,
.bs-timeline-event[data-event-type="custody"] .ui-timeline-marker {
    background: color-mix(in srgb, var(--bs-purple) 15%, transparent);
    color: var(--bs-purple);
    border-color: var(--bs-purple);
}
.bs-timeline-event[data-event-type="location_move"] .ui-timeline-marker,
.bs-timeline-event[data-event-type="location"] .ui-timeline-marker {
    background: color-mix(in srgb, var(--bs-success) 15%, transparent);
    color: var(--bs-success);
    border-color: var(--bs-success);
}
.bs-timeline-event[data-event-type="status_change"] .ui-timeline-marker {
    background: color-mix(in srgb, var(--bs-warning) 15%, transparent);
    color: var(--bs-warning);
    border-color: var(--bs-warning);
}
.bs-timeline-event[data-event-type="split"] .ui-timeline-marker {
    background: color-mix(in srgb, var(--bs-info) 15%, transparent);
    color: var(--bs-info);
    border-color: var(--bs-info);
}
.bs-timeline-event[data-event-type="scheduled"] .ui-timeline-marker {
    background: color-mix(in srgb, var(--bs-info) 15%, transparent);
    color: var(--bs-info);
    border-color: var(--bs-info);
}
.bs-timeline-event .ui-timeline-marker {
    width: 24px;
    height: 24px;
    font-size: 0.6rem;
}
.bs-timeline-event .ui-timeline-title {
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
}
.bs-timeline-event .ui-timeline-desc {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-500);
}
.bs-current-location {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    background: color-mix(in srgb, var(--bs-brand) 8%, transparent);
    border: var(--ui-border-width) solid color-mix(in srgb, var(--bs-brand) 25%, transparent);
    border-radius: var(--ui-radius-md);
    margin-bottom: var(--ui-space-3);
    font-size: var(--ui-text-sm);
}
.bs-current-location i { color: var(--bs-brand); }
.bs-current-location strong { font-weight: var(--ui-font-semibold); }

/* ── Finding 5: Compact experiment queue cards ── */
.bs-queue-card {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: var(--ui-radius-sm);
    cursor: pointer;
    margin-bottom: 0.15rem;
    border-left: 3px solid var(--ui-gray-300);
    transition: background 0.15s;
}
.bs-queue-card:hover { background: var(--ui-gray-50); }
.bs-queue-card.bs-queue-active {
    border-left-color: var(--bs-warning);
    background: color-mix(in srgb, var(--bs-warning) 5%, transparent);
}
.bs-queue-card.bs-queue-pending {
    border-left-color: var(--bs-info);
}
.bs-queue-status-badge {
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-weight: 600;
}
.bs-queue-active .bs-queue-status-badge {
    background: color-mix(in srgb, var(--bs-warning) 12%, transparent);
    color: var(--bs-warning);
}
.bs-queue-pending .bs-queue-status-badge {
    background: color-mix(in srgb, var(--bs-info) 12%, transparent);
    color: var(--bs-info);
}

/* ── Finding 6: Specimen detail hierarchy — smaller QR, dominant header ── */
.bs-s180 .bs-s181 { max-width: 100px; }
.bs-s180 .bs-s181 canvas,
.bs-s180 .bs-s181 svg { width: 100% !important; height: auto !important; }
.ui-detail-header .ui-detail-title {
    font-size: var(--ui-text-xl);
    font-weight: var(--ui-font-bold);
}

/* ── Finding 8: KPI chips — taller, value-dominant in grid ── */
.bs-kpi-grid .ui-metric-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--ui-space-3) var(--ui-space-2);
    border-radius: var(--ui-radius-lg);
    gap: var(--ui-space-1);
}
.bs-kpi-grid .ui-metric-chip-icon-circle {
    width: 36px;
    height: 36px;
    font-size: var(--ui-text-sm);
    border-radius: var(--ui-radius-md);
}
.bs-kpi-grid .ui-metric-chip-value {
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-font-extrabold);
    line-height: 1.1;
}
.bs-kpi-grid .ui-metric-chip-label {
    font-size: var(--ui-text-2xs);
    color: var(--ui-gray-500);
    font-weight: var(--ui-font-medium);
}

/* Specimen summary card for tab control panels */
.bs-specimen-summary-card {
    display: flex;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    margin-bottom: var(--ui-space-3);
}
.bs-summary-qr { flex-shrink: 0; }
.bs-summary-info {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    min-width: 0;
}

/* Inner tab panels — flex stretch so content fills stage height */
.bs-inner-tab-panel {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.bs-inner-tab-panel > .bs-s376 {
    flex: 1;
    min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Resources & Equipment module — deep fix additions (2026-03-28)
   ══════════════════════════════════════════════════════════════════════ */

/* Gantt container — flex column to fill stage height */
.bs-gantt-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.bs-gantt-box {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
}
.bs-gantt-date-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bs-gantt-nav-btn {
    border: 1px solid var(--bs-border);
    background: var(--bs-white, white);
    border-radius: var(--bs-radius-sm, 4px);
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    cursor: pointer;
    color: var(--bs-text);
    transition: background 0.15s;
}
.bs-gantt-nav-btn:hover { background: var(--bs-bg-hover); }
.bs-gantt-swimlane-click { cursor: pointer; min-height: 32px; }
.bs-gantt-swimlane-click:hover .bs-s261 { background: var(--bs-brand-light); }
.bs-gantt-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
    display: inline-block;
    vertical-align: middle;
}
/* Tinted dot pattern — replaces inline background:color */
.bs-gantt-dot-tinted { background: var(--_dot-color); }
.bs-legend-dot-tinted { background: var(--_dot-color); }
.bs-legend-sq-tinted { background: var(--_bar-c); }
.bs-cert-dot-tinted { background: var(--_dot-color); }
.bs-event-bar-tinted { background: var(--_bar-color); }

/* Staff tab — container, filter bar, collection wrapper */
.bs-staff-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.bs-staff-filter-bar {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.bs-staff-search {
    flex: 1;
    min-width: 120px;
    padding: 0.3rem 0.5rem;
    font-size: 0.65rem;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-sm, 4px);
    outline: none;
}
.bs-staff-search:focus { border-color: var(--bs-brand); }
.bs-staff-filter-select {
    padding: 0.3rem 0.4rem;
    font-size: 0.6rem;
    border: 1px solid var(--bs-border);
    border-radius: var(--bs-radius-sm, 4px);
    background: var(--bs-white, white);
    cursor: pointer;
}
.bs-staff-collection-wrap {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
/* Override bindCollection grid to hide default card title/subtitle (we use content) */
.bs-staff-collection-wrap .ui-card-title,
.bs-staff-collection-wrap .ui-card-subtitle { display: none; }
.bs-staff-card-inner { padding: 0; }

/* Status dot (small inline dot used in lists) */
.bs-status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* Documents — file type breakdown grid */
.bs-doc-type-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.bs-doc-type-chip {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bs-radius-sm, 4px);
    background: var(--bs-bg-hover);
    font-size: 0.6rem;
    color: var(--bs-text-secondary);
    cursor: default;
}
.bs-doc-type-chip i { color: var(--bs-brand); font-size: 0.55rem; }

/* Inventory — stock level overview grid */
.bs-stock-overview-grid {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.bs-stock-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    cursor: pointer;
    padding: 0.15rem 0;
}
.bs-stock-row:hover { background: var(--bs-bg-hover); border-radius: var(--bs-radius-sm, 4px); }
.bs-stock-name {
    width: 120px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-text);
    font-weight: 500;
}
.bs-stock-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--bs-bg-hover);
    border-radius: 3px;
    overflow: hidden;
}
.bs-stock-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.bs-stock-qty {
    width: 36px;
    text-align: right;
    font-weight: 600;
    color: var(--bs-text-secondary);
    font-size: 0.55rem;
}

/* Maintenance — type filter chips */
.bs-maint-type-bar {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.bs-maint-type-chip {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
    border: 1px solid var(--bs-border);
    border-radius: 12px;
    background: var(--bs-white, white);
    cursor: pointer;
    color: var(--bs-text-secondary);
    transition: all 0.15s;
}
.bs-maint-type-chip:hover { border-color: var(--bs-brand); color: var(--bs-brand); }
.bs-maint-type-active {
    background: var(--bs-brand);
    color: var(--bs-white, white);
    border-color: var(--bs-brand);
}

/* Skills matrix — expired cell tint */
.bs-matrix-cell-expired {
    background: color-mix(in srgb, var(--bs-danger) 15%, transparent) !important;
    color: var(--bs-danger) !important;
    text-decoration: line-through;
}

/* ── Workflow Stage Tabs (Dashboard) ── */
.bs-stage-tabs {
    display: flex;
    gap: var(--ui-space-1);
    padding: var(--ui-space-3) 0;
    border-bottom: var(--ui-border-width) solid var(--ui-gray-200);
    margin-bottom: var(--ui-space-4);
}
.bs-stage-tab {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-4);
    background: var(--ui-gray-50);
    border: var(--ui-border-width) solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    color: var(--ui-gray-600);
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    cursor: pointer;
    transition: all calc(var(--hp-transition-speed) * 150ms) ease;
    white-space: nowrap;
}
.bs-stage-tab i {
    font-size: var(--ui-text-sm);
    opacity: 0.7;
}
.bs-stage-tab:hover {
    background: var(--ui-gray-100);
    border-color: var(--ui-gray-300);
    color: var(--ui-gray-800);
}
.bs-stage-tab.active {
    background: var(--bs-brand, var(--ui-primary));
    border-color: var(--bs-brand, var(--ui-primary));
    color: white;
}
.bs-stage-tab.active i {
    opacity: 1;
}
.bs-stage-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 var(--ui-space-1);
    border-radius: var(--ui-radius-full);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-font-semibold);
    background: rgba(0,0,0,0.1);
}
.bs-stage-tab.active .bs-stage-tab-count {
    background: rgba(255,255,255,0.25);
}

/* ── LocationPicker ────────────────────────────────────���───────────────── */
.bs-location-picker {
    border: 1px solid var(--ui-gray-200);
    border-radius: var(--ui-radius-lg);
    background: var(--ui-white);
    overflow: hidden;
}
.bs-lp-display {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-3);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.bs-lp-display:hover { background: var(--ui-gray-50); }
.bs-lp-icon { color: var(--ui-primary-500); font-size: var(--ui-text-sm); }
.bs-lp-label {
    flex: 1;
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-font-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-lp-toggle {
    color: var(--ui-gray-400);
    font-size: var(--ui-text-xs);
    transition: transform 0.15s;
}
.bs-lp-panel {
    border-top: 1px solid var(--ui-gray-100);
    max-height: 280px;
    overflow-y: auto;
}
.bs-lp-actions {
    display: flex;
    padding: var(--ui-space-1) var(--ui-space-2);
    border-bottom: 1px solid var(--ui-gray-100);
}
.bs-lp-add-btn {
    font-size: var(--ui-text-xs);
    color: var(--ui-primary-600);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding: var(--ui-space-1) var(--ui-space-2);
    border-radius: var(--ui-radius-sm);
}
.bs-lp-add-btn:hover { background: var(--ui-primary-50); }