/* ============================================================
   GSM Industrial — Skills Matrix Module
   Supervisor view, Employee view, pill controls, score colors.
   Depends on steelpulse-base.css for design tokens.
   ============================================================ */

/* ---- SUPERVISOR VIEW — OUTER CONTAINER ---- */
.gsm-matrix-wrap {
    max-height: calc(100vh - 200px);
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---- SUPERVISOR VIEW — TABLE ---- */
.gsm-matrix-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    background: var(--mud-palette-surface);
    font-size: var(--gsm-text-base);
}

/* ---- SUPERVISOR VIEW — LEGEND CELL (top-left corner) ---- */
.gsm-matrix-legend {
    width:300px;
    background: var(--gsm-brand-navy);
    color: #fff;
    font-size: var(--gsm-text-sm);
    font-weight: 600;
    padding: 8px 12px;
    text-align: left;
    min-width: 180px;
    min-height: var(--gsm-matrix-row1-height);
    position: sticky;
    left: 0;
    top: 0;
    z-index: 15;
}
    font-size: var(--gsm-text-base);
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.gsm-matrix-legend-scores {
    display: flex;
    gap: 8px;
    font-weight: 400;
    font-size: var(--gsm-text-xs);
    color: rgba(255, 255, 255, 0.8);
}

.gsm-matrix-legend-ranges {
    display: grid;
    grid-template-columns: minmax(auto, 70px) auto auto;
    column-gap: 12px;
    row-gap: 3px;
    margin-bottom: 8px;
    align-items: center;
}

.gsm-matrix-legend-range-row {
    display: contents;
}

