/* public/app/css/dash-accent-noir.css
 * Synopsis: Accent vert dashboard, thème noir adouci.
 * Objectif: Moins de brillance sur fonds et boutons actifs.
 */

html[data-vok-theme="noir"] .dash {
    background:
        radial-gradient(120% 80% at 10% -10%, var(--dash-accent-dim), transparent 42%),
        var(--dash-bg);
}

html[data-vok-theme="noir"] .dash .dash-user {
    background: color-mix(in srgb, var(--dash-accent) 9%, var(--dash-elev2));
    border-color: color-mix(in srgb, var(--dash-accent) 26%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-accent) 58%, var(--dash-text));
}

html[data-vok-theme="noir"] .dash .dash-seg-btn[aria-pressed="true"],
html[data-vok-theme="noir"] .dash .dash-mode[aria-selected="true"] {
    background: color-mix(in srgb, var(--dash-accent) 76%, var(--dash-elev2));
    border-color: color-mix(in srgb, var(--dash-accent) 36%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-text) 70%, var(--dash-accent));
}

html[data-vok-theme="noir"] .dash .dash-go.primary,
html[data-vok-theme="noir"] .dash .dash-go {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--dash-accent) 86%, var(--dash-elev2)),
        color-mix(in srgb, var(--dash-accent) 70%, var(--dash-elev2))
    );
    color: color-mix(in srgb, var(--dash-text) 80%, #0a1814);
}

html[data-vok-theme="noir"] .dash .dash-go.primary:hover,
html[data-vok-theme="noir"] .dash .dash-go:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--dash-accent) 68%, var(--dash-text)),
        color-mix(in srgb, var(--dash-accent) 86%, var(--dash-elev2))
    );
}

html[data-vok-theme="noir"] .dash .dash-status[data-kind="listening"] {
    background: color-mix(in srgb, var(--dash-accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--dash-accent) 28%, transparent);
    color: color-mix(in srgb, var(--dash-accent) 60%, var(--dash-text));
}

html[data-vok-theme="noir"] .dash .dash-status[data-kind="listening"]::before {
    background: color-mix(in srgb, var(--dash-accent) 72%, var(--dash-muted));
}

html[data-vok-theme="noir"] .dash .dash-source-pick[aria-pressed="true"]::after {
    background: color-mix(in srgb, var(--dash-accent) 68%, var(--dash-muted));
    box-shadow: 0 0 6px color-mix(in srgb, var(--dash-accent) 32%, transparent);
}

html[data-vok-theme="noir"] .dash #stt-load-fill {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--dash-accent) 74%, var(--dash-elev2)),
        color-mix(in srgb, var(--dash-accent) 56%, var(--dash-elev2))
    );
}

html[data-vok-theme="noir"] .dash.dash--fs {
    box-shadow:
        inset 0 0 0 3px color-mix(in srgb, var(--dash-accent) 42%, transparent),
        0 0 14px color-mix(in srgb, var(--dash-accent) 16%, transparent);
}

html[data-vok-theme="noir"] .dash.dash--fs.dash--fs-live {
    box-shadow:
        inset 0 0 0 5px color-mix(in srgb, var(--dash-accent) 54%, transparent),
        0 0 20px color-mix(in srgb, var(--dash-accent) 28%, transparent),
        0 0 28px color-mix(in srgb, var(--dash-hot) 12%, transparent);
}

html[data-vok-theme="noir"] .dash.dash--fs.dash--fs-live::after {
    background: conic-gradient(
        from var(--vok-fs-a),
        transparent 0deg 258deg,
        color-mix(in srgb, var(--dash-accent) 36%, transparent) 296deg,
        color-mix(in srgb, var(--dash-accent) 66%, var(--dash-muted)) 324deg,
        color-mix(in srgb, var(--dash-hot) 52%, var(--dash-muted)) 350deg,
        color-mix(in srgb, var(--dash-accent) 58%, var(--dash-muted)) 358deg,
        transparent 360deg
    );
}