@import url('../shared/base.css');

/* ===== Holland Code (RIASEC) — Theme Overrides ===== */

:root {
    --holland-r: #f43f5e;
    --holland-i: #3b82f6;
    --holland-a: #8b5cf6;
    --holland-s: #10b981;
    --holland-e: #f59e0b;
    --holland-c: #14b8a6;
}

/* Pill color coding */
.pill--R .pill-letter { background: var(--holland-r); color: #fff; }
.pill--I .pill-letter { background: var(--holland-i); color: #fff; }
.pill--A .pill-letter { background: var(--holland-a); color: #fff; }
.pill--S .pill-letter { background: var(--holland-s); color: #fff; }
.pill--E .pill-letter { background: var(--holland-e); color: #fff; }
.pill--C .pill-letter { background: var(--holland-c); color: #fff; }

/* Dimension tag colors in question cards */
.dim-tag--R { background: rgba(244,63,94,0.12); color: var(--holland-r); }
.dim-tag--I { background: rgba(59,130,246,0.12); color: var(--holland-i); }
.dim-tag--A { background: rgba(139,92,246,0.12); color: var(--holland-a); }
.dim-tag--S { background: rgba(16,185,129,0.12); color: var(--holland-s); }
.dim-tag--E { background: rgba(245,158,11,0.12); color: var(--holland-e); }
.dim-tag--C { background: rgba(20,184,166,0.12); color: var(--holland-c); }

/* Bar fill gradients for results */
.bar-fill--R { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.bar-fill--I { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.bar-fill--A { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.bar-fill--S { background: linear-gradient(90deg, #10b981, #34d399); }
.bar-fill--E { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar-fill--C { background: linear-gradient(90deg, #14b8a6, #2dd4bf); }

/* Result card dominant highlight per type */
.dim-result-card.dominant--R { border-color: var(--holland-r); }
.dim-result-card.dominant--I { border-color: var(--holland-i); }
.dim-result-card.dominant--A { border-color: var(--holland-a); }
.dim-result-card.dominant--S { border-color: var(--holland-s); }
.dim-result-card.dominant--E { border-color: var(--holland-e); }
.dim-result-card.dominant--C { border-color: var(--holland-c); }

/* Holland code letters in result header */
.result-type-code .code-letter { transition: color 0.3s ease; }
.result-type-code .code-letter--R { color: var(--holland-r); }
.result-type-code .code-letter--I { color: var(--holland-i); }
.result-type-code .code-letter--A { color: var(--holland-a); }
.result-type-code .code-letter--S { color: var(--holland-s); }
.result-type-code .code-letter--E { color: var(--holland-e); }
.result-type-code .code-letter--C { color: var(--holland-c); }

/* Likert scale — horizontal layout */
.likert-scale {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    min-width: 80px;
    flex: 1;
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.likert-option:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-2px);
}
.likert-option.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.likert-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-muted);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: var(--transition);
}
.likert-option.selected .likert-number {
    background: var(--primary);
    color: #fff;
}
.likert-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
    font-weight: 500;
}
.likert-option.selected .likert-label {
    color: var(--text);
    font-weight: 600;
}

/* Careers grid in results */
.careers-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.career-tag {
    padding: 6px 14px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Section visibility */
.section-hidden { display: none !important; }

/* Responsive for likert */
@media (max-width: 768px) {
    .likert-scale { gap: 6px; }
    .likert-option { padding: 10px 6px; min-width: 56px; }
    .likert-label { font-size: 0.65rem; }
}
@media (max-width: 480px) {
    .likert-scale { gap: 4px; }
    .likert-option { min-width: 48px; padding: 8px 4px; }
    .likert-number { width: 28px; height: 28px; font-size: 0.85rem; }
}