/* Theme overrides for talent management page */
@layer theme {
    /* Light theme overrides */
    html[data-theme="light"] .talent-management-page {
        .position-count {
            background: oklch(50% 0.18 270 / 0.1);
            border-color: oklch(50% 0.18 270 / 0.25);
        }

        .level-badge {
            background: oklch(50% 0.18 270 / 0.1);
            border: 1px solid oklch(50% 0.18 270 / 0.25);
        }

        .template-cell .status-badge {
            background: oklch(55% 0.18 145 / 0.1);
            border-color: oklch(55% 0.18 145 / 0.25);
        }

        .task-badge {
            background: oklch(60% 0.18 85 / 0.12);
            border-color: oklch(60% 0.18 85 / 0.25);
        }
    }

    @scope (.talent-management-page) {
        .page-header {
            .position-count {
                background: oklch(65% 0.15 270 / 0.1);
                border-color: oklch(65% 0.15 270 / 0.3);
                color: var(--accent-primary);
                font-weight: var(--fw-medium);
            }
        }

        .table-container {
            background: var(--surface-elevated);
            border-radius: var(--wire-radius);
            border: 1px solid var(--border-color);
        }

        .positions-table {
            th {
                background: var(--surface-base);
                padding: var(--space-md);

                &:first-child {
                    border-start-start-radius: var(--wire-radius);
                }

                &:last-child {
                    border-start-end-radius: var(--wire-radius);
                }
            }

            tbody tr {
                cursor: pointer;

                &:hover {
                    background: var(--surface-base);

                    .position-cell strong {
                        color: var(--accent-primary);
                    }
                }
            }
        }

        .position-cell strong {
            transition: color 0.15s ease-out;
        }

        .level-badge {
            background: oklch(65% 0.15 270 / 0.15);
            border: 1px solid oklch(65% 0.15 270 / 0.3);
            color: var(--accent-primary);
            padding: var(--space-3xs) var(--space-sm);
            border-radius: var(--wire-radius);
        }

        .template-cell {
            .status-badge {
                background: oklch(70% 0.15 145 / 0.15);
                border-color: oklch(70% 0.15 145 / 0.3);
                color: var(--color-success);
            }
        }

        .competencies-cell {
            .competency {
                padding: var(--space-xs);
                background: var(--surface-base);
                border-radius: calc(var(--wire-radius) / 2);
                margin-block-end: var(--space-xs);
            }

            .progress-bar {
                background: var(--surface-sunken);

                .progress {
                    background: linear-gradient(90deg, var(--accent-primary), var(--accent-warm));
                }
            }
        }

        .task-badge {
            background: oklch(75% 0.15 85 / 0.15);
            border-color: oklch(75% 0.15 85 / 0.3);
            color: var(--color-warning);
        }
    }
}

@layer components {
    @scope (.talent-management-page) {
        :scope {
            padding: var(--space-xl) var(--wire-gap);
        }

        .page-header {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            gap: var(--space-lg);
            margin-block-end: var(--space-xl);

            h1 {
                font-size: var(--fs-xxl);
            }

            .subtitle {
                color: var(--text-secondary);
                font-size: var(--fs-small);
            }

            .header-actions {
                display: flex;
                gap: var(--wire-gap);
                align-items: center;
            }

            .position-count {
                padding: var(--space-xs) var(--space-md);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                font-size: var(--fs-small);
            }
        }

        .primary-button {
            padding: var(--space-sm) var(--space-xl);
            border: var(--wire-border);
            border-radius: var(--wire-radius);
            background: var(--text-primary);
            color: var(--bg-primary);
            cursor: pointer;
        }

        .table-container {
            overflow-x: auto;
        }

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

            th, td {
                padding: var(--space-md);
                text-align: start;
                border-block-end: var(--wire-border);
                vertical-align: top;
            }

            th {
                font-weight: var(--fw-medium);
                color: var(--text-secondary);
                white-space: nowrap;
            }

            tbody tr:hover {
                background: var(--surface-elevated);
            }
        }

        .position-cell {
            min-inline-size: 200px;
            max-inline-size: 280px;

            strong {
                display: block;
                margin-block-end: var(--space-xs);
            }

            p {
                font-size: var(--fs-xsmall);
                color: var(--text-secondary);
                line-height: 1.4;
            }
        }

        .level-cell {
            .level-badge {
                display: inline-flex;
                gap: var(--space-xs);
                align-items: center;
                font-weight: var(--fw-medium);
            }
        }

        .location-cell {
            span {
                display: block;
            }

            .work-type {
                font-size: var(--fs-xsmall);
                color: var(--text-secondary);
            }
        }

        .template-cell {
            min-inline-size: 180px;

            strong {
                display: block;
                margin-block-end: var(--space-xs);
            }

            .template-meta {
                display: flex;
                gap: var(--space-sm);
                align-items: center;
            }

            .status-badge {
                padding: var(--space-3xs) var(--space-sm);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                font-size: var(--fs-xsmall);
            }
        }

        .competencies-cell {
            min-inline-size: 160px;

            .competency {
                display: grid;
                grid-template-columns: 1fr auto;
                gap: var(--space-xs);
                margin-block-end: var(--space-xs);
                font-size: var(--fs-xsmall);

                &:last-child {
                    margin-block-end: 0;
                }
            }

            .progress-bar {
                grid-column: 1 / -1;
                block-size: 4px;
                background: var(--border-color);
                border-radius: 2px;
                overflow: hidden;

                .progress {
                    block-size: 100%;
                    background: var(--text-primary);
                }
            }
        }

        .tasks-cell {
            .task-badge {
                display: inline-flex;
                gap: var(--space-xs);
                padding: var(--space-xs) var(--space-sm);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                font-size: var(--fs-xsmall);
            }
        }

        .tags-cell {
            min-inline-size: 150px;

            .tag {
                display: inline-block;
                padding: var(--space-3xs) var(--space-sm);
                border: var(--wire-border);
                border-radius: var(--wire-radius);
                font-size: var(--fs-xsmall);
                margin-inline-end: var(--space-xs);
                margin-block-end: var(--space-xs);
            }
        }
    }
}