/* ============================================
   Skills Matrix / Competency Matrix Styles
   Phase 5.3 - LeanSpace
   ============================================ */

.skills-matrix-page {
    padding: 12px;
}

/* Header */
.skills-matrix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.skills-matrix-title h2 {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
}

.skills-count {
    font-size: 13px;
    color: #6e6e73;
}

.skills-matrix-actions {
    display: flex;
    gap: 8px;
}

/* Buttons */
.btn-primary {
    background: #0071e3;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #0077ed;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background: #f5f5f7;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
    padding: 10px 20px;
    border-radius: 980px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #e8e8ed;
}

.btn-outline {
    background: transparent;
    color: #0071e3;
    border: 1px solid #0071e3;
    padding: 8px 16px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: #0071e3;
    color: white;
}

.btn-small {
    background: #0071e3;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.btn-danger-outline {
    background: transparent;
    color: #dc2626;
    border: 1px solid #dc2626;
    padding: 8px 16px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger-outline:hover {
    background: #dc2626;
    color: white;
}

/* Toolbar */
.skills-matrix-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.skills-filters {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skills-filters select {
    padding: 6px 10px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 13px;
    background: white;
    cursor: pointer;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1d1d1f;
    cursor: pointer;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Inline Metrics */
.inline-metrics {
    display: flex;
    gap: 6px;
    align-items: center;
}

.metric-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.metric-badge.good {
    background: #dcfce7;
    color: #166534;
}

.metric-badge.warn {
    background: #fef3c7;
    color: #92400e;
}

.metric-badge.danger {
    background: #fef2f2;
    color: #dc2626;
}

/* Legend */
.skills-legend {
    display: flex;
    gap: 6px;
}

.legend-item {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid rgba(0,0,0,0.06);
}

/* Risks Alert */
.risks-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 8px 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.risks-alert:hover {
    background: #fee2e2;
}

.risks-icon {
    font-size: 20px;
}

.risks-text {
    flex: 1;
    font-size: 14px;
    color: #991b1b;
}

.risks-action {
    font-size: 13px;
    color: #dc2626;
    font-weight: 500;
}

/* Matrix Table */
.skills-matrix-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: white;
}

.skills-matrix-table {
    border-collapse: collapse;
    font-size: 13px;
    min-width: 100%;
}

.skills-matrix-table th,
.skills-matrix-table td {
    border: 1px solid #e5e7eb;
    padding: 6px 4px;
    text-align: center;
    min-width: 60px;
}

.skills-matrix-table th {
    background: #f9fafb;
    font-weight: 600;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 2;
}

.sticky-col {
    position: sticky;
    left: 0;
    z-index: 3;
    background: white !important;
    min-width: 140px !important;
    text-align: left !important;
}

th.sticky-col {
    z-index: 4;
    background: #f9fafb !important;
}

.user-col {
    max-width: 180px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 13px;
}

.user-position {
    font-size: 11px;
    color: #6e6e73;
}

/* Skill Header */
.skill-header {
    cursor: pointer;
    transition: background 0.2s;
    min-width: 80px;
    max-width: 130px;
}

.skill-header:hover {
    background: #eef2ff !important;
}

.skill-header.risk {
    background: #fef2f2 !important;
}

.skill-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.critical-badge {
    background: #ef4444;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.skill-name {
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    color: #1d1d1f;
    word-break: break-word;
    text-align: center;
}

.sop-badge-mini {
    display: inline-block;
    background: #38a169;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Skill Cells */
.skill-cell {
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 600;
    position: relative;
}

.skill-cell:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1;
}

.level-icon {
    font-size: 16px;
}

.target-indicator {
    font-size: 9px;
    display: block;
    opacity: 0.7;
}

/* Level colors */
.level-0 { background: #f3f4f6; color: #6b7280; }
.level-1 { background: #fef3c7; color: #92400e; }
.level-2 { background: #fed7aa; color: #c2410c; }
.level-3 { background: #bbf7d0; color: #166534; }
.level-4 { background: #22c55e; color: #ffffff; }

.has-target {
    border: 2px solid #0071e3 !important;
}

/* Mentoring Section */
.mentoring-section {
    margin-top: 16px;
}

.mentoring-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 12px;
}

.mentoring-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.mentoring-card {
    background: white;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mentoring-card.overdue {
    border-color: #ef4444;
    background: #fef2f2;
}

.mentoring-skill {
    font-weight: 600;
    color: #1d1d1f;
    font-size: 14px;
}

.mentoring-pair {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.mentoring-pair .arrow {
    color: #0071e3;
    font-weight: 600;
}

.mentoring-target {
    font-size: 12px;
    color: #6e6e73;
}

.mentoring-deadline {
    font-size: 12px;
    color: #6e6e73;
}

.mentoring-deadline.overdue {
    color: #ef4444;
    font-weight: 600;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6e6e73;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.empty-state p {
    margin-bottom: 20px;
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6e6e73;
    cursor: pointer;
    padding: 0 4px;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}

/* Form */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
}

.form-hint {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
}

.form-hint.error {
    color: #ef4444;
}

/* Assessment Modal */
.assessment-info {
    text-align: center;
    margin-bottom: 20px;
}

.assessment-user {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
}

.assessment-skill {
    font-size: 14px;
    color: #0071e3;
    margin-top: 4px;
}

.level-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.level-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.level-option:hover {
    border-color: #0071e3;
    background: #f0f5ff;
}

.level-option.selected,
.level-option:has(input:checked) {
    border-color: #0071e3;
    background: var(--level-color);
}

.level-option input[type="radio"] {
    display: none;
}

.level-option .level-icon {
    font-size: 20px;
}

.level-info {
    display: flex;
    flex-direction: column;
}

.level-number {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
}

.level-name {
    font-size: 12px;
    color: #6e6e73;
}

/* Risks Modal */
.risks-description {
    font-size: 14px;
    color: #6e6e73;
    margin-bottom: 16px;
    line-height: 1.5;
}

.risks-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.risk-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    gap: 12px;
}

.risk-skill {
    flex: 1;
}

.risk-skill strong {
    display: block;
    color: #1d1d1f;
}

.risk-category {
    font-size: 12px;
    color: #6e6e73;
}

.risk-expert {
    font-size: 13px;
    color: #6e6e73;
}

/* Skill Details */
.skill-details p {
    margin: 6px 0;
    font-size: 14px;
    color: #1d1d1f;
}

.level-distribution {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.level-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.level-bar .level-label {
    width: 20px;
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    color: #1d1d1f;
}

.level-bar-fill {
    height: 20px;
    border-radius: 4px;
    min-width: 2px;
    transition: width 0.3s;
    border: 1px solid rgba(0,0,0,0.06);
}

.level-bar .level-count {
    font-size: 12px;
    color: #6e6e73;
}

/* ==================== Department Summary ==================== */
.department-summary {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
}

.dept-summary-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.dept-summary-title strong {
    font-size: 16px;
    color: #1d1d1f;
}

.dept-summary-stats {
    font-size: 13px;
    color: #6e6e73;
}

.dept-summary-metrics {
    display: flex;
    gap: 16px;
}

.dept-metric {
    flex: 1;
    background: #f9fafb;
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    border: 1px solid #e5e7eb;
}

.dept-metric.good {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.dept-metric.warn {
    background: #fffbeb;
    border-color: #fde68a;
}

.dept-metric.danger {
    background: #fef2f2;
    border-color: #fecaca;
}

.dept-metric .metric-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
}

.dept-metric.good .metric-value { color: #16a34a; }
.dept-metric.warn .metric-value { color: #d97706; }
.dept-metric.danger .metric-value { color: #dc2626; }

.dept-metric .metric-label {
    display: block;
    font-size: 11px;
    color: #6e6e73;
    margin-top: 4px;
}

/* ==================== SOP Indicators ==================== */
.sop-indicator {
    font-size: 12px;
    display: inline-block;
    margin-top: 2px;
}

.sop-indicator.has-sop {
    filter: hue-rotate(0deg);
}

.sop-indicator.no-sop {
    animation: sopPulse 2s ease-in-out infinite;
}

@keyframes sopPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* SOP Links in Skill Details */
.skill-sops-section h4 {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 10px;
}

.sop-loading {
    font-size: 13px;
    color: #6e6e73;
    padding: 8px 0;
}

.sop-links-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sop-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.sop-link-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.sop-link-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sop-link-name {
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
}

.sop-link-level {
    font-size: 12px;
    color: #6e6e73;
}

.sop-link-status {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 980px;
    background: #f3f4f6;
    color: #6e6e73;
}

.sop-link-status.active {
    background: #dcfce7;
    color: #16a34a;
}

.sop-empty-hint {
    font-size: 13px;
    color: #6e6e73;
    padding: 12px;
    background: #f9fafb;
    border-radius: 8px;
    text-align: center;
}

.sop-empty-hint.critical {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

/* SOP Badge in Risk Modal */
.sop-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 980px;
    margin-left: 8px;
    white-space: nowrap;
}

.sop-badge.good {
    background: #dcfce7;
    color: #16a34a;
}

.sop-badge.bad {
    background: #fef2f2;
    color: #dc2626;
}

.risk-item.sop-gap {
    background: #fffbeb;
    border-color: #fde68a;
}

.no-risks-text {
    text-align: center;
    color: #6e6e73;
    font-size: 14px;
    padding: 20px;
}

/* Mentoring Info in Modal */
.mentoring-skill-info {
    background: #f0f5ff;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #1d1d1f;
}

/* ==================== View Toggle ==================== */
.skills-view-toggle {
    display: flex;
    background: #f5f5f7;
    border-radius: 980px;
    padding: 3px;
    gap: 2px;
}

.view-toggle-btn {
    background: transparent;
    border: none;
    padding: 8px 16px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 500;
    color: #6e6e73;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.view-toggle-btn.active {
    background: white;
    color: #1d1d1f;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.view-toggle-btn:hover:not(.active) {
    color: #1d1d1f;
}

/* ==================== Employee View ==================== */
.employee-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.employee-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-selector label {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    white-space: nowrap;
}

.employee-selector select {
    flex: 1;
    max-width: 400px;
}

/* Employee Card */
.employee-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.employee-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f0f5ff, #f5f3ff);
}

.employee-avatar {
    width: 56px;
    height: 56px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.employee-info {
    flex: 1;
}

.employee-name {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
}

.employee-meta {
    display: flex;
    gap: 6px;
    font-size: 13px;
    color: #6e6e73;
    margin-top: 2px;
}

.employee-stats {
    display: flex;
    gap: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #0071e3;
}

.stat-label {
    font-size: 11px;
    color: #6e6e73;
}

/* Assigned Skills */
.employee-skills-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
}

.employee-skills-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 12px;
}

.no-skills-hint {
    color: #6e6e73;
    font-size: 14px;
    text-align: center;
    padding: 20px 0;
}

.skill-group {
    margin-bottom: 12px;
}

.skill-group:last-child {
    margin-bottom: 0;
}

.skill-group-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 980px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.skill-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.chip-icon {
    font-size: 14px;
}

.chip-name {
    font-weight: 500;
}

.chip-level {
    font-weight: 700;
    font-size: 12px;
    opacity: 0.8;
}

.chip-target {
    font-size: 11px;
    opacity: 0.7;
}

/* Add Skills Section */
.employee-add-skills {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
}

.employee-add-skills h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 12px;
}

.add-skills-list {
    margin-top: 10px;
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.add-skill-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.add-skill-item:hover {
    background: #f0f5ff;
}

.add-skill-name {
    flex: 1;
    font-size: 14px;
    color: #1d1d1f;
}

.add-skill-cat {
    font-size: 12px;
}

.add-skill-btn {
    font-size: 12px;
    color: #0071e3;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
}

.add-skill-item:hover .add-skill-btn {
    opacity: 1;
}

.add-skill-more {
    text-align: center;
    font-size: 12px;
    color: #6e6e73;
    padding: 8px;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .employee-card-header {
        flex-wrap: wrap;
    }

    .employee-stats {
        width: 100%;
        justify-content: center;
        padding-top: 12px;
        border-top: 1px solid rgba(0,0,0,0.06);
    }

    .employee-selector {
        flex-direction: column;
        align-items: stretch;
    }

    .employee-selector select {
        max-width: 100%;
    }

    .skills-view-toggle {
        width: 100%;
    }

    .view-toggle-btn {
        flex: 1;
        text-align: center;
        padding: 8px 8px;
        font-size: 12px;
    }

    .add-skill-btn {
        opacity: 1;
    }

    /* Department summary mobile */
    .dept-summary-metrics {
        flex-direction: column;
        gap: 8px;
    }

    .dept-summary-title {
        flex-direction: column;
        gap: 4px;
    }

    .skills-matrix-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .skills-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .skills-legend {
        flex-wrap: wrap;
        justify-content: center;
    }

    .skills-matrix-header {
        flex-direction: column;
        align-items: stretch;
    }

    .skills-matrix-actions {
        justify-content: stretch;
    }

    .skills-matrix-actions .btn-primary {
        width: 100%;
    }
}