.gsm-matrix-legend-ranges .gsm-badge {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.gsm-matrix-legend-range-pts {
    font-size: var(--gsm-text-xs);
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.gsm-score-label-1 { color: #fbbf24; font-weight: 700; }
.gsm-score-label-2 { color: #93c5fd; font-weight: 700; }
.gsm-score-label-3 { color: #86efac; font-weight: 700; }

/* ---- SUPERVISOR VIEW — EMPLOYEE HEADER CELLS (row 1) ---- */
.gsm-matrix-emp-th {
    background: var(--mud-palette-background);
    padding: 6px 8px;
    text-align: center;
    min-width: 90px;
    min-height: var(--gsm-matrix-row1-height);
    vertical-align: bottom;
    border: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    z-index: 10;
}

.gsm-emp-lastname {
    font-size: var(--gsm-text-base);
    font-weight: 700;
    color: var(--mud-palette-info);
    line-height: 1.3;
}

.gsm-emp-firstname {
    font-size: var(--gsm-text-sm);
    font-weight: 500;
    color: var(--mud-palette-info);
    line-height: 1.3;
    margin-bottom: 4px;
}

.gsm-emp-link {
    text-decoration: none;
    display: block;
}

.gsm-emp-null {
    font-size: var(--gsm-text-xs);
    color: var(--mud-palette-text-disabled);
    display: block;
}

/* ---- SUPERVISOR VIEW — CALCULATED ROW (row 2) ---- */
.gsm-matrix-calc-label {
    width:300px;
    background: var(--gsm-brand-navy-light);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--gsm-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 14px 0 10px;
    position: sticky;
    left: 0;
    top: var(--gsm-matrix-row1-height);
    z-index: 15;
}

.gsm-calc-row-title {
    display: block;
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--gsm-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.gsm-matrix-calc-row {
    background: #e8edf2;
}

.gsm-matrix-calc-td {
    text-align: center;
    padding: 4px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
    position: sticky;
    top: var(--gsm-matrix-row1-height);
    z-index: 10;
    background: var(--mud-palette-surface);
}

.gsm-calc-pts {
    font-size: var(--gsm-text-base);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.gsm-calc-pts-label {
    font-size: 9px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ---- SUPERVISOR VIEW — GROUP HEADER ROW ---- */
.gsm-matrix-group-td {
    width:300px;
    background: var(--mud-palette-secondary);
    color: #fff;
    font-weight: 600;
    font-size: var(--gsm-text-sm);
    padding: 7px 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    left: 0;
    z-index: 5;
    white-space: nowrap;
    cursor: pointer;
}

.gsm-matrix-group-toggle {
    margin-right: 6px;
    font-style: normal;
    font-size: var(--gsm-text-xs);
}

.gsm-matrix-group-count {
    font-weight: 400;
    font-size: var(--gsm-text-xs);
    color: rgba(255, 255, 255, 0.6);
    margin-left: 6px;
}

.gsm-matrix-group-score-td {
    text-align: center;
    padding: 4px 5px;
    background: var(--mud-palette-secondary);
    border: 1px solid var(--mud-palette-secondary-lighten);
}

.gsm-group-total       { font-size: var(--gsm-text-sm); font-weight: 600; color: #fff; }
.gsm-group-total-max   { font-size: var(--gsm-text-xs); color: rgba(255, 255, 255, 0.5); }
.gsm-group-total-empty { font-size: var(--gsm-text-xs); color: rgba(255, 255, 255, 0.3); }

/* ---- SUPERVISOR VIEW — SKILL ROW ---- */
.gsm-matrix-skill-td {
    width:300px;
    padding: 5px 14px 5px 22px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    text-align: right;
    white-space: nowrap;
    font-size: var(--gsm-text-base);
    position: sticky;
    left: 0;
    z-index: 5;
    border: 1px solid var(--mud-palette-lines-default);
    border-right: 2px solid var(--mud-palette-divider);
}

.gsm-matrix-score-td {
    text-align: center;
    padding: 4px 5px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ---- SPLIT PILL ---- */
.split-pill {
    display: inline-grid;
    grid-template-columns: 20px 26px 20px;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    cursor: pointer;
    user-select: none;
}

.pill-down, .pill-up {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gsm-text-base);
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    transition: background 0.1s;
    line-height: 1;
}
.pill-down { border-right: 1px solid var(--mud-palette-lines-default); }
.pill-up   { border-left:  1px solid var(--mud-palette-lines-default); }
.pill-down:hover, .pill-up:hover { background: var(--mud-palette-lines-default); color: var(--mud-palette-text-primary); }
.pill-down:active, .pill-up:active { transform: scale(0.88); }

.pill-val {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--gsm-text-base);
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

/* unscored */
.split-pill.v0 { border-color: var(--mud-palette-lines-default); }
.split-pill.v0 .pill-val  { background: var(--mud-palette-background);          color: var(--mud-palette-text-secondary); }
.split-pill.v0 .pill-down,
.split-pill.v0 .pill-up   { background: var(--mud-palette-background); }

/* score 1 */
.split-pill.v1 { border-color: var(--mud-palette-divider); }
.split-pill.v1 .pill-val  { background: var(--gsm-score-1-bg);  color: var(--gsm-score-1-text); }
.split-pill.v1 .pill-down,
.split-pill.v1 .pill-up   { background: #f3f4f6; }

/* score 2 */
.split-pill.v2 { border-color: var(--gsm-score-2-border); }
.split-pill.v2 .pill-val  { background: var(--gsm-score-2-bg);  color: var(--gsm-score-2-text); }
.split-pill.v2 .pill-down,
.split-pill.v2 .pill-up   { background: #dbeafe; border-color: var(--gsm-score-2-border); }
.split-pill.v2 .pill-down:hover,
.split-pill.v2 .pill-up:hover { background: #bfdbfe; }

/* score 3 */
.split-pill.v3 { border-color: var(--gsm-score-3-border); }
.split-pill.v3 .pill-val  { background: var(--gsm-score-3-bg);  color: var(--gsm-score-3-text); }
.split-pill.v3 .pill-down,
.split-pill.v3 .pill-up   { background: #dcfce7; border-color: var(--gsm-score-3-border); }
.split-pill.v3 .pill-down:hover,
.split-pill.v3 .pill-up:hover { background: #bbf7d0; }

/* ---- EMPLOYEE VIEW — SCORE COLORS ---- */
.ev-skill-score.s1   { color: var(--gsm-score-1-text); }
.ev-skill-score.s2   { color: var(--gsm-score-2-text); }
.ev-skill-score.s3   { color: var(--gsm-score-3-text); }
.ev-skill-score.snull { color: #d1d5db; font-size: var(--gsm-text-sm); }

/* ---- EMPLOYEE VIEW — CLASSIFICATIONS TABLE ---- */
.gsm-cls-table {
    width: 100%;
    border-collapse: collapse;
}

.gsm-cls-th {
    padding: var(--gsm-space-sm) 12px;
    border: 1px solid #f0f0f0;
    text-align: left;
    background: var(--mud-palette-background-gray);
    font-size: var(--gsm-text-base);
    font-weight: 600;
}

.gsm-cls-td {
    padding: var(--gsm-space-sm) 12px;
    border: 1px solid #f0f0f0;
    font-size: var(--gsm-text-base);
}

.gsm-cls-row-active {
    background: var(--mud-palette-primary-hover);
}

.gsm-cls-lead-note  { font-size: var(--gsm-text-sm); color: var(--gsm-lead-text); margin-left: 4px; }

/* ---- EMPLOYEE VIEW — SKILL GROUP HEADER ---- */
.gsm-ev-group-td {
    background: var(--mud-palette-secondary);
    color: #fff;
    font-weight: 600;
    font-size: var(--gsm-text-sm);
    padding: 7px 14px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.gsm-ev-skill-name {
    padding: 7px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: var(--gsm-text-base);
    width: 280px;
}

.gsm-ev-skill-score {
    padding: 7px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    text-align: left;
    font-weight: 600;
    font-size: var(--gsm-text-md);
    width: 48px;
}

/* ---- Weighted skill indicator ---- */
.gsm-skill-weighted {
    cursor: help;
    border-bottom: 1px dotted var(--mud-palette-text-disabled);
}