/* /Components/IssuesList/CardView/IssueCard.razor.rz.scp.css */
/* ── Card shell ──────────────────────────────────────────────────── */
.issueCard[b-4mpvmc2zh0] {
    position: relative;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--card-radius);
    padding: 14px 16px 10px;
    box-shadow: var(--card-shadow);
    cursor: grab;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.issueCard:active[b-4mpvmc2zh0] { cursor: grabbing; }
.issueCard:hover[b-4mpvmc2zh0]  { box-shadow: var(--card-shadow-hover); }

.issueCard--editing[b-4mpvmc2zh0] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
    cursor: auto;
}

.issueCard--unsaved[b-4mpvmc2zh0] {
    border-color: #f59e0b;
}

.issueCard--save-failed[b-4mpvmc2zh0] {
    border-color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

/* ── Delete button ───────────────────────────────────────────────── */
.cardDeleteBtn[b-4mpvmc2zh0] {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    color: #9ca3af;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.issueCard:hover .cardDeleteBtn[b-4mpvmc2zh0] { opacity: 1; }
.cardDeleteBtn:hover[b-4mpvmc2zh0]             { background: #fee2e2; color: #dc2626; }
.cardDeleteBtn:active[b-4mpvmc2zh0]            { background: #fecaca; color: #b91c1c; }

/* ── Shared editable-field text styles ───────────────────────────── */
/* Applied to both .cardName and .cardDesc */
.cardName[b-4mpvmc2zh0],
.cardDesc[b-4mpvmc2zh0] {
    cursor: text;
    padding: 2px 4px;
    word-wrap: break-word;
    border-radius: 4px;
    transition: background 0.15s;
}

.cardName:hover[b-4mpvmc2zh0],
.cardDesc:hover[b-4mpvmc2zh0] { background: rgba(0, 0, 0, 0.025); }

/* ── Name ───────────────────────────────────────────────────────── */
.cardName[b-4mpvmc2zh0] {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
    line-height: 1.4;
    margin-bottom: 4px;
}

.cardName--empty[b-4mpvmc2zh0] {
    color: #94a3b8;
    font-style: italic;
    font-weight: 400;
}

/* ── Field wrapper (edit mode) ───────────────────────────────────── */
.cardField[b-4mpvmc2zh0] {
    margin-bottom: 6px;
    cursor: auto;
}

.fieldError[b-4mpvmc2zh0] {
    display: block;
    font-size: 11px;
    color: #dc2626;
    margin-top: 3px;
    padding-left: 2px;
    animation: errorSlide-b-4mpvmc2zh0 0.2s ease-out;
}

@keyframes errorSlide-b-4mpvmc2zh0 {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Description ─────────────────────────────────────────────────── */
.cardDesc[b-4mpvmc2zh0] {
    font-size: 13px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #4b5563;
    line-height: 1.55;
}

.cardDesc--empty[b-4mpvmc2zh0] {
    color: #b0b8c4;
    font-style: italic;
    font-size: 12px;
}

.cardStatus[b-4mpvmc2zh0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.cardStatus--unsaved[b-4mpvmc2zh0] {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}

.cardStatus--error[b-4mpvmc2zh0] {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.cardFooter[b-4mpvmc2zh0] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    color: #94a3b8;
    cursor: default;
}

.cardFooter i[b-4mpvmc2zh0]    { font-size: 10px; }
.cardFooter span[b-4mpvmc2zh0] { flex: 1; }

/* ── Action buttons (Add to ST / Add to QA) ──────────────────────── */
.cardActionBtn[b-4mpvmc2zh0] {
    --btn-bg:           transparent;
    --btn-color:        inherit;
    --btn-border:       transparent;
    --btn-bg-hover:     transparent;
    --btn-color-hover:  #fff;

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s, padding 0.15s;
    white-space: nowrap;
    line-height: 1;
    min-width: 95px;
    justify-content: center;
}

.issueCard:hover .cardActionBtn:not(.cardActionBtn--st-nav):not(.cardActionBtn--qa-nav)[b-4mpvmc2zh0] { opacity: 1; }

.cardActionBtn:hover[b-4mpvmc2zh0] {
    background: var(--btn-bg-hover);
    color: var(--btn-color-hover);
    border-color: var(--btn-bg-hover);
}

.cardActionBtn--st[b-4mpvmc2zh0] {
    --btn-bg:       #eff6ff;
    --btn-color:    #2563eb;
    --btn-border:   #bfdbfe;
    --btn-bg-hover: #2563eb;
}

.cardActionBtn--qa[b-4mpvmc2zh0] {
    --btn-bg:       #fffbeb;
    --btn-color:    #d97706;
    --btn-border:   #fde68a;
    --btn-bg-hover: #d97706;
}

.cardActionBtn--st-nav[b-4mpvmc2zh0] {
    --btn-bg:       transparent;
    --btn-color:    #2563eb;
    --btn-border:   transparent;
    --btn-bg-hover: #2563eb;
    padding: 0;
    min-width: auto;
    opacity: 1;
    transition: background 0.15s, color 0.15s, padding 0.12s, border-radius 0.12s;
}

.cardActionBtn--st-nav:hover[b-4mpvmc2zh0] {
    background: var(--btn-bg-hover) !important;
    color: #fff !important;
    padding: 4px 7px !important;
    border-radius: 9999px !important;
    border-color: var(--btn-bg-hover) !important;
}

.cardActionBtn--qa-nav[b-4mpvmc2zh0] {
    --btn-bg:       transparent;
    --btn-color:    #4338ca;
    --btn-border:   transparent;
    --btn-bg-hover: #4338ca;
    padding: 0;
    min-width: auto;
    opacity: 1;
    transition: background 0.15s, color 0.15s, padding 0.12s, border-radius 0.12s;
}

.cardActionBtn--qa-nav:hover[b-4mpvmc2zh0] {
    background: var(--btn-bg-hover) !important;
    color: #fff !important;
    padding: 4px 7px !important;
    border-radius: 9999px !important;
    border-color: var(--btn-bg-hover) !important;
}

.cardActionBtn--st-nav .navigateIcon[b-4mpvmc2zh0],
.cardActionBtn--qa-nav .navigateIcon[b-4mpvmc2zh0] {
    font-size: 14px;
    line-height: 1;
}

/* ── Dark mode ───────────────────────────────────────────────────── */
[data-bs-theme="dark"] .issueCard[b-4mpvmc2zh0] {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

[data-bs-theme="dark"] .issueCard:hover[b-4mpvmc2zh0]      { background: #242d3d; }

[data-bs-theme="dark"] .issueCard--editing[b-4mpvmc2zh0] {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
}

[data-bs-theme="dark"] .issueCard--unsaved[b-4mpvmc2zh0] {
    border-color: #d97706;
}

[data-bs-theme="dark"] .issueCard--save-failed[b-4mpvmc2zh0] {
    border-color: #f87171;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.14);
}

[data-bs-theme="dark"] .cardName[b-4mpvmc2zh0]            { color: #f1f5f9; }
[data-bs-theme="dark"] .cardName--empty[b-4mpvmc2zh0]     { color: #6b7280; }

[data-bs-theme="dark"] .cardName:hover[b-4mpvmc2zh0],
[data-bs-theme="dark"] .cardDesc:hover[b-4mpvmc2zh0]      { background: rgba(255, 255, 255, 0.04); }

[data-bs-theme="dark"] .cardDesc[b-4mpvmc2zh0]            { color: #9ca3af; }
[data-bs-theme="dark"] .cardDesc--empty[b-4mpvmc2zh0]     { color: #4b5563; }
[data-bs-theme="dark"] .cardStatus--unsaved[b-4mpvmc2zh0] { color: #fbbf24; background: #2a2412; border-color: #92400e; }
[data-bs-theme="dark"] .cardStatus--error[b-4mpvmc2zh0]   { color: #fca5a5; background: #3b1212; border-color: #b91c1c; }

[data-bs-theme="dark"] .cardDeleteBtn[b-4mpvmc2zh0]       { color: #6b7280; }
[data-bs-theme="dark"] .cardDeleteBtn:hover[b-4mpvmc2zh0] { background: rgba(220, 38, 38, 0.15); color: #f87171; }

[data-bs-theme="dark"] .cardFooter[b-4mpvmc2zh0]          { border-top-color: #374151; color: #6b7280; }
[data-bs-theme="dark"] .fieldError[b-4mpvmc2zh0]          { color: #f87171; }

/* ── Dark mode: card action buttons ──────────────────────────────── */
[data-bs-theme="dark"] .cardActionBtn--st[b-4mpvmc2zh0] {
    --btn-bg:       #1e3a5f;
    --btn-color:    #93c5fd;
    --btn-border:   #1e40af;
    --btn-bg-hover: #2563eb;
}

[data-bs-theme="dark"] .cardActionBtn--qa[b-4mpvmc2zh0] {
    --btn-bg:       #1c1a10;
    --btn-color:    #fbbf24;
    --btn-border:   #78350f;
    --btn-bg-hover: #d97706;
}

[data-bs-theme="dark"] .cardActionBtn--st-nav[b-4mpvmc2zh0] {
    --btn-bg:       transparent;
    --btn-color:    #93c5fd;
    --btn-border:   transparent;
    --btn-bg-hover: #2563eb;
}

[data-bs-theme="dark"] .cardActionBtn--qa-nav[b-4mpvmc2zh0] {
    --btn-bg:       transparent;
    --btn-color:    #a5b4fc;
    --btn-border:   transparent;
    --btn-bg-hover: #4338ca;
}

/* ── Accessibility: visually hidden but screen-reader readable ────── */
.sr-only[b-4mpvmc2zh0] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/IssuesList/CardView/IssueCardGroup.razor.rz.scp.css */
.issueGroup[b-l19axhoy96] {
    background: #f8fafc;
    border: 2px dashed #e5e7eb;
    border-radius: var(--group-radius);
    padding: var(--group-padding);
    transition: all 0.2s ease;
}

/* ── Group Header ── */
.groupHeader[b-l19axhoy96] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid var(--gh-accent, transparent);
    background: rgba(var(--gh-rgb), 0.06);
    transition: background 0.15s ease;
    user-select: none;
    margin-bottom: 12px;
}

.groupHeader:hover[b-l19axhoy96] { background: rgba(var(--gh-rgb), 0.10); }

.groupHeader:active[b-l19axhoy96] { background: rgba(0, 0, 0, 0.06); }

/* ── Group Label ── */
.groupLabel[b-l19axhoy96] {
    font-size: 15px;
    color: #1f2937;
}

/* ── Badge ── */
.groupBadge[b-l19axhoy96] {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    font-size: 12px;
    padding: 2px 10px;
    min-width: 24px;
}

/* ── Add Button ── */
.addButton[b-l19axhoy96] {
    transition: transform 0.1s ease;
}

.addButton:hover[b-l19axhoy96]  { transform: translateY(-1px); }
.addButton:active[b-l19axhoy96] { transform: translateY(0); }

/* ── Caret ── */
.caret[b-l19axhoy96] {
    transition: transform 0.2s ease;
    font-size: 12px;
    color: #6b7280;
}

.caret.collapsed[b-l19axhoy96] { transform: rotate(-90deg); }

/* ── Cards Container ── */
.groupCardsContainer[b-l19axhoy96] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--card-gap);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.groupCardsContainer[b-l19axhoy96]::-webkit-scrollbar       { width: 6px; }
.groupCardsContainer[b-l19axhoy96]::-webkit-scrollbar-track { background: transparent; }
.groupCardsContainer[b-l19axhoy96]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.groupCardsContainer[b-l19axhoy96]::-webkit-scrollbar-thumb:hover { background: #94a3b8; }


.groupCardsContainer--empty[b-l19axhoy96] {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Dark Mode ── */
[data-bs-theme="dark"] .issueGroup[b-l19axhoy96] {
    background: #1e293b;
    border-color: #334155;
}

[data-bs-theme="dark"] .groupHeader[b-l19axhoy96]       { background: rgba(var(--gh-rgb), 0.08); }
[data-bs-theme="dark"] .groupHeader:hover[b-l19axhoy96] { background: rgba(var(--gh-rgb), 0.14); }

[data-bs-theme="dark"] .groupHeader:active[b-l19axhoy96] { background: rgba(255, 255, 255, 0.08); }

[data-bs-theme="dark"] .groupLabel[b-l19axhoy96] { color: #f1f5f9; }

[data-bs-theme="dark"] .groupBadge[b-l19axhoy96] {
    background: #334155 !important;
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .caret[b-l19axhoy96] { color: #94a3b8; }

[data-bs-theme="dark"] .groupCardsContainer[b-l19axhoy96]::-webkit-scrollbar-thumb       { background: #475569; }
[data-bs-theme="dark"] .groupCardsContainer[b-l19axhoy96]::-webkit-scrollbar-thumb:hover { background: #64748b; }

[data-bs-theme="dark"] .emptyGroupPlaceholder[b-l19axhoy96] { color: #6b7280; }

/* /Components/IssuesList/CardView/IssueCardView.razor.rz.scp.css */
.cardViewContainer[b-n371k0q7le] {
    display: flex;
    flex-direction: column;
    gap: var(--group-gap);
    width: 100%;
}

/* Top row: Uncategorized zone spans full width */
.topRow[b-n371k0q7le] {
    width: 100%;
}

/* Grid layout: 4 columns for main zones */
.cardGrid[b-n371k0q7le] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--group-gap);
    width: 100%;
}

/* Decision column: vertical stack of 4 sub-zones */
.decisionColumn[b-n371k0q7le] {
    display: flex;
    flex-direction: column;
    gap: var(--group-gap);
}

/* Responsive: stack on smaller screens */
@media (max-width: 1400px) {
    .cardGrid[b-n371k0q7le] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .cardGrid[b-n371k0q7le] {
        grid-template-columns: 1fr;
    }
}
/* /Components/IssuesList/IssueFiltersBar.razor.rz.scp.css */
.searchBox[b-hvtqb0zf1c] {
    flex: 0 0 auto;
    width: 240px;
    margin-left: auto; /* push to the right end of the bar */
}

.filterDropdown[b-hvtqb0zf1c] {
    min-width: 180px;
}

/* Disabled state for the sub-type select */
.filterDropdown select:disabled[b-hvtqb0zf1c] {
    opacity: 0.5;
    cursor: not-allowed;
}

[data-bs-theme="dark"] .filtersBar[b-hvtqb0zf1c] {
    background: var(--bs-dark);
    border-color: var(--bs-border-color) !important;
}
/* /Components/IssuesList/IssuesListComponent.razor.rz.scp.css */
.issues-list-wrapper[b-416ww7wjb6] {
    padding: 0 2px 24px;
}

.il-toolbar[b-416ww7wjb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0 12px;
    gap: 8px;
}

.il-toolbar-left[b-416ww7wjb6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.il-toolbar-right[b-416ww7wjb6] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

.il-save-indicator[b-416ww7wjb6],
.il-move-toast[b-416ww7wjb6] {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.il-toolbar-sep[b-416ww7wjb6] {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: #d1d5db;
    margin: 0 2px;
}

[data-bs-theme="dark"] .il-toolbar-sep[b-416ww7wjb6] { background: #374151; }

.il-sel-count[b-416ww7wjb6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-primary, #0c69b0);
    white-space: nowrap;
    line-height: 30px;
}

.il-search-box[b-416ww7wjb6] {
    width: 200px;
    height: 32px;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 4px;
}

.il-groupby-select[b-416ww7wjb6] {
    width: auto;
    min-width: 150px;
    height: 32px;
    font-size: 13px;
}

.il-filter-select[b-416ww7wjb6] {
    width: auto;
    min-width: 130px;
    height: 32px;
    font-size: 13px;
}

.il-filter-select:disabled[b-416ww7wjb6] {
    opacity: 0.45;
    cursor: not-allowed;
}


.il-view-toggle[b-416ww7wjb6] {
    display: inline-flex;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    overflow: hidden;
    height: 32px;
}

.il-view-btn[b-416ww7wjb6] {
    background: transparent;
    border: none;
    padding: 0 10px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    color: #6b7280;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.il-view-btn:hover[b-416ww7wjb6]  { background: #f3f4f6; color: #111827; }
.il-view-btn.active[b-416ww7wjb6] { background: #eff6ff; color: #2563eb; }

[data-bs-theme="dark"] .il-view-toggle[b-416ww7wjb6]          { border-color: #374151; }
[data-bs-theme="dark"] .il-view-btn[b-416ww7wjb6]             { color: #9ca3af; }
[data-bs-theme="dark"] .il-view-btn:hover[b-416ww7wjb6]       { background: #1f2937; color: #f9fafb; }
[data-bs-theme="dark"] .il-view-btn.active[b-416ww7wjb6]      { background: #1e3a5f; color: #93c5fd; }

[data-bs-theme="dark"] .il-sel-count[b-416ww7wjb6]          { color: #93c5fd; }

/* ── Icon-only toolbar button (e.g. Collapse All) ── */
.il-icon-btn[b-416ww7wjb6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #334155;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.il-icon-btn:hover[b-416ww7wjb6]  { background: #f1f5f9; color: #0f172a; border-color: #94a3b8; }
.il-icon-btn:active[b-416ww7wjb6] { background: #e2e8f0; }

[data-bs-theme="dark"] .il-icon-btn[b-416ww7wjb6]              { background: #1e293b; border-color: #334155; color: #94a3b8; }
[data-bs-theme="dark"] .il-icon-btn:hover[b-416ww7wjb6]        { background: #334155; color: #f1f5f9; border-color: #475569; }
/* /Components/IssuesList/IssuesListView.razor.rz.scp.css */
.ilv-outer[b-kw9qce4k7r] {
    min-height: 200px;
}
/* /Components/QualitativeAssessment/AddCriteriaMenu.razor.rz.scp.css */
/* ============================================================================
   AddCriteriaMenu.razor — Scoped CSS
   ============================================================================ */

.add-criteria-overlay[b-ng8s7i07pu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1000;
}

.add-criteria-menu[b-ng8s7i07pu] {
    position: fixed;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    min-width: 250px;
    max-width: 320px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0;
}

.menu-section[b-ng8s7i07pu] {
    padding: 8px 12px;
}

.menu-section-label[b-ng8s7i07pu] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.criteria-option[b-ng8s7i07pu] {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.criteria-option:hover[b-ng8s7i07pu] {
    background: #f3f4f6;
}

.criteria-option.create-new[b-ng8s7i07pu] {
    color: #3b82f6;
    font-weight: 500;
}

.criteria-option.create-new:hover[b-ng8s7i07pu] {
    background: #dbeafe;
}

.menu-separator[b-ng8s7i07pu] {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .add-criteria-menu[b-ng8s7i07pu] {
    background: #212529;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .menu-section-label[b-ng8s7i07pu] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .criteria-option[b-ng8s7i07pu] {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .criteria-option:hover[b-ng8s7i07pu] {
    background: #343a40;
}

[data-bs-theme="dark"] .criteria-option.create-new[b-ng8s7i07pu] {
    color: #60a5fa;
}

[data-bs-theme="dark"] .criteria-option.create-new:hover[b-ng8s7i07pu] {
    background: #1e3a5f;
}

[data-bs-theme="dark"] .menu-separator[b-ng8s7i07pu] {
    background: rgba(255,255,255,0.1);
}
/* /Components/QualitativeAssessment/AssessmentMatrix.razor.rz.scp.css */
/* ============================================================================
   AssessmentMatrix.razor — Scoped CSS
   ============================================================================ */

/* ─── Scroll Container (adds top padding for row alignment with strategy panel) ─── */

.matrix-scroll-container[b-cjp37blhea] {
    padding-top: 131px;
    /* align first data row with strategy panel row 1 */
    overflow-x: auto;
}

/* ─── Table Wrapper ─── */

.matrix-table-wrapper[b-cjp37blhea] {
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    display: inline-block;
}

/* ─── Table ─── */

.assessment-matrix-table[b-cjp37blhea] {
    border-collapse: collapse;
    table-layout: fixed;
    border-left: 1px solid #e5e7eb;
}

/* ─── Criteria Header Cells ─── */

.criteria-header-cell[b-cjp37blhea] {
    background: #f0f4ff;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    padding: 12px 10px;
    text-align: center;
    border-bottom: 2px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    position: relative;
    vertical-align: top;
}

.criteria-header-cell--highlighted[b-cjp37blhea] {
    background: var(--active) !important;
    box-shadow: inset 1px 0 0 var(--activeBorder), inset -1px 0 0 var(--activeBorder), inset 0 1px 0 var(--activeBorder);
    position: relative;
    z-index: 1;
}

.header-content[b-cjp37blhea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.header-content-wrapper[b-cjp37blhea] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.editable-header[b-cjp37blhea] {
    cursor: text;
    padding: 4px 8px;
    border-radius: 4px;
    width: 80%;
    max-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.editable-header:hover[b-cjp37blhea] {
    background: rgba(59, 130, 246, 0.08);
}

.assessment-matrix-table.read-only .editable-header[b-cjp37blhea] {
    cursor: default;
}

.assessment-matrix-table.read-only .editable-header:hover[b-cjp37blhea] {
    background: transparent;
}

.criteria-name[b-cjp37blhea] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

.criteria-name:hover[b-cjp37blhea] {
    background: rgba(59, 130, 246, 0.08);
}
.criteria-scale-label[b-cjp37blhea] {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 400;
    text-align: center;
}

/* ─── Header Menu Button (⋮) ─── */

.header-menu-btn[b-cjp37blhea] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    opacity: 1;
    transition: background 0.12s ease, color 0.12s ease;
    line-height: 1;
    padding: 0;
}

.header-menu-btn.visible[b-cjp37blhea] {
    color: #6b7280;
}

.header-menu-btn:hover[b-cjp37blhea] {
    background: #dbeafe;
    color: #3b82f6;
}

/* ─── Header Inline Edit ─── */

.header-inline-edit[b-cjp37blhea] {
    padding: 2px;
}

.header-edit-input[b-cjp37blhea] {
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    text-align: center;
    background: #fff;
}

/* ─── Add Column Cell ─── */

.add-column-cell[b-cjp37blhea] {
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    background: #fafafa;
    border-bottom: 2px solid #e5e7eb;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.add-column-btn[b-cjp37blhea] {
    width: 100%;
    height: 100%;
    min-height: 40px;
    border: none;
    background: transparent;
    font-size: 20px;
    font-weight: 600;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-column-btn:hover[b-cjp37blhea] {
    background: #dbeafe;
    color: #3b82f6;
}

/* ─── Assessment Cells ─── */

.assessment-cell[b-cjp37blhea] {
    height: 100px;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    border-bottom: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}

.assessment-cell:hover[b-cjp37blhea],
.assessment-cell.active[b-cjp37blhea] {
    background: #f0f4ff;
}

.assessment-cell--highlighted-column[b-cjp37blhea] {
    background: var(--active) !important;
    box-shadow: inset 1px 0 0 var(--activeBorder), inset -1px 0 0 var(--activeBorder);
    position: relative;
    z-index: 1;
}

.assessment-cell--highlighted-last[b-cjp37blhea] {
    box-shadow: inset 1px 0 0 var(--activeBorder), inset -1px 0 0 var(--activeBorder), inset 0 -1px 0 var(--activeBorder) !important;
}

.assessment-value[b-cjp37blhea] {
    width: 100%;
    height: 100%;
    min-height: 100px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.1px;
}

.assessment-badge[b-cjp37blhea] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 156px;
}

.assessment-badge-color[b-cjp37blhea] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.18), inset 0 0 0 1px rgba(17, 24, 39, 0.08);
}

.assessment-badge-label[b-cjp37blhea] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.1px;
}

.assessment-cell.unassessed .assessment-empty[b-cjp37blhea] {
    color: #d1d5db;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 88px;
}

/* ─── Spacer Cell ─── */

.spacer-cell[b-cjp37blhea] {
    width: 48px;
    min-width: 48px;
    border-bottom: 1px solid #e5e7eb;
}
.empty-add-btn[b-cjp37blhea] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 32px;
    background: #2563eb;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.empty-add-btn:hover[b-cjp37blhea] {
    background: #1d4ed8;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
    transform: translateY(-1px);
}

.empty-add-btn:active[b-cjp37blhea] {
    background: #1e40af;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transform: translateY(0);
}

/* ─── Read-Only (Viewer) interaction overrides ─── */

.assessment-matrix-table.read-only .criteria-name[b-cjp37blhea] {
    cursor: default;
}

.assessment-matrix-table.read-only .criteria-name:hover[b-cjp37blhea] {
    background: transparent;
}

.assessment-matrix-table.read-only .criteria-scale-label[b-cjp37blhea] {
    cursor: default;
}

.assessment-matrix-table.read-only .assessment-cell[b-cjp37blhea] {
    cursor: default;
}

.assessment-matrix-table.read-only .assessment-cell:hover[b-cjp37blhea],
.assessment-matrix-table.read-only .assessment-cell.active[b-cjp37blhea] {
    background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .matrix-table-wrapper[b-cjp37blhea] {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .corner-cell[b-cjp37blhea] {
    background: #2c3034;
    border-bottom-color: rgba(255, 255, 255, 0.15);
    border-right-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .criteria-header-cell[b-cjp37blhea] {
    background: #2c3034;
    border-bottom-color: rgba(255, 255, 255, 0.15);
    border-right-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .criteria-header-cell--highlighted[b-cjp37blhea] {
    background: var(--active) !important;
    box-shadow: inset 1px 0 0 var(--activeBorder), inset -1px 0 0 var(--activeBorder), inset 0 1px 0 var(--activeBorder);
}

[data-bs-theme="dark"] .criteria-name[b-cjp37blhea] {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .criteria-name:hover[b-cjp37blhea] {
    background: rgba(59, 130, 246, 0.15);
}

[data-bs-theme="dark"] .criteria-scale-label[b-cjp37blhea] {
    color: #6c757d;
}

[data-bs-theme="dark"] .header-menu-btn[b-cjp37blhea] {
    color: #6b7280;
}

[data-bs-theme="dark"] .header-menu-btn:hover[b-cjp37blhea] {
    background: #1e3a5f;
    color: #60a5fa;
}

[data-bs-theme="dark"] .header-edit-input[b-cjp37blhea] {
    background: #212529;
    color: #f8f9fa;
    border-color: #3b82f6;
}

[data-bs-theme="dark"] .add-column-cell[b-cjp37blhea] {
    background: #1a1d20;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .add-column-btn[b-cjp37blhea] {
    color: #6c757d;
}

[data-bs-theme="dark"] .add-column-btn:hover[b-cjp37blhea] {
    background: #1e3a5f;
    color: #60a5fa;
}

[data-bs-theme="dark"] .row-number-cell[b-cjp37blhea] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    border-right-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .assessment-matrix-table[b-cjp37blhea] {
    border-left-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .assessment-cell[b-cjp37blhea] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    border-right-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .assessment-cell:hover[b-cjp37blhea] {
    background: rgba(59, 130, 246, 0.08);
}

[data-bs-theme="dark"] .assessment-cell.active[b-cjp37blhea] {
    background: rgba(59, 130, 246, 0.12);
}

[data-bs-theme="dark"] .assessment-cell--highlighted-column[b-cjp37blhea] {
    background: var(--active) !important;
    box-shadow: inset 1px 0 0 var(--activeBorder), inset -1px 0 0 var(--activeBorder);
}

[data-bs-theme="dark"] .assessment-cell--highlighted-last[b-cjp37blhea] {
    box-shadow: inset 1px 0 0 var(--activeBorder), inset -1px 0 0 var(--activeBorder), inset 0 -1px 0 var(--activeBorder) !important;
}

[data-bs-theme="dark"] .assessment-badge-color[b-cjp37blhea] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(248, 250, 252, 0.12);
}

[data-bs-theme="dark"] .assessment-badge-label[b-cjp37blhea] {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .assessment-cell.unassessed .assessment-empty[b-cjp37blhea] {
    color: #4a5568;
}

[data-bs-theme="dark"] .spacer-cell[b-cjp37blhea] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .empty-add-btn[b-cjp37blhea] {
    background: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

[data-bs-theme="dark"] .empty-add-btn:hover[b-cjp37blhea] {
    background: #1d4ed8;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

[data-bs-theme="dark"] .assessment-matrix-table.read-only .criteria-name:hover[b-cjp37blhea] {
    background: transparent;
}

[data-bs-theme="dark"] .assessment-matrix-table.read-only .assessment-cell:hover[b-cjp37blhea],
[data-bs-theme="dark"] .assessment-matrix-table.read-only .assessment-cell.active[b-cjp37blhea] {
    background: transparent;
}
/* /Components/QualitativeAssessment/ColumnContextMenu.razor.rz.scp.css */
/* ============================================================================
   ColumnContextMenu.razor — Scoped CSS
   ============================================================================ */

.column-menu-overlay[b-rk7ufz1qj6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1000;
}

.column-context-menu[b-rk7ufz1qj6] {
    position: fixed;
    transform: translateX(-100%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 4px 0;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.menu-item[b-rk7ufz1qj6] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.menu-item:hover[b-rk7ufz1qj6] {
    background: #dbeafe;
    color: #1d4ed8;
}

.menu-item.danger[b-rk7ufz1qj6] {
    color: #ef4444;
}

.menu-item.danger:hover[b-rk7ufz1qj6] {
    background: #fef2f2;
    color: #ef4444;
}

.menu-icon[b-rk7ufz1qj6] {
    width: 20px;
    font-size: 14px;
    text-align: center;
    flex-shrink: 0;
}

.menu-separator[b-rk7ufz1qj6] {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .column-context-menu[b-rk7ufz1qj6] {
    background: #212529;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .menu-item[b-rk7ufz1qj6] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .menu-item:hover[b-rk7ufz1qj6] {
    background: #1e3a5f;
    color: #93c5fd;
}

[data-bs-theme="dark"] .menu-item.danger[b-rk7ufz1qj6] {
    color: #f87171;
}

[data-bs-theme="dark"] .menu-item.danger:hover[b-rk7ufz1qj6] {
    background: #3b1c1c;
    color: #f87171;
}

[data-bs-theme="dark"] .menu-separator[b-rk7ufz1qj6] {
    background: rgba(255,255,255,0.1);
}
/* /Components/QualitativeAssessment/QualitativeAssessment.razor.rz.scp.css */
.qualitative-assessment-page[b-glvf6dq1sx] {
    width: 100%;
}

/* ============================================================================
   TWO-COLUMN FLEX LAYOUT
   ============================================================================ */

.qa-strategy-panel[b-glvf6dq1sx] {
    width: 500px;
    min-width: 500px;
    flex-shrink: 0;
    transition: width 0.3s ease, min-width 0.3s ease;
}

.qa-strategy-panel.collapsed[b-glvf6dq1sx] {
    width: 260px;
    min-width: 150px;
}

.qa-matrix-panel[b-glvf6dq1sx] {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
}

/* ============================================================================
   CARD CONTAINER
   ============================================================================ */

.strategy-panel-container[b-glvf6dq1sx] {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    width: 100%;
}

[data-bs-theme="dark"] .strategy-panel-container[b-glvf6dq1sx] {
    background: #212529;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
}

.strategy-panel-header[b-glvf6dq1sx] {
    padding: 20px 20px 15px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.strategy-panel-header h5[b-glvf6dq1sx] {
    margin-bottom: 0;
}

[data-bs-theme="dark"] .strategy-panel-header[b-glvf6dq1sx] {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ============================================================================
   RESPONSIVE LAYOUT
   ============================================================================ */

.strategy-panel-container .strategy-panel[b-glvf6dq1sx] {
    padding: 20px;
    width: 100% !important;
    min-width: auto !important;
}

.strategy-panel-container .strategy-table table[b-glvf6dq1sx] {
    width: 100% !important;
    table-layout: auto !important;
}

.strategy-panel-container .strategy-name-cell[b-glvf6dq1sx],
.strategy-panel-container .strategy-objective-cell[b-glvf6dq1sx],
.strategy-panel-container .strategy-rationale-cell[b-glvf6dq1sx] {
    width: auto !important;
    min-width: 100px !important;
    max-width: none !important;
}

.strategy-panel-container .strategy-panel.collapsed .strategy-objective-cell[b-glvf6dq1sx],
.strategy-panel-container .strategy-panel.collapsed .strategy-rationale-cell[b-glvf6dq1sx],
.strategy-panel-container .strategy-panel.collapsed th:nth-child(3)[b-glvf6dq1sx],
.strategy-panel-container .strategy-panel.collapsed th:nth-child(4)[b-glvf6dq1sx] {
    display: none !important;
}

/* ============================================================================
   ASSESSMENT PANEL
   ============================================================================ */

.assessment-content[b-glvf6dq1sx] {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-height: 400px;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .assessment-content[b-glvf6dq1sx] {
    background: #212529;
    box-shadow: 0 2px 4px rgba(255,255,255,0.1);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn-inverted[b-glvf6dq1sx] {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0.5rem;
}

.btn-inverted:hover[b-glvf6dq1sx] {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* Viewer mode keeps strategy list visually non-interactive. */
.qualitative-assessment-page.viewer-readonly .strategy-panel-container .strategy-table td[b-glvf6dq1sx],
.qualitative-assessment-page.viewer-readonly .strategy-panel-container .strategy-table th[b-glvf6dq1sx],
.qualitative-assessment-page.viewer-readonly .strategy-panel-container .strategy-table .strategy-name-cell[b-glvf6dq1sx],
.qualitative-assessment-page.viewer-readonly .strategy-panel-container .strategy-table .strategy-objective-cell[b-glvf6dq1sx],
.qualitative-assessment-page.viewer-readonly .strategy-panel-container .strategy-table .strategy-rationale-cell[b-glvf6dq1sx] {
    cursor: default !important;
}

[data-bs-theme="dark"] .btn-inverted:hover[b-glvf6dq1sx] {
    background: rgba(255,255,255,0.05);
}

.scale-saving-overlay[b-glvf6dq1sx] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55);
}

.scale-saving-indicator[b-glvf6dq1sx] {
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #374151;
    font-size: 13px;
    font-weight: 500;
}

[data-bs-theme="dark"] .scale-saving-overlay[b-glvf6dq1sx] {
    background: rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .scale-saving-indicator[b-glvf6dq1sx] {
    background: rgba(33, 37, 41, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8f9fa;
}
/* /Components/QualitativeAssessment/ScaleConfigDialog.razor.rz.scp.css */
/* ============================================================================
   ScaleConfigDialog.razor — Scoped CSS
   ============================================================================ */

.scale-config-overlay[b-2ykhha2chl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scale-config-dialog[b-2ykhha2chl] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
}

/* ─── Header ─── */

.dialog-header[b-2ykhha2chl] {
    margin-bottom: 20px;
}

.dialog-header h4[b-2ykhha2chl] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

/* ─── Body ─── */

.dialog-body[b-2ykhha2chl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-2ykhha2chl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-2ykhha2chl] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ─── Level Preview List ─── */

.level-preview-list[b-2ykhha2chl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
}

.level-preview-row[b-2ykhha2chl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.level-preview-row:last-child[b-2ykhha2chl] {
    border-bottom: none;
}

.level-badge[b-2ykhha2chl] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.level-preview-label[b-2ykhha2chl] {
    font-size: 14px;
    color: #374151;
}

.level-preview-input[b-2ykhha2chl] {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 14px;
    color: #374151;
    background: #fff;
}

.level-preview-input:focus[b-2ykhha2chl] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.level-preview-input[b-2ykhha2chl]::placeholder {
    color: #9ca3af;
}

/* ─── Footer ─── */

.dialog-footer[b-2ykhha2chl] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.btn-cancel[b-2ykhha2chl] {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
}

.btn-cancel:hover[b-2ykhha2chl] {
    background: #f3f4f6;
}

.btn-save[b-2ykhha2chl] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
}

.btn-save:hover[b-2ykhha2chl] {
    background: #2563eb;
}

.btn-delete[b-2ykhha2chl] {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: #ef4444;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
    margin-right: auto;
}

.btn-delete:hover[b-2ykhha2chl] {
    background: #dc2626;
}

.btn-delete:disabled[b-2ykhha2chl] {
    background: #9ca3af;
    cursor: not-allowed;
}

.delete-error-message[b-2ykhha2chl] {
    font-size: 12px;
    color: #ef4444;
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .scale-config-overlay[b-2ykhha2chl] {
    background: rgba(0,0,0,0.6);
}

[data-bs-theme="dark"] .scale-config-dialog[b-2ykhha2chl] {
    background: #212529;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

[data-bs-theme="dark"] .dialog-header h4[b-2ykhha2chl] {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .form-label[b-2ykhha2chl] {
    color: #adb5bd;
}

[data-bs-theme="dark"] .level-preview-list[b-2ykhha2chl] {
    border-color: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .level-preview-row[b-2ykhha2chl] {
    border-bottom-color: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .level-preview-label[b-2ykhha2chl] {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .level-preview-input[b-2ykhha2chl] {
    background: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .level-preview-input[b-2ykhha2chl]::placeholder {
    color: #adb5bd;
}

[data-bs-theme="dark"] .dialog-footer[b-2ykhha2chl] {
    border-top-color: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .btn-cancel[b-2ykhha2chl] {
    background: #343a40;
    border-color: #495057;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .btn-cancel:hover[b-2ykhha2chl] {
    background: #495057;
}

[data-bs-theme="dark"] .btn-save[b-2ykhha2chl] {
    background: #3b82f6;
}

[data-bs-theme="dark"] .btn-save:hover[b-2ykhha2chl] {
    background: #2563eb;
}
/* /Components/QualitativeAssessment/ScalePopover.razor.rz.scp.css */
/* ============================================================================
   ScalePopover.razor — Scoped CSS
   ============================================================================ */

.scale-popover-overlay[b-jokfws7h2y] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 1000;
}

.scale-popover[b-jokfws7h2y] {
    position: fixed;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 8px;
    min-width: 180px;
    max-width: 280px;
    z-index: 1001;
}

.popover-title[b-jokfws7h2y] {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 8px 12px 6px;
}

.popover-options[b-jokfws7h2y] {
    display: flex;
    flex-direction: column;
}

.scale-option[b-jokfws7h2y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background 0.12s ease;
}

.scale-option:hover[b-jokfws7h2y] {
    background: #f3f4f6;
}

.scale-option.selected[b-jokfws7h2y] {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
}

.scale-badge[b-jokfws7h2y] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
}

.scale-label[b-jokfws7h2y] {
    flex: 1;
}

.scale-label-placeholder[b-jokfws7h2y] {
    color: #9ca3af;
    font-style: italic;
}

.popover-clear-section[b-jokfws7h2y] {
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 4px;
}

.clear-btn[b-jokfws7h2y] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 13px;
    color: #ef4444;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.clear-btn:hover[b-jokfws7h2y] {
    background: #fef2f2;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════ */

[data-bs-theme="dark"] .scale-popover[b-jokfws7h2y] {
    background: #212529;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

[data-bs-theme="dark"] .popover-title[b-jokfws7h2y] {
    color: #adb5bd;
}

[data-bs-theme="dark"] .scale-option[b-jokfws7h2y] {
    color: #f8f9fa;
}

[data-bs-theme="dark"] .scale-label-placeholder[b-jokfws7h2y] {
    color: #adb5bd;
}

[data-bs-theme="dark"] .scale-option:hover[b-jokfws7h2y] {
    background: #343a40;
}

[data-bs-theme="dark"] .scale-option.selected[b-jokfws7h2y] {
    background: #1e3a5f;
    color: #93c5fd;
}

[data-bs-theme="dark"] .popover-clear-section[b-jokfws7h2y] {
    border-top-color: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .clear-btn[b-jokfws7h2y] {
    color: #f87171;
}

[data-bs-theme="dark"] .clear-btn:hover[b-jokfws7h2y] {
    background: #3b1c1c;
}
/* /Components/Shared/ActiveUserRow.razor.rz.scp.css */
/* User avatar styling for ActiveUserRow component */
.user-avatar[b-jrclk9ru37] {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-avatar:hover[b-jrclk9ru37] {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.status-dot[b-jrclk9ru37] {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #10b981; /* Active - Green */
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.status-dot-idle[b-jrclk9ru37] {
    background-color: #eab308; /* Idle - Yellow */
}

.status-dot-away[b-jrclk9ru37] {
    background-color: #f97316; /* Away - Orange */
}
/* /Components/Shared/ActiveUsersPanel.razor.rz.scp.css */
/* User avatar styling */
.user-avatar[b-zf8t6el0xv] {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar:hover[b-zf8t6el0xv] {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.user-avatar-sm[b-zf8t6el0xv] {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: white;
    font-weight: 600;
    font-size: 0.7rem;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expand-btn[b-zf8t6el0xv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 36px;
    padding: 0 12px;
    border-radius: 18px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    color: #495057;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.expand-btn:hover[b-zf8t6el0xv] {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.expand-btn i[b-zf8t6el0xv] {
    font-size: 0.7rem;
}

.status-dot-sm[b-zf8t6el0xv] {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #10b981; /* Active - Green */
    border: 2px solid white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.status-dot-idle[b-zf8t6el0xv] {
    background-color: #eab308; /* Idle - Yellow */
}

.status-dot-away[b-zf8t6el0xv] {
    background-color: #f97316; /* Away - Orange */
}

/* Syncfusion Dialog customization */
[b-zf8t6el0xv] .users-dialog .e-dlg-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 16px 20px;
}

[b-zf8t6el0xv] .users-dialog .e-dlg-header-content {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

[b-zf8t6el0xv] .users-dialog .e-dlg-content {
    padding: 0;
}

/* Syncfusion Dialog customization */
[b-zf8t6el0xv] .users-dialog .e-dlg-header {
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

[b-zf8t6el0xv] .search-input .e-input-group:focus-within {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

[b-zf8t6el0xv] .search-input .e-input {
    padding-left: 8px;
}

[b-zf8t6el0xv] .search-input .e-input-group-icon {
    padding: 0 12px;
}

.search-highlight[b-zf8t6el0xv] {
    background-color: #fff3cd;
    padding: 2px 0;
    border-radius: 2px;
    font-weight: 600;
}

.no-results[b-zf8t6el0xv] {
    padding: 40px 20px;
}

.users-list[b-zf8t6el0xv] {
    max-height: 400px;
    overflow-y: auto;
    padding: 12px;
}

.user-item[b-zf8t6el0xv] {
    transition: background-color 0.15s ease;
}

.user-item:hover[b-zf8t6el0xv] {
    background-color: #f8f9fa;
}

/* Scrollbar styling */
.users-list[b-zf8t6el0xv]::-webkit-scrollbar {
    width: 6px;
}

.users-list[b-zf8t6el0xv]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.users-list[b-zf8t6el0xv]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.users-list[b-zf8t6el0xv]::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* ── Default (full-page centred) ─────────────────────────────────────────── */
.es-wrapper--default[b-wbbvxgmku6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 48px;
    text-align: center;
    width: 100%;
}

.es-wrapper--default .es-illustration[b-wbbvxgmku6] {
    width: 120px;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.12));
}

.es-wrapper--default .es-title[b-wbbvxgmku6] {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.es-wrapper--default .es-hint[b-wbbvxgmku6] {
    font-size: 13px;
    color: #6b7280;
    max-width: 320px;
    line-height: 1.55;
    margin: 0;
}

.es-wrapper--default .es-action[b-wbbvxgmku6] {
    margin-top: 24px;
}

/* ── Small (inline — card group placeholder) ──────────────────────────────── */
.es-wrapper--small[b-wbbvxgmku6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
    text-align: center;
    width: 100%;
    pointer-events: none;
    user-select: none;
}

.es-wrapper--small .es-illustration[b-wbbvxgmku6] {
    width: 40px;
    height: auto;
    opacity: 0.5;
}

.es-wrapper--small .es-title[b-wbbvxgmku6] {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.es-wrapper--small .es-hint[b-wbbvxgmku6] {
    font-size: 12px;
    color: #94a3b8;
    max-width: 180px;
    line-height: 1.4;
}

/* ── Illustration SVG sizing ──────────────────────────────────────────────── */
.es-illustration svg[b-wbbvxgmku6] {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .es-wrapper--default .es-title[b-wbbvxgmku6] { color: #f1f5f9; }
[data-bs-theme="dark"] .es-wrapper--default .es-hint[b-wbbvxgmku6]  { color: #9ca3af; }

[data-bs-theme="dark"] .es-wrapper--small .es-title[b-wbbvxgmku6]   { color: #94a3b8; }
[data-bs-theme="dark"] .es-wrapper--small .es-hint[b-wbbvxgmku6]    { color: #64748b; }
/* /Components/Shared/FrameViewTabs.razor.rz.scp.css */
/*
 * FrameViewTabs.razor.css  —  scoped styles for the frame view tab bar
 *
 * SfTab is rendered as a segmented control:
 *   • The tab header acts as a pill-shaped track with a muted background.
 *   • Inactive tabs are transparent with muted text.
 *   • The active tab has an elevated white background (light) or deep surface (dark).
 *   • Content pane is hidden; this is purely a tab-switching control.
 */

/* ── Host wrapper ─────────────────────────────────────────────── */
.frame-view-tabs-host[b-4owwnleltw] {
    display: contents;
}

/* ── Remove Syncfusion pseudo-element decorations ─────────────── */
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header::after,
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header::before {
    display: none !important;
}

/* ── Segmented control track ──────────────────────────────────── */
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header {
    background: transparent !important;
    border: none !important;
    margin: 0 12px !important;
}

.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-items {
    background: #e9ecef !important;
    border-radius: 8px !important;
    padding: 3px !important;
    width: fit-content !important;
}

/* ── Individual tab item: base reset ─────────────────────────── */
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item {
    border: none !important;
    border-radius: 6px !important;
    margin: 0 !important;
}

.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    border: none !important;
    border-radius: 6px !important;
}

/* ── Inactive tab: muted text, icons inherit ─────────────────── */
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-text {
    font-family: "EMprintRegular", "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
    color: #6c757d !important;
}

/* ── Inactive hover: slightly less muted ─────────────────────── */
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-text,
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-active):focus .e-tab-text {
    color: #343a40 !important;
}

/* ── Active tab: elevated white pill, bold dark text ─────────── */
.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    font-family: "EMprintSemibold", "HelveticaNeue", "Helvetica", "Arial", sans-serif !important;
    color: #212529 !important;
}

/* ══════════════════════════════════════════════════════════════════
   Dark mode
   ══════════════════════════════════════════════════════════════════ */

/* ── Track: dark gray surface ─────────────────────────────────── */
[data-bs-theme="dark"] .frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-items {
    background: #343a40 !important;
}

/* ── Inactive: muted gray text ────────────────────────────────── */
[data-bs-theme="dark"] .frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-text {
    color: #adb5bd !important;
}

[data-bs-theme="dark"] .frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-active):hover .e-tab-text,
[data-bs-theme="dark"] .frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-active):focus .e-tab-text {
    color: #dee2e6 !important;
}

/* ── Active: deep surface, white text ────────────────────────── */
[data-bs-theme="dark"] .frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: #212529 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
}

[data-bs-theme="dark"] .frame-view-tabs-host[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: #f8f9fa !important;
}

/* ── Selection mode: block all tab clicks and dim inactive tabs ── */
.frame-view-tabs-host.tabs-disabled[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header {
    pointer-events: none !important;
}

    .frame-view-tabs-host.tabs-disabled[b-4owwnleltw]  .frame-view-tabs.e-tab .e-tab-header .e-toolbar-item:not(.e-active) {
        opacity: 0.55 !important;
    }
/* /Components/Shared/HelpWidget.razor.rz.scp.css */

.hw-widget[b-t2pmjtun9g] {
    position: fixed;
    right: 20px;
    bottom: var(--hw-bottom, 24px);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    /* smooth lift when footer scrolls into view */
    transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tighten corner gap on narrow phones */
@media (max-width: 575.98px) {
    .hw-widget[b-t2pmjtun9g] {
        right: 12px;
        bottom: 16px;
    }
}


.hw-fab[b-t2pmjtun9g] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px 0 14px;
    height: 42px;
    border-radius: 21px;
    border: none;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-shadow:
        0 4px 16px rgba(13, 110, 253, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.12);
    transition: background 0.15s, box-shadow 0.2s, transform 0.15s;
}

.hw-fab:hover[b-t2pmjtun9g] {
    background: #0b5ed7; /* fallback for Chrome < 111 */
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 88%, black);
    box-shadow:
        0 6px 22px rgba(13, 110, 253, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.hw-fab:active[b-t2pmjtun9g] {
    transform: translateY(0) scale(0.97);
}

.hw-fab--open[b-t2pmjtun9g] {
    background: var(--bs-secondary, #6c757d);
    box-shadow:
        0 4px 12px rgba(108, 117, 125, 0.25),
        0 2px 5px rgba(0, 0, 0, 0.08);
}

.hw-fab--open:hover[b-t2pmjtun9g] {
    background: #5c636a; /* fallback for Chrome < 111 */
    background: color-mix(in srgb, var(--bs-secondary, #6c757d) 85%, black);
    box-shadow:
        0 6px 18px rgba(108, 117, 125, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.10);
}

.hw-fab-icon[b-t2pmjtun9g] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.hw-fab-label[b-t2pmjtun9g] {
    line-height: 1;
    letter-spacing: 0.01em;
}

.hw-menu[b-t2pmjtun9g] {
    width: 272px;
    border-radius: 14px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.14),
        0 4px 12px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transform-origin: bottom right;
    animation: hw-menu-in-b-t2pmjtun9g 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes hw-menu-in-b-t2pmjtun9g {
    from { opacity: 0; transform: scale(0.88) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Gradient header ────────────────────────────────────── */

.hw-menu-header[b-t2pmjtun9g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(13, 110, 253, 0.08); /* fallback for Chrome < 111 */
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, transparent) 0%,
        color-mix(in srgb, var(--bs-primary, #0d6efd) 5%, transparent) 100%
    );
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.hw-menu-header-icon[b-t2pmjtun9g] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(13, 110, 253, 0.30);
}

.hw-menu-header-text[b-t2pmjtun9g] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hw-menu-header-title[b-t2pmjtun9g] {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
    line-height: 1.2;
}

.hw-menu-header-sub[b-t2pmjtun9g] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Items container ────────────────────────────────────── */

.hw-menu-items[b-t2pmjtun9g] {
    padding: 6px 0;
}

/* ── Individual item ────────────────────────────────────── */

.hw-item[b-t2pmjtun9g] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    background: transparent;
    color: var(--bs-body-color, #212529);
    cursor: pointer;
    text-align: left;
    transition: background 0.13s;
    overflow: hidden;
}

/* Left accent bar — slides in on hover */
.hw-item[b-t2pmjtun9g]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--bs-primary, #0d6efd);
    transform: scaleY(0);
    transition: transform 0.15s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.hw-item:hover[b-t2pmjtun9g] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.hw-item:hover[b-t2pmjtun9g]::before {
    transform: scaleY(1);
}

.hw-item:not(:last-child)[b-t2pmjtun9g] {
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.06));
}

/* Icon badge */
.hw-item-icon[b-t2pmjtun9g] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.hw-item:hover .hw-item-icon[b-t2pmjtun9g] {
    transform: scale(1.08);
}

.hw-item-icon--tour[b-t2pmjtun9g] {
    background: rgba(13, 110, 253, 0.14); /* fallback for Chrome < 111 */
    background: color-mix(in srgb, var(--bs-primary, #0d6efd) 14%, transparent);
    color: var(--bs-primary, #0d6efd);
}

.hw-item-icon--docs[b-t2pmjtun9g] {
    background: rgba(111, 66, 193, 0.14); /* fallback for Chrome < 111 */
    background: color-mix(in srgb, #6f42c1 14%, transparent);
    color: #6f42c1;
}

.hw-item-icon--support[b-t2pmjtun9g] {
    background: rgba(12, 166, 120, 0.14); /* fallback for Chrome < 111 */
    background: color-mix(in srgb, #0ca678 14%, transparent);
    color: #0ca678;
}

/* Text body */
.hw-item-body[b-t2pmjtun9g] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hw-item-row[b-t2pmjtun9g] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hw-item-label[b-t2pmjtun9g] {
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.2;
}

.hw-item-desc[b-t2pmjtun9g] {
    font-size: 0.72rem;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron / external-link arrow */
.hw-item-arrow[b-t2pmjtun9g] {
    font-size: 0.68rem;
    color: var(--bs-secondary-color, #6c757d);
    flex-shrink: 0;
    transition: transform 0.15s, color 0.13s;
}

.hw-item:hover .hw-item-arrow[b-t2pmjtun9g] {
    color: var(--bs-body-color, #212529);
    transform: translateX(2px);
}

/* ── Invisible backdrop ─────────────────────────────────── */

.hw-backdrop[b-t2pmjtun9g] {
    position: fixed;
    inset: 0;
    z-index: 1049;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 480px) {
    .hw-widget[b-t2pmjtun9g] {
        right: 16px;
    }

    .hw-menu[b-t2pmjtun9g] {
        width: calc(100vw - 32px);
    }
}

/* ── Page-readiness states ──────────────────────────────── */

.hw-widget--hidden[b-t2pmjtun9g] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}

.hw-item--disabled[b-t2pmjtun9g] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* /Components/Shared/ProductTour.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   ProductTour.razor.css  —  DecisionLens Brand Theme
   Scoped automatically by Blazor (no global CSS pollution).
   Uses --brand-* CSS variables from site.css so the tour
   header matches the app navbar (standard-blue-header) exactly,
   and light/dark theming is automatic.
   ───────────────────────────────────────────────────────────── */

/* ─── Backdrop ──────────────────────────────────────────────── */
.tour-backdrop[b-f6cvyxeg7n] {
    position: fixed;
    inset: 0;
    z-index: 1095;
    background: transparent;
    pointer-events: none;
}

.tour-backdrop:has(.tour-popover--center):not(:has(.tour-spotlight))[b-f6cvyxeg7n] {
    background: rgba(0, 0, 0, 0.58);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}

/* ─── Spotlight ─────────────────────────────────────────────── */
.tour-spotlight[b-f6cvyxeg7n] {
    position: fixed;
    border-radius: 10px;
    box-shadow:
        0 0 0 2px var(--brand-primary, #0c69b0),
        0 0 0 6px rgba(12, 105, 176, 0.18),
        0 0 0 9999px rgba(0, 0, 0, 0.62);
    transition:
        top    0.38s cubic-bezier(0.4, 0, 0.2, 1),
        left   0.38s cubic-bezier(0.4, 0, 0.2, 1),
        width  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1096;
}

/* ─── Beacon rings ──────────────────────────────────────────── */
.tour-beacon[b-f6cvyxeg7n] {
    position: fixed;
    z-index: 1096;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.tour-beacon-ring[b-f6cvyxeg7n] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--brand-blue-end, #3190d9);
    transform: translate(-50%, -50%);
    animation: tp-beacon-b-f6cvyxeg7n 2.8s ease-out infinite;
    opacity: 0;
}

.tour-beacon-ring--2[b-f6cvyxeg7n] { animation-delay: 0.7s; }

@keyframes tp-beacon-b-f6cvyxeg7n {
    0%   { width: 14px; height: 14px; opacity: 0.65; }
    100% { width: 56px; height: 56px; opacity: 0;    }
}

/* ═══════════════════════════════════════════════════════════
   POPOVER CARD — DecisionLens Brand Theme
   Header gradient mirrors the app navbar exactly.
   ═══════════════════════════════════════════════════════════ */

.tour-popover[b-f6cvyxeg7n] {
    position: fixed;
    z-index: 1097;
    width: 400px;
    max-width: calc(100vw - 20px);
    /* Cap height so the card never overflows the viewport on small screens or tall tables */
    max-height: calc(100vh - 24px);
    /* Flex column so the content area can scroll while header/footer stay fixed */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    background: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #111827);
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(12, 105, 176, 0.10),
        0 4px 6px  rgba(0, 0, 0, 0.05),
        0 12px 32px rgba(0, 0, 0, 0.13),
        0 32px 64px rgba(0, 0, 0, 0.08);
    animation: tp-card-enter-b-f6cvyxeg7n 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tp-card-enter-b-f6cvyxeg7n {
    from { opacity: 0; transform: scale(0.94) translateY(14px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Center placement: translate(-50%,-50%) must be preserved throughout
   the animation — otherwise the `both` fill mode overwrites it. */
.tour-popover--center[b-f6cvyxeg7n] {
    animation-name: tp-card-enter-center-b-f6cvyxeg7n;
}

@keyframes tp-card-enter-center-b-f6cvyxeg7n {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);    }
}

/* Smooth position transition when the spotlight moves between non-center steps.
   Excluded from center placement because that uses transform: translate(-50%,-50%)
   rather than absolute top/left coordinates. */
.tour-popover:not(.tour-popover--center)[b-f6cvyxeg7n] {
    transition:
        top  0.38s cubic-bezier(0.4, 0, 0.2, 1),
        left 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Gradient header band — same gradient as app navbar ────── */

.tp-header[b-f6cvyxeg7n] {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background: linear-gradient(
        135deg,
        var(--brand-blue-start, #002f6c)  0%,
        var(--brand-primary,    #0c69b0) 55%,
        var(--brand-blue-end,   #3190d9) 100%
    );
    color: #fff;
    overflow: hidden;
}

/* Decorative depth orbs */
.tp-header[b-f6cvyxeg7n]::before,
.tp-header[b-f6cvyxeg7n]::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.tp-header[b-f6cvyxeg7n]::before { width: 120px; height: 120px; right: -30px; top: -60px; }
.tp-header[b-f6cvyxeg7n]::after  { width:  64px; height:  64px; right:  52px; top: -24px; }

.tp-header-row[b-f6cvyxeg7n] {
    position: relative; /* above ::before/::after orbs */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px 16px;
}

/* Step-number chip — shows current step number at a glance */
.tp-header-icon[b-f6cvyxeg7n] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.26);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tp-step-num[b-f6cvyxeg7n] {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.02em;
}

.tp-header-info[b-f6cvyxeg7n] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tp-label[b-f6cvyxeg7n] {
    font-size: 0.61rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.68;
    line-height: 1;
}

.tp-step-count[b-f6cvyxeg7n] {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
}

.tp-close[b-f6cvyxeg7n] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.tp-close:hover[b-f6cvyxeg7n] {
    background: rgba(255, 255, 255, 0.24);
    color: #fff;
}

/* ─── Content — direction-aware slide animation ──────────────── */

.tp-content[b-f6cvyxeg7n] {
    padding: 20px 22px 14px;
    /* Allow long step content to scroll rather than push the card off screen */
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    animation: tp-slide-next-b-f6cvyxeg7n 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tp-content--prev[b-f6cvyxeg7n] {
    animation-name: tp-slide-prev-b-f6cvyxeg7n;
}

@keyframes tp-slide-next-b-f6cvyxeg7n {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes tp-slide-prev-b-f6cvyxeg7n {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0);     }
}

.tp-title[b-f6cvyxeg7n] {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
    word-break: break-word;
}

.tp-body[b-f6cvyxeg7n] {
    font-size: 0.875rem;
    line-height: 1.75;
    color: var(--bs-body-color, #212529);
}

.tp-body p[b-f6cvyxeg7n]             { margin-bottom: 0.5rem;  }
.tp-body p:last-child[b-f6cvyxeg7n]  { margin-bottom: 0;        }
.tp-body ul[b-f6cvyxeg7n],
.tp-body ol[b-f6cvyxeg7n]            { margin-bottom: 0.5rem; padding-left: 1.25rem; }
.tp-body li[b-f6cvyxeg7n]            { margin-bottom: 0.25rem; }
.tp-body strong[b-f6cvyxeg7n]        { color: var(--bs-body-color, #111827); font-weight: 600; }

/* ─── Footer ─────────────────────────────────────────────────── */

.tp-footer[b-f6cvyxeg7n] {
    border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    padding: 10px 18px 15px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 10px;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.015));
}

/* Step dots */
.tp-dots[b-f6cvyxeg7n] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tp-dot[b-f6cvyxeg7n] {
    height: 5px;
    width: 5px;
    border-radius: 99px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: var(--bs-border-color, #d1d5db);
    transition: width 0.24s ease, background 0.22s ease, transform 0.15s;
}

.tp-dot:hover:not(.is-active)[b-f6cvyxeg7n] {
    background: rgba(12, 105, 176, 0.45); /* fallback for Chrome < 111 */
    background: color-mix(in srgb, var(--brand-primary, #0c69b0) 55%, var(--bs-border-color, #d1d5db));
    transform: scale(1.5);
}

.tp-dot.is-done[b-f6cvyxeg7n] {
    background: rgba(12, 105, 176, 0.42); /* fallback for Chrome < 111 */
    background: color-mix(in srgb, var(--brand-primary, #0c69b0) 42%, transparent);
}

.tp-dot.is-active[b-f6cvyxeg7n] {
    width: 24px;
    background: var(--brand-primary, #0c69b0);
    cursor: default;
    animation: tp-dot-pulse-b-f6cvyxeg7n 2.4s ease-in-out infinite;
}

@keyframes tp-dot-pulse-b-f6cvyxeg7n {
    0%, 100% { box-shadow: 0 0 0 0   rgba(12, 105, 176, 0.45); }
    50%       { box-shadow: 0 0 0 4px rgba(12, 105, 176, 0);    }
}

/* Actions row */
.tp-actions[b-f6cvyxeg7n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tp-nav[b-f6cvyxeg7n] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Skip */
.tp-btn-skip[b-f6cvyxeg7n] {
    position: relative;
    background: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.38rem 0.9rem;
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    letter-spacing: 0.01em;
    overflow: hidden;
    transition:
        border-color 0.18s ease,
        color        0.18s ease,
        box-shadow   0.18s ease,
        transform    0.12s ease;
}

.tp-btn-skip i[b-f6cvyxeg7n] { font-size: 0.68rem; }

/* Ripple fill on hover */
.tp-btn-skip[b-f6cvyxeg7n]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bs-danger, #dc3545);
    opacity: 0;
    transition: opacity 0.18s ease;
    border-radius: inherit;
}

.tp-btn-skip:hover[b-f6cvyxeg7n] {
    border-color: var(--bs-danger, #dc3545);
    color: var(--bs-danger, #dc3545);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.10);
    transform: translateY(-1px);
}

.tp-btn-skip:hover[b-f6cvyxeg7n]::before {
    opacity: 0.06;
}

.tp-btn-skip:active[b-f6cvyxeg7n] {
    transform: scale(0.96) translateY(0);
    box-shadow: none;
}

/* Back */
.tp-btn-back[b-f6cvyxeg7n] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--bs-border-color, #e5e7eb);
    background: transparent;
    color: var(--bs-secondary-color, #6c757d);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s;
}

.tp-btn-back:hover[b-f6cvyxeg7n] {
    border-color: var(--brand-primary, #0c69b0);
    background: rgba(12, 105, 176, 0.07);
    color: var(--brand-primary, #0c69b0);
}

.tp-btn-back:active[b-f6cvyxeg7n] { transform: scale(0.91); }

/* Next */
.tp-btn-next[b-f6cvyxeg7n] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.48rem 1.1rem;
    border-radius: 9px;
    border: none;
    background: var(--bs-primary, #0c69b0);
    color: #fff;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
    box-shadow:
        0 1px 3px  rgba(12, 105, 176, 0.30),
        0 4px 12px rgba(12, 105, 176, 0.18);
}

.tp-btn-next:hover[b-f6cvyxeg7n] {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow:
        0 2px 6px  rgba(12, 105, 176, 0.38),
        0 8px 18px rgba(12, 105, 176, 0.22);
}

.tp-btn-next:active[b-f6cvyxeg7n] { transform: scale(0.95); opacity: 1; }

/* Done */
.tp-btn-done[b-f6cvyxeg7n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.48rem 1.1rem;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #059669, #16a34a);
    color: #fff;
    font-size: 0.83rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s, box-shadow 0.15s;
    box-shadow:
        0 1px 3px  rgba(22, 163, 74, 0.28),
        0 4px 12px rgba(22, 163, 74, 0.18);
}

.tp-btn-done:hover[b-f6cvyxeg7n] {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow:
        0 2px 6px  rgba(22, 163, 74, 0.34),
        0 8px 18px rgba(22, 163, 74, 0.22);
}

.tp-btn-done:active[b-f6cvyxeg7n] { transform: scale(0.95); opacity: 1; }

/* ─── Directional caret ──────────────────────────────────────── */

.tour-popover--bottom[b-f6cvyxeg7n]::before,
.tour-popover--top[b-f6cvyxeg7n]::before,
.tour-popover--left[b-f6cvyxeg7n]::before,
.tour-popover--right[b-f6cvyxeg7n]::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    z-index: -1;
}

/* Bottom: caret top-edge → matches header gradient start color */
.tour-popover--bottom[b-f6cvyxeg7n]::before {
    top: -5px;
    left: 50%;
    margin-left: -5px;
    background: var(--brand-blue-start, #002f6c);
    border: 1px solid transparent;
    border-right: none;
    border-bottom: none;
}

.tour-popover--top[b-f6cvyxeg7n]::before {
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-left: none;
    border-top: none;
}

.tour-popover--left[b-f6cvyxeg7n]::before {
    right: -5px;
    top: 20%;
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-top: none;
    border-left: none;
}

.tour-popover--right[b-f6cvyxeg7n]::before {
    left: -5px;
    top: 20%;
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-bottom: none;
    border-right: none;
}

.tour-popover--center[b-f6cvyxeg7n]::before { display: none; }

/* ─── Responsive ─────────────────────────────────────────────── */
/* Tablet / small laptop: keep full width but reduce popover to 340 px */
@media (max-width: 575px) {
    .tour-popover[b-f6cvyxeg7n] {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        border-radius: 14px;
        /* Ensure center-placed card is always fully on-screen */
        max-height: calc(100vh - 20px);
    }

    .tp-header-row[b-f6cvyxeg7n] { padding: 12px 12px 10px 14px; }
    .tp-content[b-f6cvyxeg7n]    { padding: 14px 16px 10px;       }
    .tp-footer[b-f6cvyxeg7n]     { padding: 8px 14px 12px;        }
    .tp-btn-skip[b-f6cvyxeg7n]   { font-size: 0.74rem; padding: 0.32rem 0.7rem; }
    .tp-btn-next[b-f6cvyxeg7n],
    .tp-btn-done[b-f6cvyxeg7n]   { font-size: 0.8rem;  padding: 0.4rem 0.9rem;  }
}
@media (max-width: 480px) {
    .tour-popover[b-f6cvyxeg7n] {
        width: calc(100vw - 16px);
        border-radius: 14px;
    }

    .tp-header-row[b-f6cvyxeg7n] { padding: 12px 12px 10px 14px; }
    .tp-content[b-f6cvyxeg7n]    { padding: 16px 18px 12px;       }
    .tp-footer[b-f6cvyxeg7n]     { padding: 10px 16px 14px;       }
}
/* /Components/Shared/TourWelcomeModal.razor.rz.scp.css */
/* Welcome modal — premium design with orbit animation.
   Uses Bootstrap CSS variables for auto-theming. */

.tour-welcome-backdrop[b-sz7y7x9bx8] {
    position: fixed;
    inset: 0;
    z-index: 1100; /* above tour popover (1097) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: tour-fade-in-b-sz7y7x9bx8 0.25s ease;
}

@keyframes tour-fade-in-b-sz7y7x9bx8 {
    from { opacity: 0; }
}

.tour-welcome-card[b-sz7y7x9bx8] {
    width: 440px;
    max-width: calc(100vw - 32px);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #111827);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 8px 24px rgba(0, 0, 0, 0.14),
        0 28px 56px rgba(0, 0, 0, 0.18);
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    animation: tour-welcome-pop-b-sz7y7x9bx8 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tour-welcome-pop-b-sz7y7x9bx8 {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
}

/* ─── Orbit animated icon ───────────────────────────────────── */
.tour-welcome-orbit[b-sz7y7x9bx8] {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-welcome-orbit-ring[b-sz7y7x9bx8] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed transparent;
}

.tour-welcome-orbit-ring--1[b-sz7y7x9bx8] {
    border-color: rgba(13, 110, 253, 0.40); /* fallback for Chrome < 111 */
    border-color: color-mix(in srgb, var(--bs-primary, #0d6efd), transparent 60%);
    animation: tour-orbit-spin-b-sz7y7x9bx8 8s linear infinite;
}

.tour-welcome-orbit-ring--2[b-sz7y7x9bx8] {
    inset: 8px;
    border-color: rgba(111, 66, 193, 0.30); /* fallback for Chrome < 111 */
    border-color: color-mix(in srgb, #6f42c1, transparent 70%);
    animation: tour-orbit-spin-b-sz7y7x9bx8 6s linear infinite reverse;
}

@keyframes tour-orbit-spin-b-sz7y7x9bx8 {
    to { transform: rotate(360deg); }
}

.tour-welcome-icon[b-sz7y7x9bx8] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(
        135deg,
        var(--brand-blue-start, #002f6c),
        var(--brand-primary,    #0c69b0)
    );
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(12, 105, 176, 0.35);
}

/* ─── Content ───────────────────────────────────────────────── */
.tour-welcome-title[b-sz7y7x9bx8] {
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 0.4rem;
}

.tour-welcome-text[b-sz7y7x9bx8] {
    color: var(--bs-secondary-color, #4b5563);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ─── Feature highlights ────────────────────────────────────── */
.tour-welcome-features[b-sz7y7x9bx8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--bs-tertiary-bg, rgba(0, 0, 0, 0.03));
    border-radius: 12px;
}

.tour-welcome-feature[b-sz7y7x9bx8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--bs-body-color, #212529);
}

.tour-welcome-feature i[b-sz7y7x9bx8] {
    color: var(--bs-primary, #0d6efd);
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
}

/* ─── Actions ───────────────────────────────────────────────── */
.tour-welcome-actions[b-sz7y7x9bx8] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.tour-welcome-btn-skip[b-sz7y7x9bx8] {
    background: none;
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-secondary-color, #6c757d);
    padding: 0.6rem 1.25rem;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.tour-welcome-btn-skip:hover[b-sz7y7x9bx8] {
    border-color: var(--bs-body-color, #212529);
    color: var(--bs-body-color, #212529);
}

.tour-welcome-btn-start[b-sz7y7x9bx8] {
    display: flex;
    align-items: center;
    background: linear-gradient(
        135deg,
        var(--brand-blue-start, #002f6c),
        var(--brand-primary,    #0c69b0)
    );
    border: none;
    color: #fff;
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow:
        0 3px 12px rgba(12, 105, 176, 0.32),
        0 6px 20px rgba(12, 105, 176, 0.18);
    transition: transform 0.15s, box-shadow 0.15s;
}

.tour-welcome-btn-start:hover[b-sz7y7x9bx8] {
    transform: translateY(-1px);
    box-shadow:
        0 5px 18px rgba(12, 105, 176, 0.40),
        0 8px 28px rgba(12, 105, 176, 0.22);
}
/* /Components/StrategyTable/ChoiceBox.razor.rz.scp.css */
.context-menu-backdrop[b-45zawxbrjz] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: transparent;
}

.choice-box[b-45zawxbrjz] {
    position: relative;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}

.choice-delete-icon[b-45zawxbrjz] {
    position: absolute;
    top: 2px;
    right: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #dc3545;
    font-size: 16px;
    padding: 0;
    z-index: 10;
    pointer-events: auto !important;
    visibility: hidden; /* Hide by default */
    opacity: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    transition-delay: 0s;
}

.choice-box.tooltip-open .choice-delete-icon[b-45zawxbrjz] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition-delay: 0s;
}

.choice-box.choice-context-highlight .choice-delete-icon[b-45zawxbrjz] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition-delay: 0s;
}

.choice-box:hover .choice-delete-icon[b-45zawxbrjz] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.25s;
}

.choice-delete-icon:hover[b-45zawxbrjz] {
    color: #c82333;
    transform: scale(1.1);
}

.selection-highlight[b-45zawxbrjz] {
    border-radius: 6px;
    transition: background-color 0.18s ease, transform 0.12s ease, border 0.12s ease;
}

.choice-box.selection-highlight[b-45zawxbrjz],
.choice-box.click-highlight[b-45zawxbrjz] {
    background-color: #fff3cd !important;
    color: #000 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) inset;
    box-sizing: border-box;
    border-radius: 6px;
}

/* Dark mode */
[data-bs-theme="dark"] .choice-box.selection-highlight[b-45zawxbrjz],
[data-bs-theme="dark"] .choice-box.click-highlight[b-45zawxbrjz],
[data-bs-theme="dark"] .strategy-selection-mode .choice-box.selection-highlight[b-45zawxbrjz],
[data-bs-theme="dark"] .strategy-selection-mode .choice-box.click-highlight[b-45zawxbrjz] {
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.choice-box[draggable="true"]:active[b-45zawxbrjz] {
    cursor: grabbing;
}

.choice-box[draggable="true"] .editable[b-45zawxbrjz] {
    cursor: text;
    text-align: center;
    padding: 8px;
}

/* Excel-style green corner triangle for comments */
.choice-comment-triangle[b-45zawxbrjz] {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #28a745 transparent transparent;
    border-radius: 2px;
    cursor: pointer;
    z-index: 5;
    transition: border-color 0.2s ease-in-out, opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

/* Dark mode styling for comment triangle */
[data-bs-theme="dark"] .choice-comment-triangle[b-45zawxbrjz] {
    border-color: transparent #51cf66 transparent transparent;
}

    [data-bs-theme="dark"] .choice-comment-triangle:hover[b-45zawxbrjz] {
        border-color: transparent #69db7c transparent transparent;
    }

.choice-input[b-45zawxbrjz] {
    border: none;
    outline: 2px solid #007acc;
    background: #fff;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
}
/* /Components/StrategyTable/ChoiceContextMenu.razor.rz.scp.css */
.em-c-avatar[b-g7ipt4dmcy] {
    margin-left: 0px !important;
}

.comment-item[b-g7ipt4dmcy] {
    padding: 0.5rem 0;
    width: 100%;
}

.comment-header[b-g7ipt4dmcy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-avatar[b-g7ipt4dmcy] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    background-color: #0071c1;
    color: #fff;
}

.comment-avatar--other[b-g7ipt4dmcy] {
    background-color: #e4e4e4 !important;
    color: #000 !important;
}

.comment-meta[b-g7ipt4dmcy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
}

.comment-author[b-g7ipt4dmcy] {
    font-weight: 500;
    white-space: nowrap;
}

.comment-time[b-g7ipt4dmcy] {
    white-space: nowrap;
    opacity: 0.8;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-actions[b-g7ipt4dmcy] {
    flex: 0 0 auto;
    margin-left: 0.5rem;
}

.comment-body[b-g7ipt4dmcy] {
    margin-top: 0.375rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.comment-text[b-g7ipt4dmcy] {
    color: #222;
    line-height: 1.4;
}

.comment-body .error-message[b-g7ipt4dmcy] {
    white-space: normal;
}

.rationale-textbox[b-g7ipt4dmcy],
.comment-textbox[b-g7ipt4dmcy],
.comment-edit-textbox[b-g7ipt4dmcy] {
    margin: 0;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    background: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
    box-sizing: border-box;
    resize: vertical;
    min-height: 60px;
    color: #212529;
}

.edit-comment-actions[b-g7ipt4dmcy] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0;
    padding-top: 0;
}

.link-previous-comments[b-g7ipt4dmcy] {
    background: none;
    border: none;
    color: #007bff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    text-decoration: underline;
}

.rationale-textbox[b-g7ipt4dmcy],
.comment-textbox[b-g7ipt4dmcy],
.comment-edit-textbox[b-g7ipt4dmcy] {
    font-size: 0.9rem;
}

.edit-comment-wrapper[b-g7ipt4dmcy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-edit-textbox.input-error[b-g7ipt4dmcy] {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15);
}

/* comment list scroll container */
.comment-list-wrapper[b-g7ipt4dmcy] {
    max-height: 390px;
    overflow-y: auto;
    padding-right: 6px;
    padding-bottom: 12px;
}

    .comment-list-wrapper[b-g7ipt4dmcy]::-webkit-scrollbar {
        width: 8px;
    }

    .comment-list-wrapper[b-g7ipt4dmcy]::-webkit-scrollbar-track {
        background: transparent;
    }

    .comment-list-wrapper[b-g7ipt4dmcy]::-webkit-scrollbar-thumb {
        background-color: #d3d3d3;
        border-radius: 6px;
    }

        .comment-list-wrapper[b-g7ipt4dmcy]::-webkit-scrollbar-thumb:hover {
            background-color: #c0c0c0;
        }

.comment-list-wrapper[b-g7ipt4dmcy] {
    scrollbar-width: thin;
    scrollbar-color: #d3d3d3 transparent;
}
 
.status-history-container[b-g7ipt4dmcy] {
    margin-top: 12px;
}
 
.status-history-scroll[b-g7ipt4dmcy] {
    max-height: 300px;
    overflow-y: auto;
}
/* /Components/StrategyTable/GroupHeader.razor.rz.scp.css */
.group-header[b-4gk53aq74b] {
    font-size: 16px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.group-header-label[b-4gk53aq74b] {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    cursor: text;
    padding: 2px 4px;
}

.group-header-input[b-4gk53aq74b] {
    border: none;
    outline: none;
    background: #fff;
    padding: 2px 5px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    border-radius: 2px;
}

    .group-header-input:focus[b-4gk53aq74b] {
        outline: none;
    }
/* /Components/StrategyTable/PendingChangesNotification.razor.rz.scp.css */
/* ============================================================================
   Pending Changes Bar — compact inline indicator matching strategy circles
   ============================================================================ */

.pending-changes-bar[b-limtc3md8c] {
    display: flex;
    align-items: center;
    gap: 6px;
    animation: slideUp-b-limtc3md8c 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp-b-limtc3md8c {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Clickable pill — circle + label, styled like strategy association indicators */
.pending-changes-indicator[b-limtc3md8c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #d1d5db);
    border-radius: 999px;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    user-select: none;
}

    .pending-changes-indicator:hover[b-limtc3md8c] {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
        background: var(--bs-secondary-bg, #f3f4f6);
    }

    .pending-changes-indicator:active[b-limtc3md8c] {
        transform: translateY(0);
    }

/* Count circle — matches header right-side gradient color */
.pending-circle[b-limtc3md8c] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background: var(--brand-blue-end, #3190d9);
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(49, 144, 217, 0.3);
}

/* Label text */
.pending-label[b-limtc3md8c] {
    font-size: 13px;
    color: var(--bs-body-color, #1f2937);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

    .pending-label strong[b-limtc3md8c] {
        text-decoration: underline;
        text-underline-offset: 2px;
        font-weight: 600;
    }

/* Dismiss ✕ — small ghost button */
.pending-dismiss[b-limtc3md8c] {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--bs-secondary-color, #6b7280);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

    .pending-dismiss:hover[b-limtc3md8c] {
        background: rgba(0, 0, 0, 0.1);
        color: var(--bs-body-color, #111827);
    }

/* Spinner inside label */
.spinner[b-limtc3md8c] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-limtc3md8c 0.7s linear infinite;
}

@keyframes spin-b-limtc3md8c {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive — full-width on mobile (overrides the wrapper's inline style) */
@media (max-width: 768px) {
    .notification-stack[b-limtc3md8c] {
        bottom: 12px !important;
        right: 12px !important;
        left: 12px !important;
        align-items: stretch;
    }

    .pending-changes-bar[b-limtc3md8c] {
        flex: 1;
        justify-content: center;
    }

    .conflict-warning-toast[b-limtc3md8c] {
        max-width: none;
    }
}

/* Accessibility: Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .pending-changes-bar[b-limtc3md8c] {
        animation: none;
    }

    .spinner[b-limtc3md8c] {
        animation: none;
    }
}

/* ============================================================================
   Conflict Warning Toast — shown when user starts editing with pending changes
   ============================================================================ */

.conflict-warning-toast[b-limtc3md8c] {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    padding: 10px 14px;
    background: #3d2900;
    border: 1px solid #f59e0b;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    animation: slideUp-b-limtc3md8c 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.conflict-warning-icon[b-limtc3md8c] {
    font-size: 16px;
    flex-shrink: 0;
    line-height: 1;
}

.conflict-warning-text[b-limtc3md8c] {
    font-size: 13px;
    color: #fde68a;
    line-height: 1.4;
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .conflict-warning-toast[b-limtc3md8c] {
        animation: none;
    }
}

/* ============================================================================
   Remote Changes Side Panel
   ============================================================================ */

.pending-panel-overlay[b-limtc3md8c] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(3px);
    z-index: 1090;
    transition: background 0.2s ease;
}

.pending-side-panel[b-limtc3md8c] {
    position: fixed;
    top: 24px;
    right: 24px;
    width: min(480px, calc(100vw - 48px));
    height: calc(100vh - 48px);
    background: var(--bs-body-bg, #ffffff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    color: var(--bs-body-color, #111827);
    animation: slidePanelIn-b-limtc3md8c 0.22s ease-out;
    overflow: hidden;
}

@keyframes slidePanelIn-b-limtc3md8c {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.pending-panel-header[b-limtc3md8c] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
    background: var(--bs-secondary-bg, #f8fafc);
}

.pending-panel-title[b-limtc3md8c] {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bs-body-color, #111827);
    letter-spacing: -0.01em;
}

.pending-panel-subtitle[b-limtc3md8c] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--bs-secondary-color, #6b7280);
    line-height: 1.4;
    font-weight: 500;
}

.pending-panel-close[b-limtc3md8c] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: var(--bs-tertiary-bg, #eef2f7);
    color: var(--bs-secondary-color, #374151);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

    .pending-panel-close:hover[b-limtc3md8c] {
        background: var(--bs-border-color, #e5e7eb);
        color: var(--bs-body-color, #111827);
    }

.pending-panel-content[b-limtc3md8c] {
    flex: 1;
    overflow: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bs-body-bg, #ffffff);
}

.pending-panel-status[b-limtc3md8c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
    color: #2563eb;
    font-size: 12px;
    font-weight: 500;
    background: var(--bs-secondary-bg, #f8fafc);
}

.pending-status-dot[b-limtc3md8c] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
    flex-shrink: 0;
}

.pending-empty[b-limtc3md8c] {
    color: var(--bs-secondary-color, #6b7280);
    font-size: 13px;
    text-align: center;
    padding: 32px 16px;
}

.pending-change-item[b-limtc3md8c] {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 10px;
    padding: 12px;
    background: var(--bs-body-bg, #ffffff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .pending-change-item:hover[b-limtc3md8c] {
        border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

.pending-change-top[b-limtc3md8c] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.pending-change-avatar[b-limtc3md8c] {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #082f49;
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 100%);
    box-shadow: 0 2px 4px rgba(56, 189, 248, 0.3);
    flex-shrink: 0;
}

.pending-change-titleblock[b-limtc3md8c] {
    min-width: 0;
    flex: 1;
}

.pending-change-main[b-limtc3md8c] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--bs-body-color, #111827);
    font-weight: 500;
    word-break: break-word;
}

.pending-change-meta[b-limtc3md8c] {
    margin-top: 4px;
    font-size: 11px;
    color: var(--bs-secondary-color, #9ca3af);
    font-weight: 400;
}

.pending-change-diff[b-limtc3md8c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bs-secondary-bg, #f8fafc);
    border: 1px solid var(--bs-border-color, #e5e7eb);
}

.pending-diff-label[b-limtc3md8c] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color, #6b7280);
}

.pending-diff-value[b-limtc3md8c] {
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-body-color, #111827);
    word-break: break-word;
    background: rgba(0, 0, 0, 0.02);
    padding: 2px 6px;
    border-radius: 4px;
}

.pending-diff-arrow[b-limtc3md8c] {
    color: var(--bs-secondary-color, #94a3b8);
    font-weight: 700;
    margin: 0 2px;
}

.pending-change-tags[b-limtc3md8c] {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.pending-tag[b-limtc3md8c] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: all 0.15s ease;
}

.pending-tag--entity[b-limtc3md8c] {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.pending-tag--insert[b-limtc3md8c] {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.pending-tag--update[b-limtc3md8c] {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.pending-tag--delete[b-limtc3md8c] {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.pending-refresh-error[b-limtc3md8c] {
    width: 100%;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 500;
}

.pending-panel-footer[b-limtc3md8c] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--bs-border-color, #e5e7eb);
    background: var(--bs-secondary-bg, #f8fafc);
}

.pending-panel-secondary[b-limtc3md8c],
.pending-panel-primary[b-limtc3md8c] {
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.pending-panel-secondary[b-limtc3md8c] {
    background: var(--bs-body-bg, #ffffff);
    border-color: var(--bs-border-color, #d1d5db);
    color: var(--bs-body-color, #374151);
}

    .pending-panel-secondary:hover[b-limtc3md8c] {
        background: var(--bs-secondary-bg, #f3f4f6);
        border-color: var(--bs-border-color-translucent, #9ca3af);
    }

.pending-panel-primary[b-limtc3md8c] {
    background: #2563eb;
    color: #ffffff;
    font-weight: 700;
}

    .pending-panel-primary:hover[b-limtc3md8c] {
        background: #1d4ed8;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
    }

    .pending-panel-primary:active[b-limtc3md8c] {
        transform: scale(0.98);
    }

    .pending-panel-primary:disabled[b-limtc3md8c] {
        opacity: 0.6;
        cursor: not-allowed;
        background: #9ca3af;
    }

@media (max-width: 768px) {
    .pending-side-panel[b-limtc3md8c] {
        top: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        height: calc(100vh - 24px);
        border-radius: 12px;
    }

    .pending-panel-footer[b-limtc3md8c] {
        flex-direction: column-reverse;
    }

    .pending-panel-secondary[b-limtc3md8c],
    .pending-panel-primary[b-limtc3md8c] {
        flex: 1;
        padding: 8px 12px;
    }
}

/* ============================================================================
   DARK MODE SUPPORT — responsive to [data-bs-theme="dark"]
   ============================================================================ */

[data-bs-theme="dark"] .pending-panel-overlay[b-limtc3md8c] {
    background: rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .pending-side-panel[b-limtc3md8c] {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .pending-panel-header[b-limtc3md8c],
[data-bs-theme="dark"] .pending-panel-status[b-limtc3md8c],
[data-bs-theme="dark"] .pending-panel-footer[b-limtc3md8c] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .pending-panel-title[b-limtc3md8c] {
    color: #f1f5f9;
    font-weight: 700;
}

[data-bs-theme="dark"] .pending-panel-subtitle[b-limtc3md8c],
[data-bs-theme="dark"] .pending-change-meta[b-limtc3md8c],
[data-bs-theme="dark"] .pending-empty[b-limtc3md8c] {
    color: #94a3b8;
}

[data-bs-theme="dark"] .pending-change-main[b-limtc3md8c] {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .pending-panel-close[b-limtc3md8c],
[data-bs-theme="dark"] .pending-panel-secondary[b-limtc3md8c] {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

    [data-bs-theme="dark"] .pending-panel-close:hover[b-limtc3md8c],
    [data-bs-theme="dark"] .pending-panel-secondary:hover[b-limtc3md8c] {
        background: #334155;
        color: #f1f5f9;
    }

[data-bs-theme="dark"] .pending-change-item[b-limtc3md8c],
[data-bs-theme="dark"] .pending-change-diff[b-limtc3md8c] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
}

    [data-bs-theme="dark"] .pending-change-item:hover[b-limtc3md8c] {
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

[data-bs-theme="dark"] .pending-change-diff[b-limtc3md8c] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .pending-diff-label[b-limtc3md8c],
[data-bs-theme="dark"] .pending-diff-arrow[b-limtc3md8c] {
    color: #94a3b8;
}

[data-bs-theme="dark"] .pending-diff-value[b-limtc3md8c] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .pending-change-avatar[b-limtc3md8c] {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    color: #082f49;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.3);
}

[data-bs-theme="dark"] .pending-tag--entity[b-limtc3md8c] {
    color: #93c5fd;
    background: rgba(30, 144, 255, 0.15);
    border-color: rgba(93, 168, 255, 0.3);
}

[data-bs-theme="dark"] .pending-tag--insert[b-limtc3md8c] {
    color: #86efac;
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
}

[data-bs-theme="dark"] .pending-tag--update[b-limtc3md8c] {
    color: #fbbf24;
    background: rgba(251, 146, 60, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-bs-theme="dark"] .pending-tag--delete[b-limtc3md8c] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
}

[data-bs-theme="dark"] .pending-refresh-error[b-limtc3md8c] {
    background: rgba(127, 29, 29, 0.2);
    border-color: rgba(248, 113, 113, 0.3);
    color: #fca5a5;
}

[data-bs-theme="dark"] .pending-panel-primary[b-limtc3md8c] {
    background: #3b82f6;
}

    [data-bs-theme="dark"] .pending-panel-primary:hover[b-limtc3md8c] {
        background: #2563eb;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }

[data-bs-theme="dark"] .pending-changes-indicator[b-limtc3md8c] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

    [data-bs-theme="dark"] .pending-changes-indicator:hover[b-limtc3md8c] {
        background: #334155;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }

[data-bs-theme="dark"] .pending-label[b-limtc3md8c] {
    color: #e2e8f0;
}

[data-bs-theme="dark"] .pending-dismiss[b-limtc3md8c] {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
}

    [data-bs-theme="dark"] .pending-dismiss:hover[b-limtc3md8c] {
        background: rgba(255, 255, 255, 0.15);
        color: #cbd5e1;
    }
/* /Components/StrategyTable/StrategyCircles.razor.rz.scp.css */
.circle[b-e0jo73d90m] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}

.chip-wrapper[b-e0jo73d90m] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.circle .chip[b-e0jo73d90m] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    user-select: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer !important;
}

.chip-pulse[b-e0jo73d90m] {
    animation: chipPulse 1s ease-in-out infinite;
    transform-origin: center center;
}

@@keyframes chipPulse {
    0%[b-e0jo73d90m] {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0,123,255,0.15);
    }

    50%[b-e0jo73d90m] {
        transform: scale(1.12);
        box-shadow: 0 0 10px 6px rgba(0,123,255,0.16);
    }

    100%[b-e0jo73d90m] {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0,123,255,0.00);
    }
}

.circle .plus-chip[b-e0jo73d90m] {
    background: #6c757d !important;
}

.chip-tooltip[b-e0jo73d90m] {
    display: none;
    background: rgba(240, 240, 240, 1);
    color: #000;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    white-space: normal;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

    .chip-tooltip.visible-tooltip[b-e0jo73d90m] {
        display: block !important;
    }

.tooltip-row[b-e0jo73d90m] {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
}

.tooltip-hidden-item[b-e0jo73d90m] {
    white-space: normal;
    padding: 6px 0;
}

.compact .chip-preview[b-e0jo73d90m] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    flex: 0 0 18px;
}

.tooltip-meta.compact[b-e0jo73d90m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.tooltip-number[b-e0jo73d90m] {
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}

.tooltip-hex[b-e0jo73d90m] {
    font-size: 12px;
}
/* /Components/StrategyTable/StrategyList.razor.rz.scp.css */
/* ============================================================================
   STRATEGY LIST COMPONENT STYLES
   All styles for the strategy list component consolidated here
   ============================================================================ */

/* Strategy table wrapper */
.strategy-table[b-1wgca5e8yz] {
    width: 100%;
}

    .strategy-table table[b-1wgca5e8yz] {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    /* .strategy-table thead {
    background-color: #f0f0f0;
} */

    .strategy-table th[b-1wgca5e8yz] {
        text-align: left;
        padding: 8px 10px;
        font-weight: normal;
        font-size: 14px;
        background-color: #f8f9fa;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

[data-bs-theme="dark"] .strategy-table th[b-1wgca5e8yz] {
    text-align: left;
    padding: 8px 10px;
    font-weight: normal;
    font-size: 14px;
    background-color: #2c3034;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.strategy-table td[b-1wgca5e8yz] {
    padding: 3px;
    /* color: #333; */
    font-size: 14px;
    border: none;
    position: relative;
    height: 100px;
}

/* Row number column */
.strategy-row-number[b-1wgca5e8yz] {
    width: 10px;
    min-width: 10px;
    max-width: 10px;
    text-align: center;
    color: #fff !important;
    font-weight: bold;
    font-size: 12px;
    vertical-align: middle;
    padding: 10px 2px;
    height: 100px;
}

/* Strategy column widths */
.strategy-name-cell[b-1wgca5e8yz] {
    vertical-align: middle;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}

/* Make editable spans show text cursor - match DecisionBox pattern */
.strategy-name-cell .editable[b-1wgca5e8yz] {
    cursor: text;
    display: inline-block;
    padding: 6px 10px;
    vertical-align: middle;
}

.strategy-objective-cell[b-1wgca5e8yz] {
    width: 175px;
    min-width: 175px;
    max-width: 175px;
}

.strategy-rationale-cell[b-1wgca5e8yz] {
    width: 175px;
    min-width: 175px;
    max-width: 175px;
}

/* Alternating row colors for columns 2-4 */
/* Light theme */
.strategy-table tbody tr:nth-child(odd) td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #ffffff; /* Bootstrap light theme table background */
}

.strategy-table tbody tr:nth-child(even) td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #f8f9fa; /* Bootstrap light theme table accent background */
}

/* Dark theme */
[data-bs-theme="dark"] .strategy-table tbody tr:nth-child(odd) td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #212529; /* Bootstrap dark theme table background */
}

[data-bs-theme="dark"] .strategy-table tbody tr:nth-child(even) td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #2c3034; /* Bootstrap dark theme table accent background */
}

/* Editable text styling */
.strategy-name[b-1wgca5e8yz],
.strategy-objective[b-1wgca5e8yz],
.strategy-rationale[b-1wgca5e8yz] {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 4px;
    border-radius: 3px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.strategy-objective[b-1wgca5e8yz],
.strategy-rationale[b-1wgca5e8yz] {
    cursor: pointer;
    overflow: hidden;
    padding: 2px 4px;
    border-radius: 3px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    width: 100%;
    max-width: 155px;
    box-sizing: border-box;
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    max-height: 100px;
}

.strategy-name[b-1wgca5e8yz] {
    max-width: 130px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.strategy-name:focus[b-1wgca5e8yz],
.strategy-objective:focus[b-1wgca5e8yz],
.strategy-rationale:focus[b-1wgca5e8yz] {
    outline: 2px solid #007acc;
    background: #fff;
    white-space: normal;
    overflow: visible;
}

/* Name: scrollable in edit mode */
.strategy-name:focus[b-1wgca5e8yz] {
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    text-overflow: clip;
}

/* Objective & rationale: undo clamp + scrollable in edit mode */
.strategy-objective:focus[b-1wgca5e8yz],
.strategy-rationale:focus[b-1wgca5e8yz] {
    display: block;
    -webkit-line-clamp: unset;
    overflow-y: auto;
    overflow-x: hidden;
}

    /* Menu styling */
    .strategy-menu[b-1wgca5e8yz] {
    position: absolute;
    top: 5px;
    right: 15px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    /* background: #fff; */
    padding: 2px 5px;
    font-size: 12px;
    z-index: 10;
}

.strategy-table tbody tr:hover .strategy-menu[b-1wgca5e8yz] {
    opacity: 1;
}

/* .strategy-menu:hover {
    background: #f0f0f0;
} */

.strategy-menu-dropdown[b-1wgca5e8yz] {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    min-width: 180px;
    display: none;
}

    .strategy-menu-dropdown.show[b-1wgca5e8yz] {
        display: block;
    }

.strategy-menu-item[b-1wgca5e8yz] {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
}

    .strategy-menu-item:last-child[b-1wgca5e8yz] {
        border-bottom: none;
    }

    .strategy-menu-item:hover[b-1wgca5e8yz] {
        background: #f0f0f0;
    }

/* Editable strategy text elements */
.editable-strategy[b-1wgca5e8yz] {
    min-height: 20px;
    max-height: 78px;
    display: block;
    padding: 4px;
    border-radius: 2px;
    transition: background-color 0.2s;
    cursor: text;
}

.editable-strategy:focus[b-1wgca5e8yz] {
    outline: none;
}

.editable-strategy.strategy-objective[b-1wgca5e8yz],
.editable-strategy.strategy-rationale[b-1wgca5e8yz] {
    display: -webkit-box;
}

.editable-strategy.strategy-objective[contenteditable="true"][b-1wgca5e8yz],
.editable-strategy.strategy-rationale[contenteditable="true"][b-1wgca5e8yz] {
    display: block;
    -webkit-line-clamp: unset;
}


.editable-strategy[contenteditable="true"][b-1wgca5e8yz] {
    background-color: #fff;
    outline: 2px solid #007acc;
    cursor: text;
}

.strategy-objective[b-1wgca5e8yz],
.strategy-rationale[b-1wgca5e8yz] {
    color: #000;
    font-style: italic;
}

.strategy-objective:empty[b-1wgca5e8yz]:before,
.strategy-rationale:empty[b-1wgca5e8yz]:before {
    content: 'Double-click to add...';
    color: #999;
}

/* Strategy row drag-drop and interaction styles */
.strategy-row[b-1wgca5e8yz] {
    transition: background-color 0.2s ease, opacity 0.2s ease;
    cursor: grab !important; /* Hand cursor for drag and drop */
    user-select: none; /* Prevent text selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .strategy-row:active[b-1wgca5e8yz] {
        cursor: grabbing !important; /* Closed hand when actively dragging */
    }

    .strategy-row.dragging[b-1wgca5e8yz] {
        opacity: 0.4;
    }

    /* Hover state - lighter highlight */
    .strategy-row:hover td:not(.strategy-row-number)[b-1wgca5e8yz] {
        background-color: #f5f5f5 !important; /* Light mode hover color */
    }

[data-bs-theme="dark"] .strategy-row:hover td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #343a40 !important; /* Dark mode hover color */
}

/* Active/selected state - stronger highlight */
.strategy-row.em-is-active td:not(.strategy-row-number)[b-1wgca5e8yz] {
    /*background-color: #e3f2fd !important;  Light mode active color */
    background-color: #fff3cd !important;
}

[data-bs-theme="dark"] .strategy-row.em-is-active td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #495057 !important; /* Dark mode active color */
}

/* Active row takes precedence over hover */
.strategy-row.em-is-active:hover td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #e3f2fd !important; /* Light mode active hover color */
}

[data-bs-theme="dark"] .strategy-row.em-is-active:hover td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #495057 !important; /* Dark mode active hover color */
}

/* Selection mode active row - even stronger highlight */
.strategy-row.selection-active td:not(.strategy-row-number)[b-1wgca5e8yz] {
    background-color: #fff3cd !important;
}

[data-bs-theme="dark"] .strategy-row.selection-active td:not(.strategy-row-number)[b-1wgca5e8yz] {    
    background-color: #495057 !important;
}

/* Selection mode banner */
.selection-mode-banner[b-1wgca5e8yz] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* color: black; */
    padding: 12px 20px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    animation: slideUp-b-1wgca5e8yz 0.3s ease-out;
}

@keyframes slideUp-b-1wgca5e8yz {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.selection-mode-content[b-1wgca5e8yz] {
    display: flex;
    align-items: center;
   /* justify-content: space-between;
    max-width: 1400px;*/
    margin: 0 auto;
}

.selection-mode-info[b-1wgca5e8yz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.strategy-circle-indicator[b-1wgca5e8yz] {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.selection-mode-text[b-1wgca5e8yz] {
    font-size: 14px;
} 

.display-hidden-toggle[b-1wgca5e8yz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .display-hidden-toggle label[b-1wgca5e8yz] {
        font-size: 14px;
        margin: 0;
    }

    .display-hidden-toggle[b-1wgca5e8yz]  .e-switch-wrapper {
        width: 40px !important;
        height: 20px !important;
    }

        .display-hidden-toggle[b-1wgca5e8yz]  .e-switch-wrapper .e-switch-inner,
        .display-hidden-toggle[b-1wgca5e8yz]  .e-switch-wrapper .e-switch-off {
            height: 20px !important;
            border-radius: 10px !important;
        }

        .display-hidden-toggle[b-1wgca5e8yz]  .e-switch-wrapper .e-switch-handle {
            width: 14px !important;
            height: 14px !important;
        }
 
    .display-hidden-toggle.has-hidden label[b-1wgca5e8yz] {
        font-weight: 600;
        color: #1a73e8;
    }

/* Wrapper keeps counter snug below the input without affecting row height */
.name-input-wrapper[b-1wgca5e8yz] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Live character counter — right-aligned, small, muted */
.name-char-counter[b-1wgca5e8yz] {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    line-height: 1;
    margin-top: 2px;
}

    .name-char-counter.at-limit[b-1wgca5e8yz] {
        color: #dc3545;
        font-weight: 600;
    }
/* /Pages/AboutPage.razor.rz.scp.css */
/* ── Page ── */
.about-page[b-vt3zxikdxa] {
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── Hero ── */
.about-hero[b-vt3zxikdxa] {
    padding: 2.5rem 2rem;
    border-radius: 16px;
    background: linear-gradient(45deg, var(--brand-blue-start, #002f6c), var(--brand-blue-end, #3190d9));
}

.about-hero-eyebrow[b-vt3zxikdxa] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.75rem;
}

.about-hero-title[b-vt3zxikdxa] {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.about-hero-desc[b-vt3zxikdxa] {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    max-width: 520px;
}

/* ── Feature cards ── */
.about-features-grid[b-vt3zxikdxa] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.about-feature-card[b-vt3zxikdxa] {
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.about-feature-card:hover[b-vt3zxikdxa] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
}

.about-feature-icon[b-vt3zxikdxa] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* ── Contact cards ── */
.about-contacts-grid[b-vt3zxikdxa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.about-contact-card[b-vt3zxikdxa] {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.about-contact-card:hover[b-vt3zxikdxa] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.about-contact-photo[b-vt3zxikdxa] {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border: 3px solid var(--bs-border-color);
}

.about-contact-name[b-vt3zxikdxa] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-body-color);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.about-contact-role[b-vt3zxikdxa] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-body-color);
    margin-bottom: 0.35rem;
}

.about-contact-dept[b-vt3zxikdxa] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.about-contact-actions[b-vt3zxikdxa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 8px;
    padding: 0.9rem 1.1rem 1.1rem;
    border-top: 1px solid var(--bs-border-color);
}

.about-contact-btn[b-vt3zxikdxa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.14s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
}

.about-contact-btn-primary[b-vt3zxikdxa] {
    background: var(--bs-primary);
    color: #fff;
}

.about-contact-btn-primary:hover[b-vt3zxikdxa] {
    background: #0a5c9d;
    color: #fff;
}

.about-contact-btn-secondary[b-vt3zxikdxa] {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}

.about-contact-btn-secondary:hover[b-vt3zxikdxa] {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .about-contacts-grid[b-vt3zxikdxa],
    .about-features-grid[b-vt3zxikdxa] {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 701px) and (max-width: 900px) {
    .about-contacts-grid[b-vt3zxikdxa] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/AdminDashboard.razor.rz.scp.css */
/* =====================================================================
   Admin Dashboard — scoped styles
   Independent design-token system (light + dark) plus a responsive
   CSS Grid layout for the dashboard. No dependency on legacy global
   CSS beyond the app's shared font family.
   ===================================================================== */

/* ── Design tokens ─────────────────────────────────────────────────── */
.admin-dashboard-wrapper[b-81grdhgp8n] {
    /* Typography */
    --ad-font-family: "EMprintRegular", "HelveticaNeue", "Helvetica", "Arial", sans-serif;

    /* Surfaces (light) */
    --ad-bg-canvas: #eef1f6;
    --ad-bg-surface: #ffffff;
    --ad-bg-surface-alt: #f5f7fa;
    --ad-border: #dfe3ea;
    --ad-border-strong: #c2c9d6;
    --ad-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px -4px rgba(15, 23, 42, .08);
    --ad-shimmer-sheen: rgba(255, 255, 255, 0.75);

    /* Text (light) */
    --ad-text-primary: #161a23;
    --ad-text-secondary: #545d6b;
    --ad-text-tertiary: #8891a0;

    /* Interaction */
    --ad-focus-ring: #2f6fed;
    --ad-radius-lg: 14px;
    --ad-radius-md: 10px;
    --ad-radius-sm: 6px;

    /* Layout — caps content width on very large/ultra-wide screens.
       1600px is a standard upper bound for data-dense dashboards
       (wider than Bootstrap's 1320px text-container max, since charts
       and grids benefit from more room than reading-focused content). */
    --ad-content-max-width: 1600px;

    /* Semantic status — meets WCAG AA (>=4.5:1) on --ad-bg-surface */
    --ad-positive: #0f7a3d;
    --ad-negative: #c22a3e;
    --ad-warning: #b5590a;

    /* Accent palette — chart series / KPI accents (graphical, >=3:1) */
    --ad-accent-blue: #2f6fed;
    --ad-accent-green: #17a06b;
    --ad-accent-purple: #7c53e6;
    --ad-accent-orange: #e2711d;
    --ad-accent-red: #e0435a;
    --ad-accent-teal: #14b8a6;
    --ad-accent-indigo: #5b5bd6;
    --ad-accent-cyan: #0ea5c4;

    /* Accent text-safe variants — for small on-surface text (>=4.5:1) */
    --ad-accent-blue-text: #1d4fbb;
    --ad-accent-green-text: #0f7a3d;
    --ad-accent-purple-text: #6339c9;
    --ad-accent-orange-text: #b5590a;
    --ad-accent-red-text: #c22a3e;
    --ad-accent-teal-text: #0d8a7c;
    --ad-accent-indigo-text: #4340b0;
    --ad-accent-cyan-text: #0a7f96;

    /* Soft/calm icon-badge palette for KPI tiles — deliberately muted and
       kept independent from --ad-accent-* (which stays vivid for chart
       series, where stronger color separation aids readability). */
    --ad-soft-blue-bg: #e8f1fb;
    --ad-soft-blue-fg: #5c85b3;
    --ad-soft-green-bg: #e9f5ee;
    --ad-soft-green-fg: #5f9e78;
    --ad-soft-purple-bg: #f1ecf9;
    --ad-soft-purple-fg: #9077bd;
    --ad-soft-orange-bg: #faf0e2;
    --ad-soft-orange-fg: #c99a55;
    --ad-soft-red-bg: #f9ebec;
    --ad-soft-red-fg: #c17b84;
    --ad-soft-indigo-bg: #eceefa;
    --ad-soft-indigo-fg: #7b83c4;

    padding: 24px;
    font-family: var(--ad-font-family);
}

/* Canvas background spans the full viewport, but the actual content
   (header, KPIs, charts, grids) is capped and centered once the
   viewport exceeds --ad-content-max-width, so rows of cards don't
   stretch into unusably wide columns on large/ultra-wide monitors. */
.admin-dashboard-wrapper > *[b-81grdhgp8n] {
    max-width: var(--ad-content-max-width);
    margin-left: auto;
    margin-right: auto;
}

[data-bs-theme="dark"] .admin-dashboard-wrapper[b-81grdhgp8n] {
    --ad-bg-canvas: #10121a;
    --ad-bg-surface: #1b1e29;
    --ad-bg-surface-alt: #232734;
    --ad-border: #2d3140;
    --ad-border-strong: #3d4356;
    --ad-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -6px rgba(0, 0, 0, .55);
    --ad-shimmer-sheen: rgba(255, 255, 255, 0.07);

    --ad-text-primary: #f1f3f8;
    --ad-text-secondary: #aab1c2;
    --ad-text-tertiary: #7d8496;

    --ad-focus-ring: #7db0ff;

    --ad-positive: #3ddc84;
    --ad-negative: #ff6b7d;
    --ad-warning: #ffb04c;

    --ad-accent-blue: #5b93ff;
    --ad-accent-green: #33d996;
    --ad-accent-purple: #a68bff;
    --ad-accent-orange: #ff9d4d;
    --ad-accent-red: #ff7285;
    --ad-accent-teal: #3fe0cd;
    --ad-accent-indigo: #9593ff;
    --ad-accent-cyan: #4bd0ee;

    --ad-accent-blue-text: #9db8ff;
    --ad-accent-green-text: #5be3a8;
    --ad-accent-purple-text: #c1adff;
    --ad-accent-orange-text: #ffb578;
    --ad-accent-red-text: #ff96a3;
    --ad-accent-teal-text: #6de8d8;
    --ad-accent-indigo-text: #b6b4ff;
    --ad-accent-cyan-text: #79ddf5;

    --ad-soft-blue-bg: #202c3a;
    --ad-soft-blue-fg: #8fb3da;
    --ad-soft-green-bg: #1f2b25;
    --ad-soft-green-fg: #8ecca3;
    --ad-soft-purple-bg: #282234;
    --ad-soft-purple-fg: #bda8e0;
    --ad-soft-orange-bg: #332a1e;
    --ad-soft-orange-fg: #e0bc7c;
    --ad-soft-red-bg: #332226;
    --ad-soft-red-fg: #e0a3ab;
    --ad-soft-indigo-bg: #26283f;
    --ad-soft-indigo-fg: #a9b0e8;
}

/* ── Force site font + tokens into Syncfusion internals ───────────── */
/* Syncfusion's Bootstrap5/Bootstrap5-dark theme renders its own font
   and colors by default. These ::deep rules pierce Blazor's CSS
   isolation so the dashboard's font + tokens apply consistently inside
   chart SVG text, grid cells, and tooltip/legend markup.             */
[b-81grdhgp8n] .e-control,
[b-81grdhgp8n] .e-grid,
[b-81grdhgp8n] .e-grid .e-rowcell,
[b-81grdhgp8n] .e-grid .e-headercell,
[b-81grdhgp8n] .e-grid .e-headercelldiv,
[b-81grdhgp8n] .e-grid .e-pagerconstant,
[b-81grdhgp8n] .e-grid .e-pagercontainer,
[b-81grdhgp8n] .e-chart,
[b-81grdhgp8n] .e-accumulationchart,
[b-81grdhgp8n] .e-chart .e-axis-label,
[b-81grdhgp8n] .e-chart .e-legend-text,
[b-81grdhgp8n] .e-chart .e-chart-legend-text,
[b-81grdhgp8n] .e-tooltip-wrap,
[b-81grdhgp8n] .e-acc-tooltip {
    font-family: var(--ad-font-family) !important;
}

[b-81grdhgp8n] .e-grid {
    background: var(--ad-bg-surface) !important;
    color: var(--ad-text-primary);
    border: none !important;
}

[b-81grdhgp8n] .e-grid .e-gridheader,
[b-81grdhgp8n] .e-grid .e-gridcontent,
[b-81grdhgp8n] .e-grid .e-table {
    border: none !important;
}

[b-81grdhgp8n] .e-grid .e-headercell,
[b-81grdhgp8n] .e-grid .e-gridheader {
    background: var(--ad-bg-surface-alt) !important;
    color: var(--ad-text-secondary) !important;
}

[b-81grdhgp8n] .e-grid .e-headercell .e-headercelldiv {
    font-size: 0.78rem;
    font-weight: 700;
}

/* Only a horizontal rule between rows (and under the header) — no outer
   frame around the grid, no vertical lines between columns. */
[b-81grdhgp8n] .e-grid .e-headercell,
[b-81grdhgp8n] .e-grid .e-rowcell {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--ad-border) !important;
}

[b-81grdhgp8n] .e-grid .e-row:last-child .e-rowcell {
    border-bottom: none !important;
}

[b-81grdhgp8n] .e-grid .e-rowcell {
    font-size: 0.85rem;
    color: var(--ad-text-primary);
}

[b-81grdhgp8n] .e-grid .e-row:hover .e-rowcell {
    background: var(--ad-bg-surface-alt) !important;
}

[b-81grdhgp8n] .e-grid .e-gridheader {
    padding-right: 0 !important;
}

[b-81grdhgp8n] .e-grid .e-pagercontainer,
[b-81grdhgp8n] .e-grid .e-pager {
    background: var(--ad-bg-surface) !important;
    color: var(--ad-text-secondary);
    border-color: var(--ad-border) !important;
}

/* Chart/legend/axis text follows the token system reactively — these
   are plain CSS custom properties resolved at paint time, so charts
   repaint automatically whenever [data-bs-theme] toggles, with no JS
   interop or per-component theme subscription required.             */
[b-81grdhgp8n] .e-chart .e-axis-label,
[b-81grdhgp8n] .e-chart .e-legend-text,
[b-81grdhgp8n] .e-chart .e-chart-legend-text,
[b-81grdhgp8n] .e-accumulationchart .e-legend-text {
    fill: var(--ad-text-secondary) !important;
}

[b-81grdhgp8n] .e-tooltip-wrap .e-tip-content,
[b-81grdhgp8n] .e-acc-tooltip .e-tip-content {
    font-family: var(--ad-font-family) !important;
}

/* ── Page grid ─────────────────────────────────────────────────────── */
/* Mobile-first: every card is full width by default. At >=768px
   (tablet and up) cards adopt their designed column span so related
   panels sit side by side; below that, everything stacks in a single
   column per the responsive requirement.                            */
.ad-grid[b-81grdhgp8n] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    align-items: stretch;
}

.ad-col-4[b-81grdhgp8n],
.ad-col-6[b-81grdhgp8n],
.ad-col-8[b-81grdhgp8n],
.ad-col-12[b-81grdhgp8n] {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .ad-col-4[b-81grdhgp8n] { grid-column: span 4; }
    .ad-col-6[b-81grdhgp8n] { grid-column: span 6; }
    .ad-col-8[b-81grdhgp8n] { grid-column: span 8; }
    .ad-col-12[b-81grdhgp8n] { grid-column: span 12; }
}

.ad-section-title[b-81grdhgp8n] {
    grid-column: 1 / -1;
    margin: 4px 0 -6px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ad-text-tertiary);
}

.ad-section-title:first-child[b-81grdhgp8n] {
    margin-top: 0;
}

/* ── Card chrome ───────────────────────────────────────────────────── */
.ad-card[b-81grdhgp8n] {
    display: flex;
    flex-direction: column;
    background: var(--ad-bg-surface);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-lg);
    box-shadow: var(--ad-shadow);
    overflow: hidden;
}

.ad-card-header[b-81grdhgp8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 18px 0;
}

.ad-card-body[b-81grdhgp8n] {
    /* flex-basis must be "auto" (not the "1" shorthand's 0%) so the
       height below actually governs the item's main size. With a 0%
       basis, flexbox sizes the item from its content instead of
       `height`, which also leaves it vulnerable to being stretched to
       match a taller sibling in the same grid row via align-items. */
    flex: 1 1 auto;
    min-height: 0;
    padding: 10px 18px 18px;
    display: flex;
    flex-direction: column;
}

/* Charts need a definite pixel height to compute their SVG viewBox;
   applied to any card that hosts a chart (or sits beside one) so
   paired cards in the same row line up visually. */
.ad-chart-tall .ad-card-body[b-81grdhgp8n] {
    height: 340px;
}

/* ── Header ────────────────────────────────────────────────────────── */
.dashboard-header[b-81grdhgp8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 2px 6px;
}

.dashboard-header h3[b-81grdhgp8n] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ad-text-primary);
}

.dashboard-header .header-meta[b-81grdhgp8n] {
    font-size: 0.8rem;
    color: var(--ad-text-secondary);
    margin-top: 2px;
}

.header-right[b-81grdhgp8n] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ad-btn-refresh[b-81grdhgp8n] {
    font-family: var(--ad-font-family);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ad-accent-blue-text);
    background: var(--ad-bg-surface);
    border: 1px solid var(--ad-accent-blue);
    border-radius: var(--ad-radius-sm);
    padding: 6px 14px;
    cursor: pointer;
    transition: background-color .15s ease;
}

.ad-btn-refresh:hover:not(:disabled)[b-81grdhgp8n] {
    background: var(--ad-bg-surface-alt);
}

.ad-btn-refresh:disabled[b-81grdhgp8n] {
    opacity: .6;
    cursor: default;
}

/* ── KPI stat tiles ────────────────────────────────────────────────── */
.ad-kpi-grid[b-81grdhgp8n] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Fixed 3x2 layout (3 tiles per row) at tablet width and up, matching the
   mobile-first breakpoint used by the rest of the page's grid. */
@media (min-width: 768px) {
    .ad-kpi-grid[b-81grdhgp8n] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.kpi-tile[b-81grdhgp8n] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    background: var(--ad-bg-surface);
    border: 1px solid var(--ad-border);
    border-left: 4px solid color-mix(in srgb, var(--ad-accent-blue) 80%, var(--ad-bg-surface));
    border-radius: var(--ad-radius-md);
    box-shadow: var(--ad-shadow);
    padding: 14px 16px;
    min-height: 92px;
}

.kpi-tile.accent-blue[b-81grdhgp8n]   { border-left-color: color-mix(in srgb, var(--ad-accent-blue) 80%, var(--ad-bg-surface)); }
.kpi-tile.accent-green[b-81grdhgp8n]  { border-left-color: color-mix(in srgb, var(--ad-accent-green) 80%, var(--ad-bg-surface)); }
.kpi-tile.accent-purple[b-81grdhgp8n] { border-left-color: color-mix(in srgb, var(--ad-accent-purple) 80%, var(--ad-bg-surface)); }
.kpi-tile.accent-orange[b-81grdhgp8n] { border-left-color: color-mix(in srgb, var(--ad-accent-orange) 80%, var(--ad-bg-surface)); }
.kpi-tile.accent-red[b-81grdhgp8n]    { border-left-color: color-mix(in srgb, var(--ad-accent-red) 80%, var(--ad-bg-surface)); }
.kpi-tile.accent-indigo[b-81grdhgp8n] { border-left-color: color-mix(in srgb, var(--ad-accent-indigo) 80%, var(--ad-bg-surface)); }

.kpi-icon[b-81grdhgp8n] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--ad-radius-md);
    font-size: 1.5rem;
    line-height: 1;
}

.kpi-tile.accent-blue   .kpi-icon[b-81grdhgp8n] { background: var(--ad-soft-blue-bg);   color: var(--ad-soft-blue-fg); }
.kpi-tile.accent-green  .kpi-icon[b-81grdhgp8n] { background: var(--ad-soft-green-bg);  color: var(--ad-soft-green-fg); }
.kpi-tile.accent-purple .kpi-icon[b-81grdhgp8n] { background: var(--ad-soft-purple-bg); color: var(--ad-soft-purple-fg); }
.kpi-tile.accent-orange .kpi-icon[b-81grdhgp8n] { background: var(--ad-soft-orange-bg); color: var(--ad-soft-orange-fg); }
.kpi-tile.accent-red    .kpi-icon[b-81grdhgp8n] { background: var(--ad-soft-red-bg);    color: var(--ad-soft-red-fg); }
.kpi-tile.accent-indigo .kpi-icon[b-81grdhgp8n] { background: var(--ad-soft-indigo-bg); color: var(--ad-soft-indigo-fg); }

/* Wraps so the label (or the New Users period-selector row) claims its own
   full-width line, then the value and its delta/description flow inline
   together on the next line — this is what actually consumes the tile's
   width on wide viewports, instead of leaving a blank strip to the right
   of a narrow vertically-stacked column. */
.kpi-content[b-81grdhgp8n] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    min-width: 0;
    flex: 1;
}

.kpi-content > .kpi-label[b-81grdhgp8n],
.kpi-content > .kpi-tile-head[b-81grdhgp8n] {
    flex-basis: 100%;
}

.kpi-tile .kpi-label[b-81grdhgp8n] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ad-text-tertiary);
}

.kpi-tile .kpi-value[b-81grdhgp8n] {
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--ad-text-primary);
}

.kpi-tile .kpi-sub[b-81grdhgp8n] {
    font-size: 0.82rem;
    color: var(--ad-text-secondary);
}

.kpi-tile .kpi-sub.positive[b-81grdhgp8n] { color: var(--ad-positive); font-weight: 600; }
.kpi-tile .kpi-sub.negative[b-81grdhgp8n] { color: var(--ad-negative); font-weight: 600; }
.kpi-tile .kpi-sub.warning[b-81grdhgp8n]  { color: var(--ad-warning); font-weight: 600; }

.kpi-tile-head[b-81grdhgp8n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.kpi-period-select[b-81grdhgp8n] {
    font-size: 0.7rem;
    font-family: var(--ad-font-family);
    color: var(--ad-text-secondary);
    background: var(--ad-bg-surface-alt);
    border: 1px solid var(--ad-border-strong);
    border-radius: var(--ad-radius-sm);
    padding: 2px 6px;
    cursor: pointer;
}

.kpi-period-select:focus-visible[b-81grdhgp8n] {
    outline: 2px solid var(--ad-focus-ring);
    outline-offset: 1px;
}

/* ── Panel header typography ──────────────────────────────────────── */
.panel-title[b-81grdhgp8n] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ad-text-primary);
}

/* ── Chart headline + fill ─────────────────────────────────────────── */
.chart-container[b-81grdhgp8n] {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 6px;
}

.chart-headline[b-81grdhgp8n] {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ad-text-primary);
    line-height: 1;
}

.chart-headline-label[b-81grdhgp8n] {
    font-size: 0.78rem;
    color: var(--ad-text-secondary);
}

.chart-fill[b-81grdhgp8n] {
    flex: 1;
    min-height: 0;
}

/* ── Collaboration donut + stat rail ──────────────────────────────── */
.collab-container[b-81grdhgp8n] {
    display: flex;
    gap: 16px;
    height: 100%;
    align-items: stretch;
}

.collab-chart[b-81grdhgp8n] {
    flex: 0 0 55%;
    min-width: 0;
}

.collab-stats[b-81grdhgp8n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.collab-stat-item[b-81grdhgp8n] {
    border-bottom: 1px solid var(--ad-border);
    padding-bottom: 10px;
}

.collab-stat-item:last-child[b-81grdhgp8n] {
    border-bottom: none;
    padding-bottom: 0;
}

.collab-stat-item .stat-label[b-81grdhgp8n] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ad-text-tertiary);
}

.collab-stat-item .stat-value[b-81grdhgp8n] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ad-text-primary);
}

/* ── Engagement score card ─────────────────────────────────────────── */
.engagement-stats-card[b-81grdhgp8n] {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.engagement-score-hero[b-81grdhgp8n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.engagement-score-big[b-81grdhgp8n] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--ad-text-primary);
    line-height: 1;
}

.engagement-score-label[b-81grdhgp8n] {
    font-size: 0.75rem;
    color: var(--ad-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.engagement-divider[b-81grdhgp8n] {
    width: 80%;
    border: none;
    border-top: 1px solid var(--ad-border);
    margin: 4px 0;
}

.engagement-score-metrics[b-81grdhgp8n] {
    display: flex;
    justify-content: center;
    width: 100%;
}

.engagement-metric-col[b-81grdhgp8n] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.engagement-metric-col + .engagement-metric-col[b-81grdhgp8n] {
    border-left: 1px solid var(--ad-border);
}

.engagement-metric-value[b-81grdhgp8n] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ad-text-primary);
    line-height: 1;
}

.engagement-metric-label[b-81grdhgp8n] {
    font-size: 0.68rem;
    color: var(--ad-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.engagement-score-formula[b-81grdhgp8n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.formula-chip[b-81grdhgp8n] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ad-accent-blue-text);
    background: color-mix(in srgb, var(--ad-accent-blue) 15%, var(--ad-bg-surface));
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

.formula-plus[b-81grdhgp8n] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ad-text-tertiary);
}

.engagement-score-meta[b-81grdhgp8n] {
    font-size: 0.66rem;
    color: var(--ad-text-tertiary);
    text-align: center;
    line-height: 1.4;
    margin-top: 8px;
    padding: 0 8px;
}

/* ── No-data / loading states ──────────────────────────────────────── */
.no-data-placeholder[b-81grdhgp8n] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    color: var(--ad-text-tertiary);
    font-size: 0.85rem;
    font-style: italic;
}

.dashboard-loading[b-81grdhgp8n] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 4px 2px;
}

/* Skeleton scaffold mirrors the real header/KPI/chart layout so users
   get a structural preview while data loads — a standard skeleton-
   screen pattern for improving perceived performance. Each block is a
   flat token-colored rectangle with a soft light band ("shimmer")
   sweeping across it on a loop.                                      */
.skeleton-header[b-81grdhgp8n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-title[b-81grdhgp8n] {
    width: 220px;
    height: 26px;
}

.skeleton-subtitle[b-81grdhgp8n] {
    width: 320px;
    height: 14px;
}

.skeleton-kpi-row[b-81grdhgp8n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.skeleton-kpi-tile[b-81grdhgp8n] {
    height: 92px;
}

.skeleton-chart-row[b-81grdhgp8n] {
    display: flex;
    gap: 20px;
}

.skeleton-card[b-81grdhgp8n] {
    flex: 1;
    height: 320px;
    border-radius: var(--ad-radius-lg);
    box-shadow: var(--ad-shadow);
}

.skeleton-card-narrow[b-81grdhgp8n] {
    flex: 0 0 32%;
}

@media (max-width: 767.98px) {
    .skeleton-chart-row[b-81grdhgp8n] {
        flex-direction: column;
    }

    .skeleton-card-narrow[b-81grdhgp8n] {
        flex: 1;
    }
}

.ad-skeleton[b-81grdhgp8n] {
    position: relative;
    overflow: hidden;
    background: var(--ad-bg-surface-alt);
    border: 1px solid var(--ad-border);
    border-radius: var(--ad-radius-md);
}

.ad-skeleton[b-81grdhgp8n]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--ad-shimmer-sheen), transparent);
    animation: ad-shimmer-b-81grdhgp8n 1.6s ease-in-out infinite;
}

@keyframes ad-shimmer-b-81grdhgp8n {
    100% {
        transform: translateX(100%);
    }
}

/* ── Accessibility ─────────────────────────────────────────────────── */
.admin-dashboard-wrapper :focus-visible[b-81grdhgp8n] {
    outline: 2px solid var(--ad-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .admin-dashboard-wrapper *[b-81grdhgp8n] {
        transition: none !important;
    }

    .ad-skeleton[b-81grdhgp8n]::after {
        animation: none !important;
    }
}
/* /Pages/FramePage.razor.rz.scp.css */
/* ── Frame Page — scoped styles ─────────────────────────────────────────── */

/* ── Header ───────────────────────────────────────────────────────────── */
.DecisionFrameTitle[b-np4g2d0mrg] {
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}

    .DecisionFrameTitle:hover[b-np4g2d0mrg] {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

.decision-frame-title-input[b-np4g2d0mrg] {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.375rem 0.75rem;
    height: auto;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    width: 280px;
    box-sizing: border-box;
}

    .decision-frame-title-input:focus[b-np4g2d0mrg] {
        border-color: #86b7fe;
        border-width: 1px;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        outline: none;
    }

.highlight-input[b-np4g2d0mrg] {
    border: 2px solid red !important;
    box-shadow: 0 0 1px 1px red !important;
    transition: border 0.2s, box-shadow 0.2s;
}

/* ── Header bar ───────────────────────────────────────────────────────── */
.frame-header-bar[b-np4g2d0mrg] {
    padding-bottom: 0;
    margin-bottom: 24px !important;
    align-items: flex-end !important;
}

.frame-left-group[b-np4g2d0mrg] {
    align-items: flex-end;
}

/* ── Bootstrap nav-tabs overrides (scoped to frame header) ─────────────── */
.frame-nav-tabs[b-np4g2d0mrg] {
    border-bottom: none;
    margin-bottom: -2px; /* sit on the header-bar bottom border */
}

.frame-nav-tabs .nav-link[b-np4g2d0mrg] {
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    color: #6b7280;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.frame-nav-tabs .nav-link:hover[b-np4g2d0mrg] {
    color: #1f2937;
    border-color: #e5e7eb #e5e7eb transparent;
}

.frame-nav-tabs .nav-link.active[b-np4g2d0mrg] {
    color: #2563eb;
    font-weight: 600;
    background: transparent;
    border-color: #e5e7eb #e5e7eb #fff;
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */

[data-bs-theme="dark"] .frame-nav-tabs .nav-link[b-np4g2d0mrg] {
    color: #9ca3af;
}

[data-bs-theme="dark"] .frame-nav-tabs .nav-link:hover[b-np4g2d0mrg] {
    color: #e5e7eb;
    border-color: #374151 #374151 transparent;
}

[data-bs-theme="dark"] .frame-nav-tabs .nav-link.active[b-np4g2d0mrg] {
    color: #60a5fa;
    border-color: #374151 #374151 #1f2937;
}

/* ── Syncfusion context menu overrides ────────────────────────────────── */
.e-contextmenu[b-np4g2d0mrg], .e-contextmenu ul[b-np4g2d0mrg] {
    padding-left: 0;
    margin: 0;
    list-style-type: none;
}

    .e-contextmenu li[b-np4g2d0mrg], .e-menu-item[b-np4g2d0mrg] {
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    } 
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-idxw3mhpsx] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-idxw3mhpsx] {
    flex: 1;
}

.sidebar[b-idxw3mhpsx] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-idxw3mhpsx] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-idxw3mhpsx]  a, .top-row .btn-link[b-idxw3mhpsx] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-idxw3mhpsx] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-idxw3mhpsx] {
        display: none;
    }

    .top-row.auth[b-idxw3mhpsx] {
        justify-content: space-between;
    }

    .top-row a[b-idxw3mhpsx], .top-row .btn-link[b-idxw3mhpsx] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-idxw3mhpsx] {
        flex-direction: row;
    }

    .sidebar[b-idxw3mhpsx] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-idxw3mhpsx] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-idxw3mhpsx], article[b-idxw3mhpsx] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── Footer feedback link ── */

.footer-feedback-link[b-idxw3mhpsx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-primary);
    text-decoration: none;
    border: 1px solid var(--bs-primary);
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

.footer-feedback-link:hover[b-idxw3mhpsx] {
    background: var(--bs-primary);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(12, 105, 176, 0.25);
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-mhhdykubv1] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-mhhdykubv1] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-mhhdykubv1] {
    font-size: 1.1rem;
}

.oi[b-mhhdykubv1] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-mhhdykubv1] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-mhhdykubv1] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-mhhdykubv1] {
        padding-bottom: 1rem;
    }

    .nav-item[b-mhhdykubv1]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-mhhdykubv1]  a.active {
    background-color: rgba(255,255,255,0.25);
    color: white;
}

.nav-item[b-mhhdykubv1]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-mhhdykubv1] {
        display: none;
    }

    .collapse[b-mhhdykubv1] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}