/* ============================================
   EVALUATIONS PAGES
   ============================================ */

@layer components {

    /* ---------- Shared ---------- */

    .avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 36px;
        block-size: 36px;
        border-radius: 50%;
        font-size: var(--fs-xsmall);
        font-weight: var(--fw-semibold);
        flex-shrink: 0;
    }

    .avatar-lg {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 56px;
        block-size: 56px;
        border-radius: 50%;
        font-size: var(--fs-h3);
        font-weight: var(--fw-bold);
        flex-shrink: 0;
    }

    .score-pct {
        font-weight: var(--fw-semibold);
        font-size: var(--fs-small);
    }

    .score-bar-track {
        flex: 1;
        block-size: 8px;
        border-radius: 4px;
        overflow: hidden;
    }

    .score-bar-fill {
        block-size: 100%;
        border-radius: 4px;
        transition: width 0.4s ease-out;
    }

    /* ============================================
       EVALUATIONS LIST PAGE
       ============================================ */

    .evaluations-page {
        padding-block: var(--space-xl);
        position: relative;
        overflow: hidden;

        .page-header {
            .eval-count {
                padding: var(--space-xs) var(--space-md);
                border-radius: 100px;
                font-size: var(--fs-small);
                font-weight: var(--fw-medium);
            }
        }

        .table-container {
            overflow-x: auto;
            border-radius: 12px;
            position: relative;
            z-index: 1;
        }

        .evals-table {
            inline-size: 100%;
            border-collapse: collapse;
            font-size: var(--fs-small);

            th, td {
                padding: var(--space-md) var(--space-lg);
                text-align: start;
                vertical-align: middle;
            }

            th {
                font-weight: var(--fw-medium);
                white-space: nowrap;
                font-size: var(--fs-xsmall);
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            tbody tr {
                cursor: pointer;
                transition: background 0.15s ease-out;
            }
        }

        .candidate-cell {
            min-inline-size: 200px;
            display: flex;
            align-items: center;
            gap: var(--space-md);

            strong {
                display: block;
                margin-block-end: 2px;
            }

            .email {
                font-size: var(--fs-xsmall);
            }
        }

        .date-cell {
            white-space: nowrap;
            font-size: var(--fs-xsmall);
        }

        .score-pct {
            font-weight: var(--fw-bold);
            font-size: var(--fs-body);
        }

        .status-badge {
            padding: 4px 12px;
            border-radius: 100px;
            font-size: var(--fs-xsmall);
            font-weight: var(--fw-medium);
            text-transform: capitalize;
        }

        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-lg);
            padding-block: var(--space-lg);
            position: relative;
            z-index: 1;
        }

        .page-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: var(--space-sm) var(--space-md);
            border-radius: 8px;
            font-size: var(--fs-small);
            font-weight: var(--fw-medium);
            text-decoration: none;
            transition: background 0.15s ease-out, opacity 0.15s ease-out;

            &.disabled {
                pointer-events: none;
                opacity: 0.3;
            }
        }

        .page-info {
            font-size: var(--fs-small);
            font-weight: var(--fw-medium);
        }
    }

    /* ============================================
       EVALUATION DETAIL PAGE
       ============================================ */

    .evaluation-detail-page {
        padding-block: var(--space-lg) calc(var(--space-xl) * 2);
        position: relative;
        overflow: hidden;

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: var(--fs-small);
            text-decoration: none;
            color: inherit;
            transition: opacity 0.15s;
            position: relative;
            z-index: 1;
        }

        /* Candidate Header */
        .candidate-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--space-lg);
            margin-block: var(--space-lg);
            padding: var(--space-lg) var(--space-xl);
            border-radius: 16px;
            position: relative;
            z-index: 1;
        }

        .candidate-identity {
            display: flex;
            align-items: center;
            gap: var(--space-md);

            h1 {
                font-size: var(--fs-h3);
                margin: 0;
            }

            .email {
                font-size: var(--fs-small);
                margin: 0;
            }
        }

        .header-score {
            text-align: end;

            .score-label {
                display: block;
                font-size: var(--fs-xsmall);
                margin-block-end: 4px;
            }
        }

        .score-pct-lg {
            font-size: 2.5rem;
            font-weight: var(--fw-bold);
            line-height: 1;
        }

        /* Simulation Chips */
        .sim-chips {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-sm);
            margin-block-end: var(--space-xl);
            position: relative;
            z-index: 1;

            .chip {
                padding: 6px 16px;
                border-radius: 100px;
                font-size: var(--fs-small);
            }
        }

        /* Two-Column Grid */
        .detail-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-lg);
            position: relative;
            z-index: 1;

            @media (max-width: 768px) {
                grid-template-columns: 1fr;
            }
        }

        .detail-col {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
        }

        /* Cards */
        .detail-card {
            padding: var(--space-lg);
            border-radius: 12px;

            h2 {
                font-size: var(--fs-body);
                font-weight: var(--fw-semibold);
                margin-block-end: var(--space-md);
            }

            h3 {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: var(--fs-body);
                font-weight: var(--fw-semibold);
                margin-block-end: var(--space-md);
            }
        }

        /* Overall Fit Bar */
        .overall-fit-bar {
            display: flex;
            align-items: center;
            gap: var(--space-md);

            .score-pct {
                font-size: var(--fs-h3);
                font-weight: var(--fw-bold);
                min-inline-size: 50px;
                text-align: end;
            }

            .score-bar-track {
                block-size: 12px;
                border-radius: 6px;
            }
        }

        /* Key Scores List */
        .key-scores-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .key-score-row {
            display: flex;
            align-items: center;
            gap: var(--space-md);

            .score-label {
                min-inline-size: 90px;
                font-size: var(--fs-small);
            }

            .score-pct {
                min-inline-size: 40px;
                text-align: end;
            }
        }

        /* Scores List (Simulation Explanation, Pre-completion) */
        .scores-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-md);
        }

        .score-item {
            .score-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-block-end: 6px;
            }

            .score-label {
                font-size: var(--fs-small);
            }

            .score-value {
                font-weight: var(--fw-semibold);
                font-size: var(--fs-small);
            }

            .score-bar {
                block-size: 6px;
                border-radius: 3px;
                overflow: hidden;
                margin-block-end: 6px;

                .score-bar-fill {
                    block-size: 100%;
                    border-radius: 3px;
                }
            }

            .score-explanation {
                font-size: var(--fs-xsmall);
                line-height: 1.5;
            }
        }

        /* Insight Cards */
        .insight-card {
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: var(--space-sm);

                li {
                    position: relative;
                    padding-inline-start: 20px;
                    font-size: var(--fs-small);
                    line-height: 1.6;

                    &::before {
                        content: "";
                        position: absolute;
                        inset-inline-start: 0;
                        inset-block-start: 8px;
                        inline-size: 8px;
                        block-size: 8px;
                        border-radius: 50%;
                    }
                }
            }

            p {
                font-size: var(--fs-small);
                line-height: 1.6;
            }

            &.insight-positive {
                border-inline-start: 3px solid;
            }

            &.insight-negative {
                border-inline-start: 3px solid;
            }
        }

        /* Skill Evaluations (Full Width) */
        .skill-eval-section {
            margin-block-start: var(--space-lg);
            position: relative;
            z-index: 1;

            h2 {
                border-block-end: 2px solid oklch(0.6 0.15 250);
                padding-block-end: var(--space-xs);
                margin-block-end: var(--space-md);
                display: inline-block;
            }
        }

        /* Task Evaluations (Full Width) */
        .tasks-section {
            margin-block-start: var(--space-lg);
            padding-block-end: 50vh;
            position: relative;
            z-index: 1;
        }

        .task-eval-card {
            border-radius: 12px;
            margin-block-end: var(--space-md);
            interpolate-size: allow-keywords;
            overflow-anchor: none;

            summary {
                display: flex;
                align-items: center;
                gap: var(--space-md);
                padding: var(--space-md) var(--space-lg);
                cursor: pointer;
                list-style: none;
                user-select: none;

                &::-webkit-details-marker { display: none; }

                &::after {
                    content: "";
                    inline-size: 8px;
                    block-size: 8px;
                    border-inline-end: 2px solid currentColor;
                    border-block-end: 2px solid currentColor;
                    transform: rotate(-45deg);
                    opacity: 0.4;
                    transition: transform 0.2s ease;
                    flex-shrink: 0;
                    margin-inline-start: var(--space-md);
                }
            }

            &[open] summary::after {
                transform: rotate(45deg);
            }

            &::details-content {
                block-size: 0;
                overflow: clip;
                transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
            }

            &[open]::details-content {
                block-size: auto;
            }

            .task-name {
                flex: 1;
                font-size: var(--fs-body);
                font-weight: var(--fw-semibold);
            }

            summary > .score-pct {
                font-size: var(--fs-h3);
                font-weight: var(--fw-bold);
            }

            .scores-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: var(--space-lg);
                padding: var(--space-md) var(--space-lg) var(--space-lg);

                @media (max-width: 640px) {
                    grid-template-columns: 1fr;
                }
            }
        }

        .empty {
            opacity: 0.4;
            font-style: italic;
        }
    }
}

