/* Light dashboard refinements. Structure, data and dark styles stay component-owned. */
:root .authenticated-app-shell.app-theme-light .main-page-scroll:has(.career-dashboard),
:root .authenticated-app-shell.app-theme-light .career-dashboard {
    background: var(--ui-canvas) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard {
    --panel: var(--ui-panel);
    --panel-strong: var(--ui-panel);
    --border: var(--ui-border);
    --border-soft: var(--ui-divider);
    --muted: var(--ui-muted);
    --soft: var(--ui-body);
    --cyan: var(--ui-action);
    --green: var(--ui-positive);
    --rose: var(--ui-negative);
    color: var(--ui-ink);
    padding-top: 26px;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .welcome-row h1 {
    font-size: clamp(26px, 2.1vw, 32px);
    color: var(--ui-ink) !important;
    font-weight: 650 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .welcome-row p {
    font-size: 14px;
    color: var(--ui-muted) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.eyebrow, .section-kicker, .stage-label) {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    color: var(--ui-muted) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.metric-card, .panel, .focus-card, .milestone-card, .priorities-card, .coach-tip-card) {
    border: 1px solid var(--ui-border) !important;
    background: var(--ui-panel) !important;
    border-radius: 16px;
    box-shadow: var(--ui-shadow) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .kpi-grid .metric-card {
    padding: 20px;
    background: var(--ui-panel) !important;
    border-color: var(--ui-border) !important;
    box-shadow: none !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .metric-card::after {
    display: none;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .kpi-grid .metric-card .metric-icon {
    background: var(--ui-selected) !important;
    border-color: transparent !important;
    color: var(--ui-action) !important;
    box-shadow: none;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .kpi-grid .metric-card.primary:has(> .negative-value) .metric-icon {
    background: var(--ui-negative-soft) !important;
    color: var(--ui-negative) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .metric-card > span {
    color: var(--ui-body) !important;
    font-size: 13px;
    font-weight: 550;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .metric-card > strong {
    font-size: clamp(26px, 2vw, 32px);
    font-weight: 500 !important;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .metric-card > small {
    font-size: 13px;
    color: var(--ui-muted) !important;
    line-height: 1.5;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .panel .panel-heading {
    padding: 18px 20px;
    background: var(--ui-panel) !important;
    border-color: var(--ui-divider) !important;
    box-shadow: none !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .panel-heading h2 {
    font-size: 18px;
    color: var(--ui-ink) !important;
    font-weight: 650 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.panel-heading p, .progress-metric-card > p, .direction-stats small, .next-milestone > p) {
    font-size: 13px;
    line-height: 1.55;
    color: var(--ui-muted) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.panel-heading > a, .next-milestone > a) {
    color: var(--ui-action) !important;
    font-size: 13px;
    font-weight: 600;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .performance-panel .equity-chart {
    background: #ffffff !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .performance-panel .equity-line {
    stroke: var(--ui-action) !important;
    stroke-width: 2.4;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .performance-panel stop {
    stop-color: #16786f !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .performance-panel .equity-dot {
    fill: var(--ui-action);
    stroke: #ffffff;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .performance-panel .equity-area {
    fill: url(#equityAreaV2) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .performance-panel .grid-line {
    stroke: var(--ui-divider) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.chart-axis-row, .chart-summary span) {
    color: var(--ui-muted) !important;
    font-size: 12px;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .r-row .bar-track {
    background: var(--ui-divider) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .r-row .bar-fill.gain {
    background: #299568 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .r-row .bar-fill.loss {
    background: #cf5265 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .r-row .bar-fill.neutral {
    background: #86928d !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .direction-donut {
    background: conic-gradient(#299568 0 var(--long-angle), #cf5265 var(--long-angle) 360deg) !important;
    box-shadow: none;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .direction-donut::before {
    background: #ffffff !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .dot.long {
    background: #299568 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .dot.short {
    background: #cf5265 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.analysis-grid, .behaviour-grid) {
    align-items: start;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.recent-panel, .compact-panel) {
    min-height: 0;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .direction-content {
    padding: 22px 20px;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-cards {
    gap: 0;
    padding: 20px 12px;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-cards .progress-metric-card {
    background: transparent !important;
    border: 0 !important;
    border-inline-end: 1px solid var(--ui-divider) !important;
    border-radius: 0;
    box-shadow: none !important;
    padding: 8px 16px;
    gap: 12px;
    min-height: 0;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-cards .progress-metric-card:nth-child(4) {
    border-inline-end: 0 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-metric-card > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8em;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ui-ink) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-metric-card .progress-ring {
    margin-top: 0;
    flex-shrink: 0;
    --ring-colour: var(--ui-action) !important;
    background: conic-gradient(var(--ring-colour) 0 var(--ring-angle), var(--ui-divider) var(--ring-angle) 360deg) !important;
    box-shadow: none;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-metric-card .progress-ring[data-tone="positive"] {
    --ring-colour: #609578 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-metric-card .progress-ring[data-tone="negative"] {
    --ring-colour: #c27385 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-metric-card .progress-ring[data-tone="warning"] {
    --ring-colour: #bd964b !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-metric-card .progress-ring[data-tone="blue"] {
    --ring-colour: #16786f !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-ring::before {
    background: #ffffff !important;
    border-color: transparent;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-ring strong {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--ui-ink) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-ring small {
    font-size: 10px;
    line-height: 1.3;
    color: var(--ui-muted) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .progress-cards .next-milestone {
    background: var(--ui-subtle) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 12px;
    min-height: 0;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .next-milestone > a {
    background: var(--ui-action) !important;
    color: #ffffff !important;
    border-color: var(--ui-action) !important;
    min-height: 38px;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .next-milestone .progress-fill.positive {
    background: var(--ui-action) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .period-control select {
    background: #ffffff !important;
    color: var(--ui-ink) !important;
    border-color: var(--ui-border) !important;
    font-size: 14px;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .dashboard-coach-column .focus-card,
:root .authenticated-app-shell.app-theme-light .career-dashboard .focus-card.mobile-focus-card {
    background: var(--ui-ai-soft) !important;
    border-color: var(--ui-ai-border) !important;
    box-shadow: none !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .focus-card > h2 {
    color: #40374f !important;
    font-size: 18px;
    font-weight: 550 !important;
    line-height: 1.5;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .focus-card .focus-action {
    background: #ffffff !important;
    border-color: var(--ui-ai-border) !important;
    border-left-color: #9a88b5 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .focus-card .focus-action p {
    color: var(--ui-body) !important;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.6;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .focus-card :is(.ai-brand, .focus-action > span, .focus-footer a) {
    color: var(--ui-ai) !important;
    font-weight: 600;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .focus-card .source-badge {
    background: #e8e0f1 !important;
    border-color: var(--ui-ai-border) !important;
    color: #62507e !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .focus-card .focus-footer {
    border-color: var(--ui-ai-border) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.focus-evidence, .focus-footer > span, .milestone-card > p, .priority-list article p, .coach-tip-card p) {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ui-muted) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .dashboard-coach-column .experiment-progress {
    background: var(--ui-subtle) !important;
    border-color: var(--ui-divider) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .dashboard-coach-column .experiment-progress-track span {
    background: var(--ui-action) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .dashboard-coach-column .success-measure {
    background: var(--ui-positive-soft) !important;
    border-color: #d2e4d7 !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .emotion-panel .segmented-control {
    background: var(--ui-subtle) !important;
    border-color: var(--ui-border) !important;
    box-shadow: none;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .emotion-panel .segmented-control button {
    font-size: 13px;
    min-height: 34px;
    font-weight: 550;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ui-muted) !important;
    box-shadow: none !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .emotion-panel .segmented-control button.active {
    background: var(--ui-selected) !important;
    border-color: #c1d8cd !important;
    color: var(--ui-action-hover) !important;
    box-shadow: none !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.emotion-table, .trade-table) th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 10px 12px;
    background: var(--ui-subtle) !important;
    color: var(--ui-muted) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.emotion-table, .trade-table) td {
    font-size: 13px;
    line-height: 1.5;
    padding: 12px;
    color: var(--ui-body) !important;
    border-color: var(--ui-divider) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.emotion-table, .trade-table) tbody tr:nth-child(even) {
    background: var(--ui-subtle) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.emotion-table, .trade-table) td strong {
    font-weight: 600;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .positive-value,
:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.emotion-table, .trade-table) td.positive-value {
    color: var(--ui-positive) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .negative-value,
:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.emotion-table, .trade-table) td.negative-value {
    color: var(--ui-negative) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .behaviour-insight {
    background: var(--ui-subtle) !important;
    border-color: transparent !important;
    color: var(--ui-body) !important;
    font-size: 13px;
    line-height: 1.6;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .recent-panel .side-pill.long {
    background: var(--ui-positive-soft) !important;
    color: var(--ui-positive) !important;
}

:root .authenticated-app-shell.app-theme-light .career-dashboard .recent-panel .side-pill.short {
    background: var(--ui-negative-soft) !important;
    color: var(--ui-negative) !important;
}

@media (max-width: 1320px) {
    :root .authenticated-app-shell.app-theme-light .career-dashboard .progress-cards .progress-metric-card:nth-child(2n) { border-inline-end: 0 !important; }
}
@media (max-width: 520px) {
    :root .authenticated-app-shell.app-theme-light .career-dashboard .progress-cards .progress-metric-card { border-inline-end: 0 !important; border-bottom: 1px solid var(--ui-divider) !important; padding-block: 16px; }
}

:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.r-row > strong, .direction-stats strong, .chart-summary strong, .next-milestone .milestone-progress strong) {
    font-weight: 400 !important;
}
:root .authenticated-app-shell.app-theme-light .career-dashboard :is(.emotion-table, .trade-table) tbody :is(td, td strong) {
    font-weight: 400 !important;
}