/* /Components/Controls/AssessmentLeftPanel.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────
   AssessmentLeftPanel.razor.css
   Scoped styles — these selectors are automatically namespaced
   by Blazor's CSS isolation and will not leak outside this component.
   ───────────────────────────────────────────────────────────── */

/* ── Colour tokens ────────────────────────────────────────── */
:root[b-h8n3dw84f5] {
    --alp-green:        #659947;
    --alp-gray-active:  #888780;
    --alp-highlight:    #F2F2F2;
    --alp-border:       #DDDDDD;
    --alp-track:        #E0E0E0;
    --alp-text-primary: #1A1A1A;
    --alp-text-muted:   #666666;
    --alp-text-faint:   #999999;
    --alp-opacity-locked: 0.45;
}

/* ── Panel wrapper ────────────────────────────────────────── */
.alp-panel[b-h8n3dw84f5] {
    border: 1px solid var(--alp-border);
    border-radius: 10px;
    padding: 1.25rem 1rem;
    margin: 0.5em;
    color: var(--alp-text-muted);
    background: #ffffff;
    /*font-size: 10pt;*/
}

/* ── Progress zone ────────────────────────────────────────── */
.alp-progress-placeholder[b-h8n3dw84f5] {
    margin: 0 0 0.5rem;
}

.alp-progress-zone[b-h8n3dw84f5] {
    margin-bottom: 0.5rem;
}

.alp-progress-label[b-h8n3dw84f5] {
    display: block;
    color: var(--alp-text-muted);
    margin-bottom: 4px;
}