/* ============================================
   THEME
   ============================================ */
@layer theme {

    /* ---------- Shared Score Colors ---------- */

    .score-pct {
        &.score-high { color: var(--color-success); }
        &.score-mid { color: var(--color-warning); }
        &.score-low { color: var(--color-error); }
    }

    .score-bar-track {
        background: oklch(from var(--glass-tint) l c h / 0.06);
    }

    .score-bar-fill {
        &.score-high { background: var(--color-success); }
        &.score-mid { background: var(--color-warning); }
        &.score-low { background: var(--color-error); }
    }

    .avatar, .avatar-lg {
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
        color: var(--color-white, #fff);
        box-shadow: 0 4px 12px oklch(from var(--accent-primary) l c h / 0.3);
    }

    /* ---------- Evaluations List Page ---------- */

    .evaluations-page {
        .eval-count {
            background: light-dark(oklch(from var(--accent-primary) l c h / 0.08), oklch(from var(--accent-primary) l c h / 0.1));
            border: 1px solid light-dark(oklch(from var(--accent-primary) l c h / 0.2), oklch(from var(--accent-primary) l c h / 0.25));
            color: var(--accent-primary);
        }

        .table-container {
            background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
            backdrop-filter: blur(8px);
        }

        .evals-table {
            th {
                background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.04));
                color: var(--text-secondary);
                border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
            }

            td {
                border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.04);
            }

            tbody tr:hover {
                background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
            }
        }

        .candidate-cell .email {
            color: var(--text-secondary);
        }

        .date-cell {
            color: var(--text-secondary);
        }

        .status-badge {
            &.status-completed {
                background: light-dark(oklch(from var(--color-success) l c h / 0.08), oklch(from var(--color-success) l c h / 0.12));
                border: 1px solid light-dark(oklch(from var(--color-success) l c h / 0.2), oklch(from var(--color-success) l c h / 0.25));
                color: var(--color-success);
            }

            &.status-in_progress, &.status-in-progress {
                background: light-dark(oklch(from var(--accent-primary) l c h / 0.08), oklch(from var(--accent-primary) l c h / 0.12));
                border: 1px solid light-dark(oklch(from var(--accent-primary) l c h / 0.2), oklch(from var(--accent-primary) l c h / 0.25));
                color: var(--accent-primary);
            }

            &.status-pending {
                background: light-dark(oklch(from var(--color-warning) l c h / 0.08), oklch(from var(--color-warning) l c h / 0.12));
                border: 1px solid light-dark(oklch(from var(--color-warning) l c h / 0.2), oklch(from var(--color-warning) l c h / 0.25));
                color: var(--color-warning);
            }
        }

        .page-btn {
            color: var(--accent-primary);
            background: light-dark(oklch(from var(--accent-primary) l c h / 0.06), oklch(from var(--accent-primary) l c h / 0.08));
            border: 1px solid light-dark(oklch(from var(--accent-primary) l c h / 0.15), oklch(from var(--accent-primary) l c h / 0.2));

            &:hover:not(.disabled) {
                background: light-dark(oklch(from var(--accent-primary) l c h / 0.12), oklch(from var(--accent-primary) l c h / 0.15));
            }
        }

        .page-info {
            color: var(--text-secondary);
        }
    }

    /* ---------- Evaluation Detail Page ---------- */

    .evaluation-detail-page {

        /* Markdown-rendered AI content: bold text in scores, insights, hiring rec */
        .detail-card strong, .insight-card strong {
            color: var(--accent-primary, oklch(0.65 0.15 250));
            font-weight: 600;
        }

        .back-link {
            color: var(--text-secondary);
            &:hover { color: var(--text-primary); }
        }

        .candidate-header {
            background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.04));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
            backdrop-filter: blur(12px);
        }

        .candidate-identity .email {
            color: var(--text-secondary);
        }

        .header-score .score-label {
            color: var(--text-secondary);
        }

        .score-pct-lg {
            &.score-high { color: var(--color-success); }
            &.score-mid { color: var(--color-warning); }
            &.score-low { color: var(--color-error); }
        }

        .sim-chips .chip {
            background: light-dark(oklch(0% 0 0 / 0.03), oklch(100% 0 0 / 0.05));
            border: 1px solid light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.08));
        }

        .detail-card {
            background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
            backdrop-filter: blur(12px);
        }

        .key-score-row .score-label {
            color: var(--text-secondary);
        }

        .score-item {
            .score-label {
                color: var(--text-secondary);
            }

            .score-value {
                &.score-high { color: var(--color-success); }
                &.score-mid { color: var(--color-warning); }
                &.score-low { color: var(--color-error); }
            }

            .score-bar {
                background: oklch(from var(--glass-tint) l c h / 0.06);
            }

            .score-explanation {
                color: var(--text-secondary);
            }
        }

        /* Insight Cards */
        .insight-card {
            li::before {
                background: currentColor;
                opacity: 0.4;
            }

            p {
                color: var(--text-secondary);
            }

            &.insight-positive {
                border-color: var(--color-success);

                h3 { color: var(--color-success); }
                li::before { background: var(--color-success); opacity: 0.7; }
            }

            &.insight-negative {
                border-color: var(--color-error);

                h3 { color: var(--color-error); }
                li::before { background: var(--color-error); opacity: 0.7; }
            }
        }

        /* Task Cards */
        .task-eval-card {
            background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);

            summary:hover {
                background: light-dark(oklch(0% 0 0 / 0.02), oklch(100% 0 0 / 0.03));
            }
        }

        .empty {
            color: var(--text-secondary);
        }

        /* Recordings */
        .recordings-section {
            h2 {
                display: flex;
                align-items: center;
                gap: 8px;

                svg { flex-shrink: 0; }
            }
        }

        .recording-group-label {
            font-size: 1rem;
            font-weight: 600;
            margin-block: 16px 8px;
        }

        .recording-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .recording-card {
            flex: 1;
            min-inline-size: 300px;
            max-inline-size: 640px;
            background: light-dark(oklch(100% 0 0 / 0.7), oklch(100% 0 0 / 0.03));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
            border-radius: 12px;
            padding: 16px;
        }

        .recording-label {
            font-size: 0.85rem;
            font-weight: 500;
            color: var(--text-secondary);
            margin-block-end: 10px;
        }

        .recording-card video {
            inline-size: 100%;
            border-radius: 8px;
            background: oklch(0% 0 0);
        }
    }
}