.alp-progress-row[b-h8n3dw84f5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.alp-progress-track[b-h8n3dw84f5] {
    flex: 1;
    height: 6px;
    background: var(--alp-track);
    border-radius: 3px;
    overflow: hidden;
}

.alp-progress-fill[b-h8n3dw84f5] {
    height: 100%;
    background: var(--alp-green);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.alp-progress-counter[b-h8n3dw84f5] {
    color: var(--alp-text-muted);
    white-space: nowrap;
}

.alp-progress-context[b-h8n3dw84f5] {
    margin: 0;
    line-height: 1.4;
}

.alp-context-quadrant[b-h8n3dw84f5] {
    font-weight: 600;
    color: var(--alp-text-primary);
}

.alp-context-rest[b-h8n3dw84f5] {
    color: var(--alp-text-muted);
}

/* ── Divider ──────────────────────────────────────────────── */
.alp-divider[b-h8n3dw84f5] {
    border: none;
    border-top: 0.5px solid var(--alp-border);
    margin: 0.75rem 0;
}

/* ── Shared: clickable rows ───────────────────────────────── */
.alp-clickable[b-h8n3dw84f5] {
    cursor: pointer;
}

/* ── Shared: indicator circles / dots ────────────────────── */
.alp-indicator-wrap[b-h8n3dw84f5] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alp-indicator[b-h8n3dw84f5] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Sizes */
.alp-indicator--lg[b-h8n3dw84f5] { width: 18px; height: 18px; }
.alp-indicator--md[b-h8n3dw84f5] { width: 14px; height: 14px; }
.alp-indicator--sm[b-h8n3dw84f5] { width: 10px; height: 10px; }

/* Completed */
.alp-indicator--completed[b-h8n3dw84f5] {
    background: var(--alp-green);
}

.alp-indicator--completed svg[b-h8n3dw84f5] {
    width: 10px;
    height: 10px;
}

/* Active */
.alp-indicator--active[b-h8n3dw84f5] {
    background: var(--alp-gray-active);
}

.alp-indicator--active svg[b-h8n3dw84f5] {
    width: 10px;
    height: 10px;
}

/* Locked / unanswered */
.alp-indicator--locked[b-h8n3dw84f5] {
    background: transparent;
    border: 1.5px solid var(--alp-border);
}

.alp-indicator--sm.alp-indicator--locked[b-h8n3dw84f5],
.alp-indicator--sm.alp-indicator--unanswered[b-h8n3dw84f5] {
    background: var(--alp-track);
    border: 1px solid var(--alp-gray-active);
}

/* Question-level state dots */
.alp-indicator--answered[b-h8n3dw84f5] {
    background: var(--alp-green);
    border: none;
}

.alp-indicator--current[b-h8n3dw84f5] {
    background: var(--alp-gray-active);
    border: none;
}

.alp-indicator--unanswered[b-h8n3dw84f5] {
    background: var(--alp-track);
    border: 1px solid var(--alp-gray-active);
}

/* ── Chevron ──────────────────────────────────────────────── */
.alp-chevron[b-h8n3dw84f5] {
    width: 14px;
    height: 14px;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.alp-chevron--up[b-h8n3dw84f5] {
    transform: rotate(180deg);
}

/* ── Quadrant level ───────────────────────────────────────── */
.alp-quadrant[b-h8n3dw84f5] {
    margin-bottom: 2px;
}

.alp-quadrant-header[b-h8n3dw84f5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    margin-bottom: 5px;
    border-radius: 6px;
    user-select: none;
}

.alp-quadrant-label[b-h8n3dw84f5] {
    font-weight: 500;
    color: var(--alp-text-primary);
    flex: 1;
}

/* State modifiers */
.alp-quadrant--active .alp-quadrant-header[b-h8n3dw84f5] {
    background: var(--alp-highlight);
}

.alp-quadrant--locked[b-h8n3dw84f5] {
    opacity: var(--alp-opacity-locked);
    pointer-events: none;
}

.alp-quadrant--completed .alp-quadrant-header:hover[b-h8n3dw84f5] {
    background: var(--alp-highlight);
}

.alp-quadrant--completed .alp-quadrant-label[b-h8n3dw84f5] {
    font-weight: normal;
    color: var(--alp-text-muted);
}

/* ── Elements container (left border connector) ───────────── */
.alp-elements-container[b-h8n3dw84f5] {
    margin-left: 9px;  /* aligns with indicator centre */
    padding-left: 18px;
    border-left: 1.5px solid var(--alp-border);
}

/* ── Element level ────────────────────────────────────────── */
.alp-element[b-h8n3dw84f5] {
    margin-bottom: 1px;
}

.alp-element-header[b-h8n3dw84f5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    margin-bottom: 5px;
    border-radius: 5px;
    user-select: none;
}

.alp-element-label[b-h8n3dw84f5] {
    font-weight: normal;
    color: var(--alp-text-muted);
    flex: 1;
}

/* State modifiers */
.alp-element--active .alp-element-header[b-h8n3dw84f5] {
    background: var(--alp-highlight);
}

.alp-element--active .alp-element-label[b-h8n3dw84f5] {
    font-weight: 500;
    color: var(--alp-text-primary);
}

.alp-element--locked[b-h8n3dw84f5] {
    opacity: var(--alp-opacity-locked);
    pointer-events: none;
}

.alp-element--completed .alp-element-header:hover[b-h8n3dw84f5] {
    background: var(--alp-highlight);
}

/* ── Questions container (left border connector) ──────────── */
.alp-questions-container[b-h8n3dw84f5] {
    margin-left: 7px;  /* aligns with element indicator centre */
    padding-left: 15px;
    border-left: 1.5px solid var(--alp-border);
}

/* ── Question rows ────────────────────────────────────────── */
.alp-question[b-h8n3dw84f5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px;
    border-radius: 4px;
    user-select: none;
}

.alp-question-label[b-h8n3dw84f5] {
    color: var(--alp-text-muted);
}

/* State modifiers */
.alp-question--current .alp-question-label[b-h8n3dw84f5] {
    font-weight: 500;
    color: var(--alp-text-primary);
}

.alp-question--current[b-h8n3dw84f5] {
    background: var(--alp-highlight);
}

.alp-question--unanswered[b-h8n3dw84f5] {
    opacity: var(--alp-opacity-locked);
    pointer-events: none;
}

.alp-question--answered:hover[b-h8n3dw84f5] {
    background: var(--alp-highlight);
}

/* ── Confirm link ─────────────────────────────────────────── */
.alp-confirm[b-h8n3dw84f5] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 5px;
    color: var(--alp-text-muted);
    user-select: none;
}

.alp-confirm--locked[b-h8n3dw84f5] {
    opacity: var(--alp-opacity-locked);
    pointer-events: none;
}

.alp-confirm--unlocked:hover[b-h8n3dw84f5] {
    background: var(--alp-highlight);
    color: var(--alp-text-primary);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */